22
ES 5 Можно, пацаны! Бирюков Павел, фронтэнд разработчик в Артезио

ECMAScript 5 Features

Embed Size (px)

DESCRIPTION

Поддержка в браузерах, способы эмуляции, новые возможности. Про все это и многое другое в деталях Презентация подготовлена по материалам прошедшего 19 ноября витебского фронтенд-митапа: http://meetup.gorodvitebsk.by/.

Citation preview

Page 1: ECMAScript 5 Features

ES 5

Можно, пацаны!

Бирюков Павел,фронтэнд разработчик в Артезио

Page 2: ECMAScript 5 Features

EC5 в браузерах

Page 3: ECMAScript 5 Features

EC5 в браузерах

Page 4: ECMAScript 5 Features

Контекстыvar x = 9;

var module = {

x: 81,

getX: function() { return this.x; }

};

module.getX(); // 81

var getX = module.getX;

getX(); // 9; "this" refers to the global object

Page 5: ECMAScript 5 Features

Передача контекста

1. Call

2. Apply

3. Замыкания

var x = 9;

var module = {

x: 81,

getX: function() {

return this.x;

}

};

var getX = module.getX;

getX.call(module, arg1, arg2)

getX.apply(module, [arg1, arg2])

Page 6: ECMAScript 5 Features

Замыкания

var module = function(){

var x = 81;

return {

getX: function(){return x;}

}

}();

var getX = module.getX;

getX(); // 81

Page 7: ECMAScript 5 Features

ES 5-wayvar x = 9;

var module = {

x: 81,

getX: function() { return this.x; }

};

var getX = module.getX.bind(module);

Почему мы так не делаем?

Page 8: ECMAScript 5 Features

ES5. Что нового?

Работа со свойствамиObject.create Object.keys

Object.seal Object.freeze

Function.bind Strict mode

Getter, Setter Immutable undefined

Object.getPrototypeOf JSON

Page 9: ECMAScript 5 Features

ES5. Что нового?[].

indexOflastIndexOfeverysomeforEach

mapfilterreducereduceRight

Page 10: ECMAScript 5 Features

Методы в Array

• Новые• Красивые• Быстрые• В прототипе

Page 11: ECMAScript 5 Features

Эмуляция ES5

• ES5-shims• Underscore• Lo-Dash• …

Page 12: ECMAScript 5 Features

ФП. Что мы умеем

• Генерирование списков• Обработка списков

(Фибоначчи, проверка на простоту, список простых чисел, факторал, поиск)

Page 13: ECMAScript 5 Features

Генерирование последовательностей

>Array(2)Array(2).map((x, i) => i)Array.apply(0, Array(2))// @see 15.3.4.3Array.apply(0,{length:2})

...[undefined x 2][undefined x 2][undefined, undefined]

[undefined, undefined]

Page 14: ECMAScript 5 Features

Генерирование [0...n]

Array

.apply(0, {length: 10})

.map(function(v, i){ return i })

Page 15: ECMAScript 5 Features

Генерирование [0...n]

Всегда есть способ лучше

Page 16: ECMAScript 5 Features

Генерирование [0...n]

Array

.apply(0, {length: 10}) // Ok

.map(Function.call, Number)//o_0

Function.call в контексте Number, с аргументами (value, index, obj)Function.call.call(Number, v, i, o)

Page 17: ECMAScript 5 Features

Function.call.call(Number, v, i, o)

// global context

Function.call(v, i, o)

// context: Number, v: undefined

// @see 15.3.4.3, 15.3.4.4

Number.call(i, o)

Генерирование [0...n]

Page 18: ECMAScript 5 Features

Список простых чиселfunction primeList(N) {

return Array.apply(0, Array(N))

.map(function (x, y) { return y })

.filter(function (i) { return (i > 1) && Array.apply(0, Array(1 + ~~Math.sqrt(i)))

.every(function (x, y) { return (y < 2) || (i % y !== 0) });

});

}

Page 19: ECMAScript 5 Features

Факториал!function factorial(n) {

return Array.apply(0, Array(n))

.reduce(function(x, y, z) { return x*(z+1) }, 1) }

Page 20: ECMAScript 5 Features

Фибоначчиfunction fibo(n) {

return Array.apply(0, Array(n)

.reduce(function(x, y, z){

return x.concat((z < 2) ? z : x[z-1] + x[z-2])

}, []);

}

Page 21: ECMAScript 5 Features

Зачем?

• Зачем я сюда пришел?• Для чего это нужно?• Сколько стоит?• Стоит ли так ухищряться?

Page 22: ECMAScript 5 Features

Спасибо за внимание

---------Best regards,P. Birukov