Your SlideShare is downloading. ×
Say Hello To Ecmascript 5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Say Hello To Ecmascript 5

8,698
views

Published on


0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,698
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
181
Comments
0
Likes
24
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide































































  • Transcript

    • 1. Say hello to ECMAScript 5 by @kangax
    • 2. What is ECMAScript? • Originated as JavaScript (actually, Mocha) • Standardized by ECMA International • JavaScript, JScript, ActionScript • 5th edition in Dec ‘09
    • 3. ECMAScript 5 New meta-level control Additions to language API Refinements, bug fixes Strict mode
    • 4. New meta-level control
    • 5. New meta-level control { foo: "string", bar: 3.14, "baz": true, 5: [1,2,3] }
    • 6. New meta-level control { foo: "string", bar: 3.14, "baz": true, 5: [1,2,3] }
    • 7. New meta-level control { foo: "string", bar: 3.14, "baz": true, 5: [1,2,3] } [[Writable]] [[Enumerable]] [[Configurable]]
    • 8. New meta-level control [[Writable]] [[Enumerable]] [[Configurable]] var object = { key: "value" }; // when writable object.property = "new value"; object.property; // "new value" // not writable object.property = "new value"; object.property; // "value"
    • 9. New meta-level control [[Writable]] [[Enumerable]] [[Configurable]] var object = { key: "value" }; var keys = []; for (var prop in object) { keys.push(prop); } keys; // enumerable — ["key"] // non-enumerable — []
    • 10. New meta-level control [[Writable]] [[Enumerable]] [[Configurable]] var object = { key: "value" }; delete object.key; // configurable object.key; // undefined // non-configurable object.key; // "value"
    • 11. New meta-level control Property descriptors to the rescue Object.defineProperty Object.defineProperties Object.create
    • 12. New meta-level control Property descriptors to the rescue Object.defineProperty({}, "key", { value: "foo bar baz", writable: true, enumerable: true, configurable: true });
    • 13. New meta-level control Property descriptors to the rescue Object.defineProperty({}, "key", { value: "foo bar baz", writable: true, enumerable: true, configurable: true });
    • 14. New meta-level control Property descriptors to the rescue Object.defineProperty({}, "key", { value: "foo bar baz", writable: true, enumerable: true, configurable: true }); Property descriptor
    • 15. New meta-level control Property descriptors to the rescue Object.defineProperty({}, "key", { value: "foo bar baz", writable: true, enumerable: true, configurable: true });
    • 16. New meta-level control Property descriptors to the rescue Object.defineProperty({}, "key", { value: "foo bar baz", writable: true, enumerable: true, configurable: true });
    • 17. New meta-level control Property descriptors to the rescue Object.defineProperty({}, "key", { value: "foo bar baz", writable: true, enumerable: true, configurable: true }); { key: "foo bar baz" }
    • 18. New meta-level control Property descriptors to the rescue Object.defineProperties({}, { key1: { value: "foo bar baz", enumerable: true }, key2: { value: "foo bar baz", configurable: true } });
    • 19. New meta-level control Property descriptors to the rescue Object.defineProperties({}, { key1: { value: "foo bar baz", enumerable: true }, Property descriptors key2: { value: "trololololo", configurable: true } });
    • 20. New meta-level control Property descriptors to the rescue Object.defineProperties({}, { key1: { value: "foo bar baz", enumerable: true }, key2: { value: "trololololo", configurable: true } });
    • 21. New meta-level control Property descriptors to the rescue Object.defineProperties({}, { key1: { value: "foo bar baz" }, key2: { value: "trololololo" } }); { key1: "foo bar baz", key2: "trololololo" }
    • 22. New meta-level control Property descriptors to the rescue Object.create(parentObject, { key1: { value: "foo bar baz", enumerable: true }, key2: { value: "foo bar baz", configurable: true } });
    • 23. New meta-level control Property descriptors to the rescue Object.create(parentObject, { key1: { value: "foo bar baz", enumerable: true }, Property descriptors key2: { value: "foo bar baz", configurable: true } });
    • 24. New meta-level control Property descriptors to the rescue Object.create(parentObject, { key1: { value: "foo bar baz" }, ... }); [[Prototype]] { key1: "foo bar baz", key2: "trololololo" }
    • 25. New meta-level control Examples Object.defineProperty(Object.prototype, "clone", { value: function(props){ return Object.create(this, props); } } );
    • 26. New meta-level control Examples Object.defineProperty(Object.prototype, "clone", { value: function(props){ return Object.create(this, props); } } );
    • 27. New meta-level control Examples var john = { name: "John", skill: "Javascript" }; var mike = john.clone({ name: { value: "Mike" } }); mike.name; // "Mike" mike.skill; // "Javascript"
    • 28. New meta-level control Examples var john = { name: "John", skill: "Javascript" }; var mike = john.clone({ name: { value: "Mike" } }); mike.name; // "Mike" mike.skill; // "Javascript" (inherited)
    • 29. New meta-level control Examples var john = { name: "John", skill: "Javascript" }; var mike = john.clone({ name: { value: "Mike" } }); for (var prop in mike) { console.log(prop); // "name" and "skill" }
    • 30. Additions to language API
    • 31. Additions to language API 1) String.prototype.trim " hello world ".trim(); // "hello world" var person = { name: " Joe ", trim: String.prototype.trim, toString: function(){ return this.name; } }; person.trim(); "Joe"
    • 32. Additions to language API 1) String.prototype.trim " hello world ".trim(); // "hello world" var person = { name: " Joe ", trim: String.prototype.trim, toString: function(){ return this.name; } }; person.trim(); "Joe"
    • 33. Additions to language API 2) Array.prototype extensions [1,2,3].map(function(value){ return value * 2; }); // [2,4,6]
    • 34. Additions to language API 2) Array.prototype extensions [1,2,3].map(function(value){ return value * 2; }); // [2,4,6]
    • 35. Additions to language API 2) Array.prototype extensions [1,2,3,4,5,6].filter(function(value){ return value > 3; }); // [4,5,6]
    • 36. Additions to language API 2) Array.prototype extensions [1,2,3,4,5,6].filter(function(value){ return value > 3; }); // [4,5,6]
    • 37. Additions to language API 2) Array.prototype extensions [1,2,3,4,5,3].indexOf(3); // 2 [1,2,3,4,5,3].lastIndexOf(3); // 5
    • 38. Additions to language API 2) Array.prototype extensions [1,2,3,4,5,3].indexOf(3); // 2 [1,2,3,4,5,3].lastIndexOf(3); // 5
    • 39. Additions to language API 2) Array.prototype extensions [1,2,3,4].reduce(function(prev, curr){ return prev + curr; }); // 10 1+2 -> 3 3+3 -> 6 6+4 -> 10
    • 40. Additions to language API 2) Array.prototype extensions [1,2,3,4].reduce(function(prev, curr){ return prev + curr; }); // 10 1+2 → 3 3+3 → 6 6+4 → 10
    • 41. Additions to language API 2) Array.prototype extensions function sum(){ return this.reduce(function(prev, curr){ return prev + curr; }); } Object.defineProperty( Array.prototype, "sum", { value: sum }); [1,2,3].sum(); // 6 [1,2,3,4,5].sum() // 15
    • 42. Additions to language API 2) Array.prototype extensions function sum(){ return this.reduce(function(prev, curr){ return prev + curr; }); } Object.defineProperty( Array.prototype, "sum", { value: sum }); [1,2,3].sum(); // 6 [1,2,3,4,5].sum() // 15
    • 43. Refinements, bug fixes
    • 44. Refinements, bug fixes 1) undefined, NaN, Infinity are non-writable if (undefined == foo){ foo = { ... }; }
    • 45. Refinements, bug fixes 1) undefined, NaN, Infinity are non-writable if (undefined = foo){ foo = { ... }; } undefined; // foo (!) if (undefined == bar) { // might never be created bar = { ... }; }
    • 46. Refinements, bug fixes 2) reserved words as property names var myApp = { export: [module1, module2] }; var chevy = new Car(); chevy.class = "classic";
    • 47. Refinements, bug fixes 2) reserved words as property names var myApp = { export: [module1, module2] // boom! }; ES3 var chevy = new Car(); chevy.class = "classic"; // boom!
    • 48. Refinements, bug fixes 2) reserved words as property names var myApp = { export: [module1, module2] // OK! }; ES5 var chevy = new Car(); chevy.class = "classic"; // OK!
    • 49. Refinements, bug fixes 3) Tamper-proof built-ins function Array(){ alert("Stole your data!"); } var privateData = [...]; // Vulnerable browsers — e.g. FF2
    • 50. Refinements, bug fixes 3) Tamper-proof built-ins function Array(){ alert("Stole your data!"); } var privateData = [...]; // Vulnerable browsers — e.g. FF2
    • 51. Refinements, bug fixes 3) Tamper-proof built-ins function Array(){ alert("Stole your data!"); } var privateData = [...]; ES3 Data stolen ES5 Built-in function is called
    • 52. Strict mode
    • 53. Strict mode “use strict”
    • 54. Strict mode styles = { bodyColor: “red”, bodyBgColor: “green”, bodyColor: “yellow” } setTimeout(function(x, eval, x){ with(document) { if (!body) { setTimeout(arguments.callee, 10); } else { body.style.color = styles.bodyColor; } } }, 10);
    • 55. Strict mode styles = { color: “red”, bgColor: “green”, Undeclared assignment color: “yellow” } setTimeout(function(x, eval, x){ with(document) { if (!body) { setTimeout(arguments.callee, 10); } else { body.style.color = styles.color; } } }, 10);
    • 56. Strict mode styles = { color: “red”, Repeating property bgColor: “green”, names color: “yellow” } setTimeout(function(x, eval, x){ with(document) { if (!body) { setTimeout(arguments.callee, 10); } else { body.style.color = styles.color; } } }, 10);
    • 57. Strict mode styles = { color: “red”, bgColor: “green”, eval as argument name color: “yellow” } setTimeout(function(x, eval, x){ with(document) { if (!body) { setTimeout(arguments.callee, 10); } else { body.style.color = styles.color; } } }, 10);
    • 58. Strict mode styles = { color: “red”, repeating argument bgColor: “green”, names color: “yellow” } setTimeout(function(x, eval, x){ with(document) { if (!body) { setTimeout(arguments.callee, 10); } else { body.style.color = styles.color; } } }, 10);
    • 59. Strict mode styles = { color: “red”, bgColor: “green”, with statement color: “yellow” } setTimeout(function(x, eval, x){ with(document) { if (!body) { setTimeout(arguments.callee, 10); } else { body.style.color = styles.color; } } }, 10);
    • 60. Strict mode styles = { color: “red”, bgColor: “green”, arguments.callee color: “yellow” } setTimeout(function(x, eval, x){ with(document) { if (!body) { setTimeout(arguments.callee, 10); } else { body.style.color = styles.color; } } }, 10);
    • 61. Browser support http://kangax.github.com/es5-compat-table/
    • 62. References ECMA-262 5th ed. specification http://www.ecma-international.org/publications/standards/Ecma-262.htm ECMA-262 3rd ed. unofficial HTML version http://bclary.com/2004/11/07/ es-discuss mailing lists http://mail.mozilla.org/listinfo/es-discuss/ http://mail.mozilla.org/listinfo/es5-discuss/ comp.lang.javascript (here be dragons) http://groups.google.com/group/comp.lang.javascript/
    • 63. Thank you! by @kangax

    ×