ECMAScript 5 Features

13,336 views

Published on

Поддержка в браузерах, способы эмуляции, новые возможности. Про все это и многое другое в деталях

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
13,336
On SlideShare
0
From Embeds
0
Number of Embeds
12,346
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ECMAScript 5 Features

  1. 1. Бирюков Павел, фронтэнд разработчик в Артезио ES 5 Можно, пацаны!
  2. 2. EC5 в браузерах
  3. 3. EC5 в браузерах
  4. 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. 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. 6. Замыкания var module = function(){ var x = 81; return { getX: function(){return x;} } }(); var getX = module.getX; getX(); // 81
  7. 7. ES 5-way var x = 9; var module = { x: 81, getX: function() { return this.x; } }; var getX = module.getX.bind(module); Почему мы так не делаем?
  8. 8. ES5. Что нового? Работа со свойствами Object.create Object.keys Object.seal Object.freeze Function.bind Strict mode Getter, Setter Immutable undefined Object.getPrototypeOf JSON
  9. 9. ES5. Что нового? []. indexOf lastIndexOf every some forEach map filter reduce reduceRight
  10. 10. Методы в Array • • • • Новые Красивые Быстрые В прототипе
  11. 11. Эмуляция ES5 • • • • ES5-shims Underscore Lo-Dash …
  12. 12. ФП. Что мы умеем • Генерирование списков • Обработка списков (Фибоначчи, проверка на простоту, список простых чисел, факторал, поиск)
  13. 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. 14. Генерирование [0...n] Array .apply(0, {length: 10}) .map(function(v, i){ return i })
  15. 15. Генерирование [0...n] Всегда есть способ лучше
  16. 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. 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. 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. 19. Факториал! function factorial(n) { return Array.apply(0, Array(n)) .reduce(function(x, y, z) { return x*(z+1) }, 1) }
  20. 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. 21. Зачем? • • • • Зачем я сюда пришел? Для чего это нужно? Сколько стоит? Стоит ли так ухищряться?
  22. 22. Спасибо за внимание --------Best regards, P. Birukov

×