ecmascript 5 features

Post on 24-Jun-2015

6.386 Views

Category:

Technology

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

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

TRANSCRIPT

ES 5

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

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

EC5 в браузерах

EC5 в браузерах

Контексты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

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

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])

Замыкания

var module = function(){

var x = 81;

return {

getX: function(){return x;}

}

}();

var getX = module.getX;

getX(); // 81

ES 5-wayvar x = 9;

var module = {

x: 81,

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

};

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

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

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

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

Object.seal Object.freeze

Function.bind Strict mode

Getter, Setter Immutable undefined

Object.getPrototypeOf JSON

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

indexOflastIndexOfeverysomeforEach

mapfilterreducereduceRight

Методы в Array

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

Эмуляция ES5

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

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

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

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

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

>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]

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

Array

.apply(0, {length: 10})

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

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

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

Генерирование [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)

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]

Список простых чисел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) });

});

}

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

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

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

Фибоначчи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])

}, []);

}

Зачем?

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

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

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

top related