Ecma script 6 in action
-
Upload
yuri-trukhin -
Category
Technology
-
view
171 -
download
3
description
Transcript of Ecma script 6 in action
EcmaScript 6 in actionЧто JS новый нам готовит
Юрий Трухин)cloud computing expert @infoboxcloud
[email protected] twitter.com/trukhinyuri
Обо мне• В InfoboxCloud с 2013 года
• Отвечаю за счастье гиков в облаках
• Думаю о будущем и воплощаю его
• Адвокат пользователей
• Пишу код и рассказываю об этом
Многое в вебе улучшалось в последнее время…
Многое в вебе улучшалось в последнее время…
но не основа EcmaScript
Наступает счастье EcmaScript 6
Наступает счастье EcmaScript 6релиз стандарта запланирован на конец 2014
Что такое Harmony?Набор идей, не вошедших в EcmaScript 5 (3.1)
Цель:сложные приложения
переход к тестируемой спецификации
адаптация стандартов дефакто где возможно
сохранение версионирования простым
поддержка статической типизации где необходимо
библиотеки
кодогенераторы
Предложенияулучшения функций
генераторы и итераторы
модульность
улучшения api
полная поддержка UTF-16
scoping binding, callingколлекции
arrow functions =>Стрелочные функции обеспечивают лексическое связывание. this, super и arguments определяются не тем, как функции были вызваны, а тем - как были созданы. !this, super и arguments не изменяются на протяжении всего цикла жизни функции. !Стрелочные функции не могут быть использованы как конструктор - при использовании new будет ошибка. !Собственное значение arguments недоступно.
arrow functions =>var fun = (x) => x;
Синтаксис
Объявление всегда начинается со списка аргументов, далее стрелка и тело функции.1 параметрvar result = value => value; var result = function (value) { return value; };Скобки не обязательны. В теле функции фигурные скобки и return не обязательны.несколько параметровvar sum = (arg1, arg2) => arg1 + arg2; var sum = function (arg1, arg2) { return arg1 + arg2; };
arrow functions =>Синтаксис
без парамеровvar sum = () => 1 + 2; var sum = function () { return 1 + 2; };
Если тело функции содержит более одного выражения - нужно использовать.
традиционный синтаксисvar sum = (arg1, arg2) => { return arg1 + arg2; }; var sum = function (arg1, arg2) { return 1 + 2; };
arrow functions =>
var item = id => ({ id: id, name: “Name”}); var item = function(id) {return {id: id, name: “Name”} };
Если тело функции не содержит фигурных скобок и просто возвращает литерал объекта - должно быть в круглых скобках.
переменное число параметров
var item = (…rest) => rest; var item = function () { return [].slice.apply(arguments) };
литерал объекта
используем rest паттерн из шаблонов деструктуризации
для любых шаблонов деструктуризации как единственного параметра функции наличие круглых скобок обязательно
Function to String conversion
Если вызван Function.prototype.toString.call(fn), to eval по результату должен вызвать ту же функцию в том же лексическом контексте: !- должны сработать биндинги к переменным в этом scope !- если исполняется внутри use strict; – может быть нарушена строгость оригинального контекста.
Function Name property
У каждой функции есть свойство name типа String.
Автоматически выводит имена для синтезированных функций (get, set, bind).
Позволяет штатно изменять имя функции.
Свойство name не поменяет Function.prototype.toString();
Block scoping bindings
let, const, block functions разрешаются для всей программы, тела функции или блока. Разница с ES5 Strict mode – не позволял определение в блоке.
let – новый var, но с block scopeconst – неизменяемый letblock functions – функции в let
DestructingПозволяет деструктурировать данные при присваивании.
Перемена мест[a, b] = [b, a]
function f() { return [1,2]; } var a,b; [a, b] = f();
Действует только слева от =.
Возврат нескольких значений из функции
Игнорирование некоторых значений при возвратеfunction f() { return [1,2,3]; } var [a, , b] = f();
DestructingПогружение в массив[a,,[b,,[c]]] = f();Деструктуризация объектаvar {op: a, lhs: b, rhs: c} = getASTNode();Погружение в объектvar {op: a, lhs: {op: b}, rhs: c} = getASTNode();Цикл по объектуfor (let [name, value] in obj) print (name, value);Цикл по значениям в объектеfor each ( let { name: n, family: {father: f} } in obj) print (n, f)
DestructingПогружение в массив[a,,[b,,[c]]] = f();Деструктуризация объектаvar {op: a, lhs: b, rhs: c} = getASTNode();Погружение в объектvar {op: a, lhs: {op: b}, rhs: c} = getASTNode();Цикл по объектуfor (let [name, value] in obj) print (name, value);Цикл по значениям в объектеfor each ( let { name: n, family: {father: f} } in obj) print (n, f)
Destructing refutable patterns
Несоответствие паттерну вызывает исключениеlet ?[x, y, z] = [1, 2] //x =1, y = 2, z = undefined
let {?a: x} = {} // x = undefinedlet {a: x} = {} // throw
Parameter default values
Возможность использования опциональных параметров без проверки их задания.
function add (x = 0, y = 0) { return x + y; };
Rest parameters
Возможность передавать различное количество параметров, позволяя определять устаревшие и т.д.
function simpleApply (func, …args) { return func.apply(undefined, args); };
Rest parameters
Возможность передавать различное количество параметров, позволяя определять устаревшие и т.д.
function simpleApply (func, …args) { return func.apply(undefined, args); };
Direct Proxies
Конструирование proxy объекта:var proxy = Proxy(target, handler);target и handler – Objects.
Объект, для которого разработчик должен определить свое поведение.
var p = Proxy.create({ get: function (proxy, name) { return “Hello”, name; } }); document.write (p.World);
handler – обработчик мета уровня. name – прототип прокси-объекта.
Proxy.createFunction (handler, call, construct);
Generators: yieldВычисляют следующее значение функции только при обращении к нему.
Бесконечные потоки
function* fibonacci () { var a = 0, b = 1, c = 0; while (true) { yield a; c = a; a = b; b = c + b; } } !function run() { var seq = fibonacci(); console.log(seq.next().value); //0 console.log(seq.next().value); //1 }
Modulesmodule A { export function fa() {…} export function fb(i) {…} } !A.fa(); import A.*; fb(5); !Возможность разработки изолированных модулей. Поддерживается загрузка из внешнего пути. Финальная семантика еще не определена.
Это далеко не все, что войдет в EcmaScript 6, но готовиться нужно уже сейчас!
Вопросы?Проверить поддержку EcmaScript 6:
http://kangax.github.io/es5-compat-table/es6/
Google Traceur Compiler https://github.com/google/traceur-compiler
[email protected] Пишите мне по любым вопросам!