Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Es51

1,086 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Es51

  1. 1. EcmaScript 5.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 />ECMAScript 5 compatibility table <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 />

×