ECMAScript 5 Features

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

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

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

var x = 9;
var module = {
x: 81,

getX.call(module, arg1, arg2)

2. Apply

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

3. Замыкания

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

};

Замыкания
var module = function(){
var x = 81;
return {
getX: function(){return x;}
}
}();
getX(); // 81

ES 5-way
var 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. Что нового?
[].

indexOf
lastIndexOf
every
some
forEach

map
filter
reduce
reduceRight

Методы в Array
•
•
•
•

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

Эмуляция ES5
•
•
•
•

ES5-shims
Underscore
Lo-Dash
…

ФП. Что мы умеем
• Генерирование списков
• Обработка списков
(Фибоначчи, проверка на простоту,
список простых чисел, факторал, поиск)

Генерирование
последовательностей
>
Array(2)
Array(2).map((x, i) => i)
Array.apply(0, Array(2))
// @see 15.3.4.3
Array.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 })


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

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)

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

ECMAScript 5 Features

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to ECMAScript 5 Features (20)

ECMAScript 5 Features