EcmaScript 6 in actionЧто JS новый нам готовит

Юрий Трухин)cloud computing expert @infoboxcloud

trukhinyuri@infoboxcloud.com 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

trukhinyuri@infoboxcloud.com Пишите мне по любым вопросам!