ecmascript 5.1

40
MASTERING NAMESPACES! Илья Кантор http://javascript.ru EcmaScript 5.1

Upload: iliakan

Post on 15-Jan-2015

813 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: EcmaScript 5.1

MASTERING NAMESPACES!

Илья Канторhttp://javascript.ru

EcmaScript 5.1

Page 2: EcmaScript 5.1

История

Page 3: EcmaScript 5.1

1997ECMA-262 1st edition

1999ECMA-262 3rd edition

2009ECMA-262 5th edition

???

2001 Compact Profile

2004 E4X

var user = <user name="John"> <field type="age" value="25"/> <field type="email" value="[email protected]"/> </user> alert( user.field.(@type == "email").@value )

— ECMA-262 4th ed.

— ECMA-262 Harmony

Page 4: EcmaScript 5.1

Что нового?

ECMA-262 5th edition

Page 5: EcmaScript 5.1

Багфиксы

ECMA-262 5th edition

Page 6: EcmaScript 5.1

obj = { class: 'Menu' }

ES3: ошибкаES5: ok

Page 7: EcmaScript 5.1

function test(str) { var re = /ok/g alert( re.test(str) )}

test("ok") test("ok")

// true// ES3: false, ES5: true

Page 8: EcmaScript 5.1

alert( parseInt("010") == parseFloat("010") )

ES3: falseES5: true

Page 9: EcmaScript 5.1

var obj = { a: 1, b: 2,}

var arr [ 1, 2, 3, ]

ES3: errorES5: ok

Page 10: EcmaScript 5.1

МетаСвойства

Page 11: EcmaScript 5.1

writable = falseobj = { class: 'Menu'}

obj.class = 'Bird‘

=> obj.class == ‘Menu’

Page 12: EcmaScript 5.1

configurable = falseobj = { class: 'Menu'}

=> obj.class == ‘Menu’

delete obj.class

Page 13: EcmaScript 5.1

enumerable = false

Object.prototype.each = ...

for(prop in {}) { // без свойства ‘each’}

Page 14: EcmaScript 5.1

Объявление

Object.defineProperty({}, "class", { value: "Menu",

writable: false, configurable: false, enumerable: true})

=> { “class” : “Menu” }

property descriptor

Page 15: EcmaScript 5.1

Объявление

Object.defineProperties({}, { class: { value: "Menu", writable: false, configurable: false }, height: { value: 200, configurable: false }})

=> { “class” : “Menu”, “height”: 200 }

Page 16: EcmaScript 5.1

Закрытие объекта

var user = { name: "Вася", /* ... */}

Object.preventExtensions(user)

Object.seal(user)

Object.freeze(user)

user.a = 5 // Нельзя добавлять свойства

delete user.name // Нельзя удалять свойства

user.name = 'Петя' // Нельзя менять свойства

Page 17: EcmaScript 5.1

Наследование

animal = { canWalk: true}

rabbit = Object.create(animal, { canRun: { value: true }})

alert(rabbit.canWalk) // true

Object.getPrototypeOf(rabbit) == animal // true

Page 18: EcmaScript 5.1

Наследование

rabbit = Object.create(animal, { canRun: { value: true }})

bird = Object.create(Object.getPrototypeOf(rabbit), { canFly: { value: true }})

Page 19: EcmaScript 5.1

Геттеры и Сеттерыuser = Object.defineProperty({}, "fullName", { get: function() { return this.firstName+' '+this.lastName

}, set: function(value) { var s = value.trim().split(/\s+/, 2) this.firstName = s[0]; this.lastName = s[1]

} }) user.fullName = "Вася Пупкин"alert(user.lastName) // Пупкин

Page 20: EcmaScript 5.1

Геттеры и Сеттерыvar user = { get fullName () { return this.firstName+' '+this.lastName }, set fullName (value) { var s = value.trim().split(/\s+/, 2) this.firstName = s[0]; this.lastName = s[1] } }

 user.fullName = "Вася Пупкин"alert(user.lastName) // Пупкин

Page 21: EcmaScript 5.1

JSON

Page 22: EcmaScript 5.1

JSON

event = { title: "Conference", date: “today"}

str = JSON.stringify(event)

Þ {"title":"Conference","date":"today"}

event = JSON.parse(str)

@see https://github.com/douglascrockford/JSON-js

Page 23: EcmaScript 5.1

JSON – любые объектыfunction Room(number) { this.toJSON = function() { return number }}

event = { title: "Conference", date: new Date(), room: new Room(22)}

JSON.stringify(event)

{"title":"Conference","date":"2011-02-15T09:12:06.836Z","room":22}

Page 24: EcmaScript 5.1

JSON – любые объектыfunction Room(number) { this.toJSON = function() { return number }}

event = { title: "Conference", date: new Date(), Date.prototype.toJSON room: new Room(22)}

JSON.stringify(event)

{"title":"Conference","date":"2011-02-15T09:12:06.836Z","room":22}

Page 25: EcmaScript 5.1

JSON.stringify(str, whitelist)

event = { title: "Conference", date: new Date(), domElement: document.body }

JSON.stringify(event, ["title", "date"])=> {"title":"Conference","date":"2011-02-15T09:44:13.419Z"}

JSON.stringify(event)=> TypeError: Converting circular structure to JSON

Page 26: EcmaScript 5.1

JSON.stringify(str, replacer)

event = { title: "Conference", date: new Date(), domElement: document.body }

JSON.stringify(event, function(key, value) { return value.nodeName ? undefined : value})

=> {"title":"Conference","date":"2011-02-15T09:44:13.419Z"}

Page 27: EcmaScript 5.1

JSON.parse(str)

str = '{"title":"Conference", \ "date":"2011-02-15T09:44:13.419Z"}'

event = JSON.parse(str)

пробелы

Page 28: EcmaScript 5.1

JSON.parse(str)

str = '{"title":"Conference", \ "date":"2011-02-15T09:44:13.419Z"}'

event = JSON.parse(str)

event.date.getDay()

=> TypeError: no method 'getDay'

Page 29: EcmaScript 5.1

JSON.parse(str, reviver)str = '{"title":"Conference", \ "date":"2011-02-15T09:44:13.419Z"}'

event = JSON.parse(str, function(key, value) { if (key == 'date') { return new Date(value) } return value})

event.date.getDay()

=> 2

Page 30: EcmaScript 5.1

bind

Page 31: EcmaScript 5.1

bind(this)function Button(elem) { this.sayHi = function() { alert('Hi') } elem.onclick = function() { this.sayHi() }.bind(this) }

Page 32: EcmaScript 5.1

bind(this, args)function Button(elem) { this.say = function(phrase) { alert(phrase) } elem.onclick = function(event, phrase) { this.say(phrase) }.bind(this, 'Hi') }

@see http://www.prototypejs.org/api/function/bind

Page 33: EcmaScript 5.1

Strict mode

Page 34: EcmaScript 5.1

"use strict"

... code ...

use strict

Page 35: EcmaScript 5.1

function F() { "use strict" this.method = function() { // strict mode inherited }}

use strict

Page 36: EcmaScript 5.1

alert(010) // SyntaxError (octal literals deprecated)

use strict

a = 5 // ReferenceError (undeclared a)

obj.notWritable = ... // TypeErrordelete obj.notConfigurable // TypeError

eval("var a = 5") alert(a) // ReferenceError (undeclared a)

arguments.callee // TypeErrorarguments.caller // TypeError

(function() { alert(this) // undefined вместо window})()

with(..) // SyntaxError, 'with' statement

Page 37: EcmaScript 5.1

Функции, которые давно ждалиObject.keys(obj)

"String".trim()

Array.isArray(arr)[...].indexOf / lastIndexOf[...].forEach[...].map[...].filter[...].reduce / reduceRight// ...

@see http://kangax.github.com/es5-compat-table/

Page 38: EcmaScript 5.1

The future is now ?

PrototypeJS

ES5-shim

Page 39: EcmaScript 5.1

Harmony

Page 40: EcmaScript 5.1

__noSuchMethod__ Proxy.create

let block_scoped = "yay!"

const REALLY = "srsly"

#(x) { x * x }

if x > z return "без скобок"

module Iter = "@std:Iteration"

return [i * i for i in range(n)]

function printf(format, ...args)ek_scoped = "yay!" consEALLY = "srsly"

It’s all real