EcmaScript5.1<br />MASTERING NAMESPACES!<br />Илья Кантор<br />http://javascript.ru<br />
История<br />
varuser=<username="John"><br /><fieldtype="age"value="25"/><br /><fieldtype="email"value="john@gmail.com"/><br /></user><b...
ECMA-2625th edition <br />Что нового?<br />
ECMA-2625th edition <br />Багфиксы<br />
obj={<br />class:'Menu'<br />}<br />ES3: ошибка<br />ES5: ok<br />
functiontest(str){<br />varre=/ok/g<br />alert(re.test(str))<br />}<br />test("ok")<br />test("ok")<br />// true<br />// E...
alert(parseInt("010")==parseFloat("010"))<br />ES3: false<br />ES5: true<br />
varobj={<br />a:1,<br />b:2,<br />}<br />vararr[1,2,3,]<br />ES3: error<br />ES5: ok<br />
МетаСвойства<br />
writable = false<br />obj={<br />class:'Menu'<br />}<br />obj.class='Bird‘<br />=>obj.class == ‘Menu’<br />
configurable = false<br />obj={<br />class:'Menu'<br />}<br />deleteobj.class<br />=>obj.class == ‘Menu’<br />
enumerable = false<br />Object.prototype.each=...<br />for(propin{}){<br />// без свойства ‘each’<br />}<br />
Объявление<br />Object.defineProperty({},"class",<br />{<br />value:"Menu",<br />writable:false,<br />configurable:false,<...
Объявление<br />Object.defineProperties({},{<br />class:{<br />value:"Menu",<br />writable:false,<br />configurable:false<...
Закрытие объекта<br />varuser={<br />name:"Вася",<br />/* ... */<br />}<br />Object.preventExtensions(user)<br />user.a=5/...
Наследование<br />animal={<br />canWalk:true<br />}<br />rabbit=Object.create(animal,{<br />canRun:{<br />value:true<br />...
Наследование<br />rabbit=Object.create(animal,{<br />canRun:{<br />value:true<br />}<br />})<br />bird=Object.create(Objec...
Геттеры и Сеттеры<br />user=Object.defineProperty({},"fullName",{<br />get:function(){<br />returnthis.firstName+' '+this....
Геттеры и Сеттеры<br />varuser={<br />getfullName(){<br />returnthis.firstName+' '+this.lastName<br />},<br />setfullName(...
JSON<br />
JSON<br />event={<br />title:"Conference",<br />date:“today"<br />}<br />str=JSON.stringify(event)<br /><ul><li>{"title":"...
JSON – любые объекты<br />functionRoom(number){<br />this.toJSON=function(){<br />returnnumber<br />}<br />}<br />event={<...
JSON – любые объекты<br />functionRoom(number){<br />this.toJSON=function(){<br />returnnumber<br />}<br />}<br />event={<...
JSON.stringify(str, whitelist)<br />event={<br />title:"Conference",<br />date:newDate(),<br />domElement:document.body<br...
JSON.stringify(str, replacer)<br />event={<br />title:"Conference",<br />date:newDate(),<br />domElement:document.body<br ...
JSON.parse(str)<br />str='{"title":"Conference",    <br />  "date":"2011-02-15T09:44:13.419Z"}'<br />event=JSON.parse(str)...
JSON.parse(str)<br />str='{"title":"Conference",    <br />  "date":"2011-02-15T09:44:13.419Z"}'<br />event=JSON.parse(str)...
JSON.parse(str, reviver)<br />str='{"title":"Conference",    <br />  "date":"2011-02-15T09:44:13.419Z"}'<br />event=JSON.p...
bind<br />
bind(this)<br />functionButton(elem){<br />this.sayHi=function(){<br />alert('Hi')<br />}<br />elem.onclick=function(){<br...
bind(this, args)<br />functionButton(elem){<br />this.say=function(phrase){<br />alert(phrase)<br />}<br />elem.onclick=fu...
Strict mode<br />
use strict<br />"use strict"<br />... code ...<br />
use strict<br />functionF(){<br />"use strict"<br />this.method=function(){<br />// strict mode inherited<br />}<br />}<br />
use strict<br />alert(010)// SyntaxError (octal literals deprecated)<br />a=5// ReferenceError (undeclared a)<br />obj.not...
Функции,которые давно ждали<br />Object.keys(obj)<br />"String".trim()<br />Array.isArray(arr)<br />[...].indexOf/lastInde...
The future is now ?<br />PrototypeJS<br />ES5-shim<br />
Harmony<br />
It’s all real<br />__noSuchMethod__Proxy.create<br />letblock_scoped="yay!"<br />constREALLY="srsly"<br />#(x) { x * x }<b...
Upcoming SlideShare
Loading in...5
×

EcmaScript 5.1

804

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
804
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "EcmaScript 5.1"

  1. 1. EcmaScript5.1<br />MASTERING NAMESPACES!<br />Илья Кантор<br />http://javascript.ru<br />
  2. 2. История<br />
  3. 3. varuser=<username="John"><br /><fieldtype="age"value="25"/><br /><fieldtype="email"value="john@gmail.com"/><br /></user><br />alert(user.field.(@type=="email").@value)<br />1997<br />ECMA-262 1st edition<br />1999<br />ECMA-2623rd edition <br />2001<br />Compact Profile <br />2004<br />E4X <br /> — <br />ECMA-262 4th ed.<br />2009<br />ECMA-2625th edition <br />???<br /> —<br />ECMA-262Harmony <br />
  4. 4. ECMA-2625th edition <br />Что нового?<br />
  5. 5. ECMA-2625th edition <br />Багфиксы<br />
  6. 6. obj={<br />class:'Menu'<br />}<br />ES3: ошибка<br />ES5: ok<br />
  7. 7. functiontest(str){<br />varre=/ok/g<br />alert(re.test(str))<br />}<br />test("ok")<br />test("ok")<br />// true<br />// ES3: false, ES5: true<br />
  8. 8. alert(parseInt("010")==parseFloat("010"))<br />ES3: false<br />ES5: true<br />
  9. 9. varobj={<br />a:1,<br />b:2,<br />}<br />vararr[1,2,3,]<br />ES3: error<br />ES5: ok<br />
  10. 10. МетаСвойства<br />
  11. 11. writable = false<br />obj={<br />class:'Menu'<br />}<br />obj.class='Bird‘<br />=>obj.class == ‘Menu’<br />
  12. 12. configurable = false<br />obj={<br />class:'Menu'<br />}<br />deleteobj.class<br />=>obj.class == ‘Menu’<br />
  13. 13. enumerable = false<br />Object.prototype.each=...<br />for(propin{}){<br />// без свойства ‘each’<br />}<br />
  14. 14. Объявление<br />Object.defineProperty({},"class",<br />{<br />value:"Menu",<br />writable:false,<br />configurable:false,<br />enumerable:true<br />})<br />=> { “class” : “Menu” }<br />property descriptor<br />
  15. 15. Объявление<br />Object.defineProperties({},{<br />class:{<br />value:"Menu",<br />writable:false,<br />configurable:false<br />},<br />height:{<br />value:200,<br />configurable:false<br />}<br />})<br />=> { “class” : “Menu”, “height”: 200 }<br />
  16. 16. Закрытие объекта<br />varuser={<br />name:"Вася",<br />/* ... */<br />}<br />Object.preventExtensions(user)<br />user.a=5// Нельзя добавлять свойства<br />Object.seal(user)<br />deleteuser.name// Нельзя удалять свойства<br />Object.freeze(user)<br />user.name='Петя'// Нельзя менять свойства<br />
  17. 17. Наследование<br />animal={<br />canWalk:true<br />}<br />rabbit=Object.create(animal,{<br />canRun:{<br />value:true<br />}<br />})<br />alert(rabbit.canWalk)// true<br />Object.getPrototypeOf(rabbit) == animal // true<br />
  18. 18. Наследование<br />rabbit=Object.create(animal,{<br />canRun:{<br />value:true<br />}<br />})<br />bird=Object.create(Object.getPrototypeOf(rabbit),{<br />canFly:{<br />value:true<br />}<br />})<br />
  19. 19. Геттеры и Сеттеры<br />user=Object.defineProperty({},"fullName",{<br />get:function(){<br />returnthis.firstName+' '+this.lastName<br />},<br />set:function(value){<br />vars=value.trim().split(/s+/,2)<br />this.firstName=s[0]; this.lastName=s[1]<br />}<br />})<br /> <br />user.fullName="Вася Пупкин"<br />alert(user.lastName)// Пупкин<br />
  20. 20. Геттеры и Сеттеры<br />varuser={<br />getfullName(){<br />returnthis.firstName+' '+this.lastName<br />},<br />setfullName(value){<br />vars=value.trim().split(/s+/,2)<br />this.firstName=s[0]; this.lastName=s[1]<br />}<br />}<br /> <br />user.fullName="Вася Пупкин"<br />alert(user.lastName)// Пупкин<br />
  21. 21. JSON<br />
  22. 22. JSON<br />event={<br />title:"Conference",<br />date:“today"<br />}<br />str=JSON.stringify(event)<br /><ul><li>{"title":"Conference","date":"today"}</li></ul>event =JSON.parse(str)<br />@see https://github.com/douglascrockford/JSON-js<br />
  23. 23. JSON – любые объекты<br />functionRoom(number){<br />this.toJSON=function(){<br />returnnumber<br />}<br />}<br />event={<br />title:"Conference",<br />date:newDate(),<br />room:newRoom(22)<br />}<br />JSON.stringify(event)<br />{"title":"Conference","date":"2011-02-15T09:12:06.836Z","room":22}<br />
  24. 24. JSON – любые объекты<br />functionRoom(number){<br />this.toJSON=function(){<br />returnnumber<br />}<br />}<br />event={<br />title:"Conference",<br />date:newDate(), Date.prototype.toJSON<br />room:newRoom(22)<br />}<br />JSON.stringify(event)<br />{"title":"Conference","date":"2011-02-15T09:12:06.836Z","room":22}<br />
  25. 25. JSON.stringify(str, whitelist)<br />event={<br />title:"Conference",<br />date:newDate(),<br />domElement:document.body<br />}<br />JSON.stringify(event)<br />=> TypeError: Converting circular structure to JSON<br />JSON.stringify(event,["title","date"])<br />=> {"title":"Conference","date":"2011-02-15T09:44:13.419Z"}<br />
  26. 26. JSON.stringify(str, replacer)<br />event={<br />title:"Conference",<br />date:newDate(),<br />domElement:document.body<br />}<br />JSON.stringify(event,function(key,value){<br />returnvalue.nodeName?undefined:value<br />})<br />=> {"title":"Conference","date":"2011-02-15T09:44:13.419Z"}<br />
  27. 27. JSON.parse(str)<br />str='{"title":"Conference", <br /> "date":"2011-02-15T09:44:13.419Z"}'<br />event=JSON.parse(str)<br />пробелы<br />
  28. 28. JSON.parse(str)<br />str='{"title":"Conference", <br /> "date":"2011-02-15T09:44:13.419Z"}'<br />event=JSON.parse(str)<br />event.date.getDay()<br />=> TypeError: no method 'getDay'<br />
  29. 29. JSON.parse(str, reviver)<br />str='{"title":"Conference", <br /> "date":"2011-02-15T09:44:13.419Z"}'<br />event=JSON.parse(str,function(key,value){<br />if(key=='date'){<br />returnnewDate(value)<br />}<br />returnvalue<br />})<br />event.date.getDay()<br />=> 2<br />
  30. 30. bind<br />
  31. 31. bind(this)<br />functionButton(elem){<br />this.sayHi=function(){<br />alert('Hi')<br />}<br />elem.onclick=function(){<br />this.sayHi()<br />}.bind(this)<br />}<br />
  32. 32. bind(this, args)<br />functionButton(elem){<br />this.say=function(phrase){<br />alert(phrase)<br />}<br />elem.onclick=function(event,phrase){<br />this.say(phrase)<br />}.bind(this,'Hi')<br />}<br />@see http://www.prototypejs.org/api/function/bind<br />
  33. 33. Strict mode<br />
  34. 34. use strict<br />"use strict"<br />... code ...<br />
  35. 35. use strict<br />functionF(){<br />"use strict"<br />this.method=function(){<br />// strict mode inherited<br />}<br />}<br />
  36. 36. use strict<br />alert(010)// SyntaxError (octal literals deprecated)<br />a=5// ReferenceError (undeclared a)<br />obj.notWritable=...// TypeError<br />deleteobj.notConfigurable// TypeError<br />eval("var a = 5")<br />alert(a)// ReferenceError (undeclared a)<br />arguments.callee// TypeError<br />arguments.caller// TypeError<br />(function(){<br />alert(this)// undefined вместо window<br />})()<br />with(..)// SyntaxError, 'with' statement<br />
  37. 37. Функции,которые давно ждали<br />Object.keys(obj)<br />"String".trim()<br />Array.isArray(arr)<br />[...].indexOf/lastIndexOf<br />[...].forEach<br />[...].map<br />[...].filter<br />[...].reduce/reduceRight<br />// ...<br />@seehttp://kangax.github.com/es5-compat-table/<br />
  38. 38. The future is now ?<br />PrototypeJS<br />ES5-shim<br />
  39. 39. Harmony<br />
  40. 40. It’s all real<br />__noSuchMethod__Proxy.create<br />letblock_scoped="yay!"<br />constREALLY="srsly"<br />#(x) { x * x }<br />ifx>zreturn"без скобок"<br />moduleIter="@std:Iteration" <br />return[i*iforiinrange(n)]<br />functionprintf(format,...args)ek_scoped= "yay!" consEALLY= "srsly" <br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×