15
ECMAScript 5: Новое в JavaScript Юрій Чайковський yura.chaikovsky@gmail. com

ECMAScript 5: Новое в JavaScript

  • Upload
    -

  • View
    1.313

  • Download
    1

Embed Size (px)

DESCRIPTION

Presentation from HTML5 Camp, UXnext for designers, developers and UX professionals

Citation preview

Page 1: ECMAScript 5: Новое в JavaScript

ECMAScript 5: Новое в JavaScript

Юрій Чайковський

[email protected]

Page 2: ECMAScript 5: Новое в JavaScript

Syntax

Reserved words

var label = {

class : "active"

}

Comma

var fibonacci = [0, 1, 2, 3, 5, ];

Line breaks

var literal = "Line breaks \

is standardized";

Page 3: ECMAScript 5: Новое в JavaScript

Arrays

Iterations

forEach(), every(), some(),map(), filter(),reduce(), reduceRight(),

SearchindexOf(), lastIndexOf()

Type checkfibonacci.isArray() === true;

Page 4: ECMAScript 5: Новое в JavaScript

JSON

var event = {title : "HTML5Camp ",date : new Date("2011-03-28T10:00:00.000Z"),

}

JSON.stringify(value, replacer, space)

var str = JSON.stringify(event);{"title":"HTML5Camp","date":"2011-03-28T10:00:00.000Z"}

JSON.parse(string, reviver)JSON.parse(str, function(key, value){

if(key == "title"){return value.trim();

}});

Page 5: ECMAScript 5: Новое в JavaScript

Strict mode

"use strict";

location = "http://www.microsoft.com";

var person = {"name" : "Yura", "name" : "Chaikovsky"};

var geval = eval;

with, arguments.caller, arguments.callee

(function(){...}).call(null);

(function(){return !this;

})();

Function.prototype.bind(thisArg, arg1, arg2....)

Page 6: ECMAScript 5: Новое в JavaScript

Objects: Point

function Point(x, y) {  this.x = +x; this.y = +y; }

var pt = new Point(3,5);

pt.x = 'foo';

Page 7: ECMAScript 5: Новое в JavaScript

Objects: Creating

Object.create(p,{(n:attrs)*})  .defineProperty(o,n,attrs)

.defineProperties(o,{(n:attrs)*}) .getOwnPropertyNames(o) → names .getOwnPropertyDescriptor(o,n) → attrs

attrs ::= { value:v, writable:b,       enumerable:b, configurable:b } |

{ get:f()→v, set:f(v),

     enumerable:b, configurable:b }

Page 8: ECMAScript 5: Новое в JavaScript

Objects: New Point

function Point(x, y) { return Object.freeze({ x: +x, y: +y });

}

// (new Point(3,4) instanceof Point) === false

Page 9: ECMAScript 5: Новое в JavaScript

Objects: New Point

function Point(x, y) { return Object.freeze({ x: +x, y: +y });

}

// (new Point(3,4) instanceof Point) === false

function Point(x, y) { return Object.freeze( Object.create(Point.prototype, { x: { value: +x, enumerable: true }, y: { value: +y, enumerable: true } }));}

Page 10: ECMAScript 5: Новое в JavaScript

Objects: Accessor (getter/setter)

Old school...

var evnt = (function(){var eventType = "barcamp";return {

type : function(tp){if(typeof tp != "undefined"){

//setter...eventType = tp;

}else{//getter...return eventType;

}}

};

})();

Page 11: ECMAScript 5: Новое в JavaScript

Objects: Creating

Object.create(p,{(n:attrs)*})  .defineProperty(o,n,attrs)

.defineProperties(o,{(n:attrs)*}) .getOwnPropertyNames(o) → names .getOwnPropertyDescriptor(o,n) → attrs

attrs ::= { value:v, writable:b,       enumerable:b, configurable:b } |

{ get:f()→v, set:f(v),

     enumerable:b, configurable:b }

Page 12: ECMAScript 5: Новое в JavaScript

Objects: Accessor (getter/setter)

Brand new...

var evnt = {eventType : "barcamp",

get type(){//getter...return evnt.eventType;

},

set type(tp){//setter...evnt.eventType = tp;

}};

Page 13: ECMAScript 5: Новое в JavaScript

Objects: Accessor (getter/setter)

or...

var evnt = Object.defineProperties({}, {

'typeName' : {value : "barcamp",

},

'type' : { get: function() { return …; }, set: function(tp) { … }, }

});

Page 14: ECMAScript 5: Новое в JavaScript

Objects: Restrictions

Object.preventExtensions( obj )Object.isExtensible( obj )

Object.seal( obj )Object.isSealed( obj )

Object.freeze( obj )Object.isFrozen( obj )

Page 15: ECMAScript 5: Новое в JavaScript

References

Mark Millerhttp://www.youtube.com/watch?v=Kq4FpMe6cRs

Douglas Crockfordhttp://www.slideshare.net/douglascrockford/newandimproved

Ilia Kantorhttp://www.youtube.com/watch?v=082iuEKV72c

John Resighttp://ejohn.org/blog/ecmascript-5-objects-and-properties/http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

David Flanaganhttp://davidflanagan.com/Talks/es5/slides.html