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

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

2. EC5 в браузерах

3. EC5 в браузерах

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

5. Передача контекста
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 getX = module.getX;

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

7. ES 5-way
var x = 9;
var module = {
x: 81,
getX: function() { return this.x; }
};
var getX = module.getX.bind(module);
Почему мы так не делаем?

8. ES5. Что нового?
Работа со свойствами
Object.create Object.keys
Object.seal
Object.freeze
Function.bind
Strict mode
Getter, Setter Immutable undefined
Object.getPrototypeOf JSON

9. ES5. Что нового?
[].
indexOf
lastIndexOf
every
some
forEach
map
filter
reduce
reduceRight

10. Методы в Array
•
•
•
•
Новые
Красивые
Быстрые
В прототипе

11. Эмуляция ES5
•
•
•
•
ES5-shims
Underscore
Lo-Dash
…

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

13. Генерирование
последовательностей
>
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]

14. Генерирование [0...n]
Array
.apply(0, {length: 10})
.map(function(v, i){ return i })

15. Генерирование [0...n]
Всегда есть способ лучше

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

17. Генерирование [0...n]
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)

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

19. Факториал!
function factorial(n) {
return Array.apply(0, Array(n))
.reduce(function(x, y, z) { return x*(z+1) }, 1) }

20. Фибоначчи
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])
}, []);
}

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

22. Спасибо за внимание
--------Best regards,
P. Birukov