• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
ECMAScript 5
 

ECMAScript 5

on

  • 27,664 views

The new ECMAScript 5 standard brings on the table some very nice features you can use right away in the modern browsers. The presentation is a big overview of them.

The new ECMAScript 5 standard brings on the table some very nice features you can use right away in the modern browsers. The presentation is a big overview of them.

Statistics

Views

Total Views
27,664
Views on SlideShare
21,685
Embed Views
5,979

Actions

Likes
123
Downloads
372
Comments
1

42 Embeds 5,979

http://blog.simonenko.su 3937
http://blog.aijoona.com 749
http://simonenko.su 277
http://blog.phatograph.com 201
http://a0.twimg.com 114
http://www.mathieurobin.com 113
http://www.scoop.it 100
http://www.redditmedia.com 67
http://unkei3.tumblr.com 66
http://simonenko.tumblr.com 55
http://paper.li 46
http://stri.sinaapp.com 45
http://us-w1.rockmelt.com 28
http://flavors.me 27
http://feeds.feedburner.com 23
http://areographically.rssing.com 15
https://twitter.com 14
http://asuka.local 12
http://127.0.0.1 9
http://ea 9
http://safe.tumblr.com 8
http://fe.com 8
http://192.168.0.108 7
http://wakebot.com 6
https://si0.twimg.com 5
http://www.kanban.ru 5
http://jp.flavors.me 4
http://andrelam.info 4
https://abs.twimg.com 3
http://localhost 3
http://blogrider.ru 3
http://webcache.googleusercontent.com 3
http://www.linkedin.com 2
http://www.verious.com 2
https://www.linkedin.com 2
http://hghltd.yandex.net 1
https://twimg0-a.akamaihd.net 1
http://products-3.arktan.com 1
http://twitter.com 1
http://pt.flavors.me 1
http://tweetedtimes.com 1
http://fr.flavors.me 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • A very nice and helpful slide. Thx for sharing :)
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    ECMAScript 5 ECMAScript 5 Presentation Transcript

    • ECMAScript 5
    • Damian Wielgosik varjs.comfront-trends.com @varjs
    • Hey, what is that ECMAScript actually?
    • let’s create a simplest object ever
    • var obj = {};
    • let’s add a property to it
    • var obj = { foo : 1};
    • let’s read that property
    • var obj = { foo : 1};obj.foo; // 1 - this is how we read a value from property "foo" ofthe object "obj"
    • let’s modify that property
    • var obj = { foo : 1};obj.foo = 2;obj.foo; // 2
    • every object except null takes some stuff from Object.prototype
    • var obj = {};typeof obj.hasOwnProperty; // "function"
    • var obj = {};obj.hasOwnProperty === Object.prototype.hasOwnProperty; // true
    • hasOwnProperty is a goodexample of Object.prototype property
    • is there a way to create an object withoutObject.prototype properties?
    • Object.create
    • var obj = Object.create(null); // ECMA 5 way
    • var obj = Object.create(null); // ECMA 5 waytypeof obj.hasOwnProperty; // "undefined"
    • Object.create(null)does not use Object.prototype
    • Object.create(null) - pure object
    • Object.create(null) you don’t get:•.constructor•.toString•.toLocaleString•.valueOf•.hasOwnProperty•.isPrototypeOf•.propertyIsEnumerable
    • Object.create(null) -imagine null-like object with allowed extensions
    • Dude, I want Object.prototype
    • Object.create - put a prototype you want toinherit from as a first argument
    • var obj = Object.create({});typeof obj.hasOwnProperty; // "function"obj instanceof Object; // true
    • Hell yeah!
    • var obj = Object.create({});obj.__proto__.__proto__ === Object.prototype; // true (ES3way)
    • btw. there isObject.isPrototypeOf
    • var obj = Object.create({});Object.prototype.isPrototypeOf(obj); // true same asvar obj = Object.create({});obj.__proto__.__proto__ === Object.prototype; // true (ES3 way)
    • everything starts withObject.prototype, I’m sure you lied!
    • var obj = Object.create(null);Object.prototype.isPrototypeOf(obj); // false
    • isPrototypeOf is even from ECMA 3!
    • Object.getPrototypeOf is a new stuff however...
    • var obj = Object.create({});Object.getPrototypeOf(obj) === obj.__proto__; // true
    • with Object.getPrototypeOf you simply forget aboutnon-standard obj.__proto__
    • var fn = function() {};fn.prototype.foobar = 1;var obj = new fn();Object.getPrototypeOf(obj) === fn.prototype;
    • var obj = Object.create({});Object.prototype.isPrototypeOf(obj); // true same asvar obj = Object.create({});Object.getPrototypeOf(Object.getPrototypeOf(obj)) ===Object.prototype; // true// no __proto__!
    • Ok, you won. Tell me more about Object.create!
    • if (!Object.create) { Object.create = function (o) { if (arguments.length > 1) { throw new Error(Object.create implementation onlyaccepts the first parameter.); } function F() {}; F.prototype = o; return new F(); };}
    • wow, we found a polyfill!
    • inheritance?
    • var animal = Object.create({ age : null, setAge: function(age) { this.age = age; }});var bird = Object.create(animal);bird.setAge(10);bird.age; // 10
    • give me analogy, I still remember ECMA3
    • var Animal = function() {};Animal.prototype = { age : null, setAge: function(age) { this.age = age; }};var Bird = function() {};Bird.prototype = new Animal();var bird = new Bird();bird.setAge(10);bird.age; // 10
    • more analogies?
    • var Animal = function() {};var obj = new Animal();var obj2 = Object.create(Animal.prototype);obj2.constructor === obj.constructor; // true
    • not enough, you know that
    • var obj = {};// does the same job asvar obj2 = Object.create(Object.prototype);
    • more ECMA5!
    • Object.defineProperty
    • how we used to add new properties
    • var obj = {};obj.myProperty = 100;
    • how we do it with defineProperty
    • var obj = {};Object.defineProperty(obj, "foobar", { value : 100, // default: undefined writable : true, // default: false enumerable : true, // default: false configurable : true // default: false});obj.foobar; // 100
    • writable?!
    • var obj = {};Object.defineProperty(obj, "foobar", { value : 100, writable : false});obj.foobar; // 100obj.foobar = 200;obj.foobar; // 100
    • writable: falseforget about changing property’s value
    • enumerable?!
    • var obj = {};Object.defineProperty(obj, "foobar", { value : 100, enumerable : false});for (var i in obj) { console.log(obj[i]);}// nothing happened
    • however...
    • var obj = {};Object.defineProperty(obj, "foobar", { value : 100, enumerable : true !});for (var i in obj) { console.log(obj[i]);}// „foobar” !
    • configurable?!
    • var obj = {};Object.defineProperty(obj, "foobar", { value : 100, configurable : false});delete obj.foobar; // falseobj.foobar; // 100
    • var obj = {};Object.defineProperty(obj, "foobar", { value : 100, configurable : false}); // it’s ok, we just defined a foobar property not to be configurableObject.defineProperty(obj, "foobar", { configurable : true}); // throws a TypeErrorObject.defineProperty(obj, "foobar", { writable : true}); // throws a TypeErrorObject.defineProperty(obj, "foobar", { enumerable : true}); // throws a TypeError
    • Summary of descriptors
    • var obj = {};obj.foobar = 100; same asObject.defineProperty(obj, "foobar", { value : 100, writable : true, configurable : true, enumerable : true});
    • Object.defineProperty(obj, "foobar", { value : 100}); same asObject.defineProperty(obj, "foobar", { value : 100, writable : false, configurable : false, enumerable : false});
    • IE8 allows you use it only with DOM objects Summary of descriptors
    • Oh, there are setters and getters
    • setters
    • var rect = { x: 5, y: 2};Object.defineProperty(rect, "area", { set: function(value) { throw new Error("Cannot set a value"); }, get: function() { return this.x * this.y; }});rect.area = -21; // Error: Cannot set a value
    • watch out
    • var rect = { x: 5, y: 2};Object.defineProperty(rect, "area", { set: function(value) { throw new Error("Cannot set a value"); }, get: function() { return this.x * this.y; }, writable: false // TypeError: Invalid property. A property cannot bothhave accessors and be writable or have a value: #<Object>});
    • getters
    • var rect = { x: 5, y: 2};Object.defineProperty(rect, "area", { set: function(value) { throw new Error("Cannot set a value"); }, get: function() { return this.x * this.y; }});rect.area; // 10 (5 * 2 = 10)
    • Object.defineProperties
    • var obj = {};Object.defineProperties(obj, { "firstname": { value: "Damian", writable: false }, "nickname": { value: "varjs", writable: false }});obj.firstname; // "Damian"obj.nickname; // "varjs"
    • Object.defineProperties in other words
    • Object.defineProperties = function(obj, props) { for (var prop in props) { Object.defineProperty(obj, prop, props[prop]); }};
    • back to Object.create...
    • var obj = Object.create({}, { "foobar" : { value: 100, writable: true, enumerable: false }});obj.foobar; // 100
    • Object.getOwnPropertyDescriptor
    • var obj = {};Object.defineProperties(obj, { "firstname": { value: "Damian", writable: true }, "nickname": { value: "varjs", writable: true }});obj.firstname; // "Damian"obj.nickname; // "varjs"Object.getOwnPropertyDescriptor(obj, "firstname");// Object { value="Damian", writable=true, enumerable=false,configurable=false}
    • Object.getOwnPropertyNames
    • works for arrays!
    • var arr = ["a", "b", "c"];Object.getOwnPropertyNames(arr); // ["length", "0", "1", "2"]
    • works for objects!
    • var obj = { foo: "bar", barbar: "barbar"};Object.getOwnPropertyNames(obj); // ["foo", "barbar"]
    • works even with not enumerable properties
    • var obj = {};Object.defineProperty(obj, "foobar", { enumerable: false});Object.getOwnPropertyNames(obj); // ["foobar"]
    • Object.keys
    • var obj = { foo: 1, bar: 2, foobar: 3};Object.keys(obj); // ["foo", "bar", "foobar"]
    • it returns only enumerables...
    • var obj = Object.create({}, { "foo" : { value: 100, enumerable: false ! }, "bar" : { value: 200, enumerable: true }});Object.keys(obj); // ["bar"] !
    • no „foo” since it’s not enumerable
    • arrays?
    • var arr = [1, 2, 3];Object.keys(arr); // ["0", "1", "2"]
    • Polyfill?
    • if(!Object.keys) { Object.keys = function(o) { if (o !== Object(o)) { throw new TypeError(Object.keys called on non-object); } var ret = []; var p; for (p in o) { if (Object.prototype.hasOwnProperty.call(o, p)) { ret.push(p); } } return ret; };}
    • Object.seal
    • var obj = { foo: 1};Object.seal(obj);obj.myEvilProperty = 1337;obj.myEvilProperty; // undefined
    • It prevents new properties from being added to the sealed object!
    • var obj = { foo: 1};Object.seal(obj);Object.defineProperty(obj, "foo", { value: "boom" }); // throws a TypeError
    • Object.seal makes all theproperties not configurable
    • var obj = { foo: 1};Object.seal(obj);Object.defineProperty(obj, "foo", { get: function() { return "g"; }}); // throws a TypeError
    • var obj = { foo: 1};Object.seal(obj);delete obj.foo; // does nothingobj.foo; // 1
    • Object.isSealed
    • var obj = { foo: 1};Object.seal(obj);Object.isSealed(obj); // true
    • Object.freeze
    • well, you can do nothing
    • Freezes an object: that is, prevents new properties frombeing added to it; prevents existing properties from beingremoved; and prevents existing properties, or theirenumerability, configurability, or writability, from beingchanged. In essence the object is made effectivelyimmutable. The method returns the object being frozen. - MDN - the best source of knowledge https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/freeze
    • var obj = { foo: 1};Object.freeze(obj);obj.myEvilProperty = 1337;obj.myEvilProperty; // undefined
    • var obj = { foo: 1};Object.freeze(obj);obj.foo = 1337;obj.foo; // 1
    • var obj = { foo: 1};Object.freeze(obj);Object.defineProperty(obj, "foo", { value: "boom" }); // throws a TypeError
    • var obj = { foo: 1};Object.freeze(obj);delete obj.foo; // false
    • Object.isFrozen
    • var obj = { foo: 1};Object.freeze(obj);Object.isFrozen(obj); // true
    • Object.preventExtensions
    • Simply, you can’t add new properties
    • var obj = { foo: 1};Object.preventExtensions(obj);obj.myEvilProperty = 1337;obj.myEvilProperty; // undefined
    • How it’s different than Object.seal?
    • You can remove properties!
    • var obj = { foo: 1};Object.seal(obj);delete obj.foo; // falsevar obj2 = { bar: 2};Object.preventExtensions(obj2);delete obj2.bar; // true
    • You can change descriptors!
    • var obj = { foo: 1};Object.seal(obj);Object.defineProperty(obj, "foo", { enumerable: false}); // throws a TypeErrorvar obj2 = { bar: 2};Object.preventExtensions(obj2);Object.defineProperty(obj2, "bar", { enumerable: false}); // its ok
    • Object.isExtensible
    • var obj = { foo: 1};Object.preventExtensions(obj);Object.isExtensible(obj); // false
    • More ECMAScript 5?
    • Array.prototype.reduceRight Array.prototype.reduce Array.prototype.filter Array.prototype.map Array.prototype.forEach Array.prototype.some Array.prototype.everyArray.prototype.lastIndexOf Array.prototype.indexOf
    • More?!
    • Function.prototype.bind
    • Function.prototype.bind = function(){ var fn = this, args = Array.prototype.slice.call(arguments), object= args.shift(); return function(){ return fn.apply(object, args.concat(Array.prototype.slice.call(arguments))); };};
    • Date.now()
    • Date.now() === +new Date()
    • Date.now(); // 1318362644511
    • Array.isArray
    • We used to use...
    • Object.prototype.toString.call([]) === "[object Array]";
    • Now we use...
    • Array.isArray(null); // falseArray.isArray([]); // trueArray.isArray({ length: 1 }); // false
    • String.prototype.trim
    • We used to use...
    • String.prototype.trim = function() { return this.replace(/^s+|s+$/, "");}"my string ".trim(); // "my string"
    • Now we use...
    • "my string ".trim(); // "my string"
    • In ECMAScript 5 we have...
    • Native JSON!
    • typeof JSON === "object"; // true
    • var foo = {};foo.bar = "new property";foo.baz = 3;var JSONfoo = JSON.stringify(foo); // {"bar":"new property","baz":3}var foo = JSON.parse(JSONfoo); // yet again we have an object
    • strict mode
    • all of these throw errors"use strict";eval = 17;arguments++;++eval;var obj = { set p(arguments) { } };var eval;try { } catch (arguments) { }function x(eval) { }function arguments() { }var y = function eval() { };var f = new Function("arguments", "use strict; return 17;");"use strict";var fn = function() { return arguments.callee; };fn(); more: https://developer.mozilla.org/en/JavaScript/Strict_mode