Стрелочные функции. Как насчет аргументов

12 ответов

Что это

Это функция стрелки. Функции стрелок - это короткий синтаксис, введенный в ECMAscript 6, который можно использовать аналогично тому, как вы использовали бы выражения функций. Другими словами, вы часто можете использовать их вместо выражений, таких как function (foo) {...} . Но у них есть некоторые важные различия. Например, они не связывают свои собственные значения this (см. Обсуждение ниже).

Функции стрелок являются частью спецификации ECMAscript 6. Они еще не поддерживаются во всех браузерах, но частично или полностью поддерживаются в Node v. 4. 0+ и в большинстве современных браузеров, используемых по состоянию на 2018. (Ниже приведен частичный список поддерживаемых браузеров).

Из документации Mozilla:

Выражение функции со стрелкой (также известное как толстая функция со стрелкой) имеет более короткий синтаксис по сравнению с выражениями функций и лексически связывает значение this (не привязывает свое собственное this , arguments , super или new.target). Функции стрелок всегда анонимны. Эти функциональные выражения лучше всего подходят для функций, не относящихся к методам, и их нельзя использовать в качестве конструкторов.

Замечание о том, как this работает в функциях со стрелками

Одна из наиболее удобных функций функции со стрелкой скрыта в тексте выше:

Функция стрелки... лексически связывает значение this (не привязывает свое собственное this ...)

Проще говоря, это означает, что функция стрелки сохраняет значение this из своего контекста и не имеет своего собственного this . Традиционная функция может привязывать this значение самостоятельно, в зависимости от того, как она определена и вызвана. Это может потребовать много гимнастики, как self = this; и т.д., чтобы получить доступ или манипулировать this из одной функции внутри другой функции. Для получения дополнительной информации по этой теме см. Объяснение и примеры в документации Mozilla .

Пример кода

Пример (также из документов):

Var a = [ "We"re up all night "til the sun", "We"re up all night to get some", "We"re up all night for good fun", "We"re up all night to get lucky" ]; // These two assignments are equivalent: // Old-school: var a2 = a.map(function(s){ return s.length }); // ECMAscript 6 using arrow functions var a3 = a.map(s => s.length); // both a2 and a3 will be equal to

Примечания по совместимости

Вы можете использовать функции стрелок в Node, но поддержка браузера не совсем корректна.

Браузерная поддержка этой функциональности значительно улучшилась, но она все еще недостаточно распространена для большинства применений на основе браузера. По состоянию на 12 декабря 2017 года он поддерживается в текущих версиях:

Хром (против 45+)
Firefox (против 22+)
Край (против 12+)
Опера (ст. 32+)
Браузер Android (версия 47+)
Opera Mobile (версия 33+)
Chrome для Android (версия 47+)
Firefox для Android (версия 44+)
Сафари (версия 1 0+)
iOS Safari (версия 10. 2+)
Интернет Samsung (v. 5+)
Baidu Browser (v. 7. 12+)

Не поддерживается в:

IE (до ст. 11)
Opera Mini (до версии 8.0)
Blackberry Browser (до ст. 10)
IE Mobile (до версии 11)
UC Browser для Android (до версии 11.4)
QQ (до версии 1.2)

Вы можете найти более (и более актуальную) информацию на CanIUse.com (без принадлежности).

Это известно как функция стрелки, часть спецификации ECMAScript 2015 ...

var foo = ["a", "ab", "abc"]; var bar = foo.map(f => f.length); console.log(bar); // 1,2,3

Более короткий синтаксис, чем предыдущий:

// < ES6: var foo = ["a", "ab", "abc"]; var bar = foo.map(function(f) { return f.length; }); console.log(bar); // 1,2,3

Другая удивительная вещь лексическая this ... Обычно, вы делаете что-то вроде:

Но это можно переписать с помощью стрелки следующим образом:

Это будет "выражение функции стрелки", введенное в ECMAScript 6.

Для исторических целей (если страница wiki изменяется позже), это:

Выражение функции стрелки имеет более короткий синтаксис по сравнению с выражением функции и лексически связывает это значение. Функции стрелок всегда анонимны.

Также известен как Fat Arrow Functions . Это простой и понятный способ написания выражений функций, например, function() {} .

Стрелка Функции могут устранить необходимость function , return и {} при определении функций. Они являются однострочными, похожими на лямбда-выражения в Java или Python.

Пример без параметров

const queue = ["Dave", "Sarah", "Sharon"]; const nextCustomer = () => queue; console.log(nextCustomer()); // "Dave"

Если в одной и той же функции стрелки необходимо сделать несколько операторов, в этом примере необходимо заключить queue в фигурные скобки {} . В этом случае оператор возврата не может быть опущен.

Пример с 1 параметром

const queue = ["Dave", "Sarah", "Sharon"]; const addCustomer = name => { queue.push(name); }; addCustomer("Toby"); console.log(queue); // ["Dave", "Sarah", "Sharon", "Toby"]

Вы можете опустить {} из вышеперечисленного.

Когда есть единственный параметр, скобки () вокруг параметра могут быть опущены.

Пример с несколькими параметрами

const addNumbers = (x, y) => x + y console.log(addNumbers(1, 5)); // 6

Полезный пример const fruits = [ {name: "Apple", price: 2}, {name: "Bananna", price: 3}, {name: "Pear", price: 1} ];

Если бы мы хотели получить цену каждого фрукта в одном массиве, в ES5 мы могли бы сделать:

Fruits.map(function(fruit) { return fruit.price; }); //

В ES6 с новыми функциями стрелок мы можем сделать это более кратким:

Fruits.map(fruit => fruit.price); //

Дополнительную информацию о функциях со стрелками можно найти .

Совместимость браузера

IE: пока не поддерживается
Край: 12+ (Все версии)
Firefox: 22+
Хром: 45+
Сафари: 10+
iOS Safari: 10. 2+
Браузер Android: 56+

Дополнительную актуальную информацию о совместимости браузера можно найти

Как говорили другие, это новый синтаксис для создания функций.

Однако этот вид функций отличается от обычных:

Они связывают значение this . Как объясняется спецификация ,

Функция ArrowFunction не определяет локальные привязки для arguments , super , this или new.target . Любая ссылка на arguments , super , this или new.target в пределах функции ArrowFunction разрешите привязку в лексически окружении. типично это будет функциональная среда сразу же функция.

Даже если ArrowFunction может содержать ссылки на super , функциональный объект, созданный на этапе 4, не превращается в метод посредством выполнение MakeMethod . Функция ArrowFunction, которая ссылается на super всегда содержится внутри функции, не связанной с стрелкой, и необходимой для реализации super доступно через область, которая захваченный функциональным объектом функции ArrowFunction.

Они являются неконструкторами.

Это означает, что у них нет внутреннего метода [] и, следовательно, невозможно создать экземпляр, например
Var f = a => a; f(123); // 123 new f(); // TypeError: f is not a constructor

Добавление простого примера CRUD со стрелкой

//Arrow Function var customers = [ { name: "Dave", contact:"9192631770" }, { name: "Sarah", contact:"9192631770" }, { name: "Akhil", contact:"9928462656" }], // No Param READ getFirstCustomer = () => { console.log(this); return customers; }; console.log("First Customer "+JSON.stringify(getFirstCustomer())); // "Dave" //1 Param SEARCH getNthCustomer = index=>{ if(index>customers.length) { return "No such thing"; } else{ return customers; } }; console.log("Nth Customer is " +JSON.stringify(getNthCustomer(1))); //2params ADD addCustomer = (name, contact)=> customers.push({ "name": name, "contact":contact }); addCustomer("Hitesh","8888813275"); console.log("Added Customer "+JSON.stringify(customers)); //2 param UPDATE updateCustomerName = (index, newName)=>{customers.name= newName}; updateCustomerName(customers.length-1,"HiteshSahu"); console.log("Updated Customer "+JSON.stringify(customers)); //1 param DELETE removeCustomer = (customerToRemove) => customers.pop(customerToRemove); removeCustomer(getFirstCustomer()); console.log("Removed Customer "+JSON.stringify(customers));

Как и все остальные ответы, это часть синтаксиса функции ES2015. В частности, это не оператор, это токен-токен, который отделяет параметры от тела: ArrowFunction: ArrowParameters => ConciseBody . Например. (params) => { /* body */ } .

В javascript символ => является символом выражения функции стрелки. Выражение функции стрелки не имеет собственное this связывание и, следовательно, не может быть использовано в качестве функции конструктора. например:

Правила использования функций стрелок:

Если есть только один аргумент, вы можете опустить круглые скобки аргумента.
Если вы вернете выражение и сделаете это в той же строке, вы можете опустить {} и оператор return

Например:

let times2 = val => val * 2; // It is on the same line and returns an expression therefore the {} are ommited and the expression returns implictly // there also is only one argument, therefore the parentheses around the argument are omitted console.log(times2(3));

Недоволен другими ответами. Ответ с наибольшим количеством голосов на 2019/3/13 фактически неверен.

Короткий лаконичный вариант того, что => означает, что ярлык написание функции и для его связывания с током this

Const foo = a => a * 2;

Эффективно ярлык для

Const foo = function(a) { return a * 2; }.bind(this);

Вы можете увидеть все вещи, которые были сокращены. Нам не нужно ни function , ни return ни.bind(this) ни скобок или скобок

Немного более длинный пример функции со стрелкой может быть

Const foo = (width, height) => { const area = width * height; return area; };

Показано, что если нам нужно несколько аргументов функции, нам нужны круглые скобки, а если мы хотим написать больше, чем одно выражение, нам нужны фигурные скобки и явный return .

Важно понимать.bind часть и это большая тема. Это связано с тем, что this значит в JavaScript.

ВСЕ функции имеют неявный параметр с именем this . Как this установить при вызове функции, зависит от того, как эта функция вызывается.

принимать

Function foo() { console.log(this); }

Если вы называете это нормально

Function foo() { console.log(this); } foo();

this будет глобальный объект.

Если вы в строгом режиме

"use strict"; function foo() { console.log(this); } foo(); // or function foo() { "use strict"; console.log(this); } foo();

Будет undefined

Вы можете установить this непосредственно с помощью call или apply

Function foo(msg) { console.log(msg, this); } const obj1 = {abc: 123} const obj2 = {def: 456} foo.call(obj1, "hello"); // prints Hello {abc: 123} foo.apply(obj2, ["hi"]); // prints Hi {def: 456}

Вы также можете установить this неявно, используя оператор точки.

Function foo(msg) { console.log(msg, this); } const obj = { abc: 123, bar: foo, } obj.bar("Hola"); // prints Hola {abc:123, bar: f}

Проблема возникает, когда вы хотите использовать функцию в качестве обратного вызова или слушателя. Вы создаете класс и хотите назначить функцию в качестве обратного вызова, который обращается к экземпляру класса.

Class ShowName { constructor(name, elem) { this.name = name; elem.addEventListener("click", function() { console.log(this.name); // won"t work }); } }

Приведенный выше код не будет работать, потому что когда элемент вызывает событие и вызывает функцию, this значение не будет экземпляром класса.

Одним из распространенных способов решения этой проблемы является использование.bind

Class ShowName { constructor(name, elem) { this.name = name; elem.addEventListener("click", function() { console.log(this.name); }.bind(this); // { console.log(this.name); }); } }

bind эффективно делает новую функцию. Если бы bind не существовала, вы могли бы сделать свое собственное так

Function bind(funcitonToBind, valueToUseForThis) { return function(...args) { functionToBind.call(valueToUseForThis, ...args); }; }

В старом JavaScript без оператора распространения это было бы

Function bind(funcitonToBind, valueToUseForThis) { return function() { functionToBind.apply(valueToUseForThis, arguments); }; }

Понимание того, что код требует понимания замыканий, но короткая версия bind создает новую функцию, которая всегда вызывает исходную функцию с привязанным к ней значением this . Функция стрелки делает то же самое, так как они являются ярлыком для bind(this)

Стрелка функции, которая обозначается символом (=>), помогает вам создавать анонимные функции и методы. Это приводит к более короткому синтаксису. Например, ниже приведена простая функция "Добавить", которая возвращает сложение двух чисел.

Function Add(num1 , num2){ return num1 + num2; }

Вышеуказанная функция становится короче с использованием синтаксиса "Стрелка", как показано ниже.

Код выше состоит из двух частей, как показано на рисунке выше:

Ввод: - В этом разделе указываются входные параметры для анонимной функции.

Логика: - Этот раздел идет после символа "=>". Этот раздел имеет логику реальной функции.

Многие разработчики считают, что функция стрелки делает ваш синтаксис короче, проще и, следовательно, делает ваш код читабельным.

Если вы верите в приведенное выше предложение, то позвольте мне заверить вас, что это миф. Если вы на мгновение думаете, что правильно написанная функция с именем гораздо читабельнее, чем загадочные функции, созданные в одну строку с помощью символа стрелки.

Основное использование функции стрелки - убедиться, что код выполняется в контексте вызывающих.

Посмотрите код ниже, в котором определена глобальная переменная "context", эта глобальная переменная доступна внутри функции "SomeOtherMethod", которая вызывается из другого метода "SomeMethod".

Этот SomeMethod имеет локальную переменную context. Теперь, поскольку SomeOtherMethod вызывается из "SomeMethod", мы ожидаем, что он отображает "локальный контекст", но он отображает "глобальный контекст".

Var context = "global context"; function SomeOtherMethod(){ alert(this.context); } function SomeMethod(){ this.context = "local context"; SomeOtherMethod(); } var instance = new SomeMethod();

Но если заменить вызов с помощью функции стрелки, он будет отображать "локальный контекст".

Var context = "global context"; function SomeMethod(){ this.context = "local context"; SomeOtherMethod = () => { alert(this.context); } SomeOtherMethod(); } var instance = new SomeMethod();

Я бы посоветовал вам прочитать эту ссылку (функция Arrow в JavaScript), которая объясняет все сценарии контекста javascript и в каких случаях контекст вызывающего не соблюдается.

Вы также можете увидеть демонстрацию функции Arrow с javascript в этом видео на YouTube, которое демонстрирует практически термин Context.

Перевод

“Толстые” стрелочные функции (=>), так же известные, как arrow функции – абсолютно новая функциональность в ECMAScript 2015 (ранее известном под именем ES6). Если верить слухам, то в ECMAScript 2015 => синтаксис стал использоваться вместо –> синтаксиса под влиянием CoffeeScript . Так же, не последнюю роль сыграла похожесть передачи контекста this.

У стрелочных функций есть две главные задачи: обеспечить более лаконичный синтаксис; обеспечить передачу лексического this с родительским scope. Давайте детально рассмотрим каждую из них!

Новый синтаксис функций Классический синтаксис функций в JavaScript отличается ригидностью, будь это функция с одной переменной или страница с множеством функций. При каждом объявлении функци, вам необходимо писать function () {}. Потребность в более лаконичном синтаксисе функций была одной из причин, почему в свое время CoffeeScript стал очень популярен. Эта потребность особенно очевидна в случае с небольшими callback функциями. Давайте просто взглянем на цепочку Promise:
function getVerifiedToken(selector) { return getUsers(selector) .then(function (users) { return users; }) .then(verifyUser) .then(function (user, verifiedToken) { return verifiedToken; }) .catch(function (err) { log(err.stack); }); }
Вверху вы видите более или менее удобоваримый код, написанный с использованием классического синтаксиса function в JavaScript. А вот так выглядит тот же самый код, переписанный с использованием стрелочного синтаксиса:
function getVerifiedToken(selector) { return getUsers(selector) .then(users => users) .then(verifyUser) .then((user, verifiedToken) => verifiedToken) .catch(err => log(err.stack)); }
Здесь надо обратить внимание на несколько важных моментов:

Мы потеряли function и {}, потому что наши callback функции записываются в одну строку.
Мы убрали (). Теперь они не обертывают список аргументов, когда присутствует только один аргумент (остальные аргументы проходят как исключения; например, (...args) => ...).
Мы избавились от ключевого слова return. Убирая {}, мы позволяем однострочным стрелочным функциям провести неявный возврат (в других языках такие функции часто называют лямбда функциями).

Еще раз обратим внимание на последний пункт. Неявный возврат происходит только в случае с однострочными стрелочными функциями. Когда стрелочная функция определяется с {}, даже если она является отдельным оператором, неявный возврат не происходит.
const getVerifiedToken = selector => { return getUsers() .then(users => users) .then(verifyUser) .then((user, verifiedToken) => verifiedToken) .catch(err => log(err.stack)); }
Здесь начинается самое интересное. Так как у нашей функции есть только один оператор, мы можем убрать {}, и код будет очень похож на синтаксис CoffeeScript :
const getVerifiedToken = selector => getUsers() .then(users => users) .then(verifyUser) .then((user, verifiedToken) => verifiedToken) .catch(err => log(err.stack));
И все же код выше написан с использованием синтаксиса ES2015. (Я тоже удивился, что он прекрасно скомпилировался .) Когда мы говорим о стрелочных функциях с одним оператором, это не значит, что оператор не может занимать больше одной строки, для удобства использования.

Есть, однако, один существенный минус: убрав {} из стрелочных функций, как мы можем возвратить пустой объект? Например, тот же {}?
const emptyObject = () => {}; emptyObject(); // ?
А вот как выглядит весь код вместе:
function () { return 1; } () => { return 1; } () => 1 function (a) { return a * 2; } (a) => { return a * 2; } (a) => a * 2 a => a * 2 function (a, b) { return a * b; } (a, b) => { return a * b; } (a, b) => a * b function () { return arguments; } (...args) => args () => {} // undefined () => ({}) // {}

Лексический this История о том, как this пытались протащить в JavaScript, уже покрылась пылью. Каждая function в JavaScript задает свой собственный контекст для this. Этот контекст, с одной стороны, очень легко обойти, а, с другой стороны, он крайне раздражает. На примере ниже вы видите код для часов, которые обновляют данные каждую секунду, обращаясь к jQuery:
$(".current-time").each(function () { setInterval(function () { $(this).text(Date.now()); }, 1000); });
При попытке сослаться на this DOM элемента, заданный через each в callback’е setInterval, мы, к сожалению, получаем совсем другой this, – тот, который принадлежит callback. Обойти этот момент можно, задав переменную that или self:
$(".current-time").each(function () { var self = this; setInterval(function () { $(self).text(Date.now()); }, 1000); });
“Толстые” стрелочные функции могут помочь решить эту проблему, так как они не имеют this:
$(".current-time").each(function () { setInterval(() => $(this).text(Date.now()), 1000); }); Как насчет аргументов? Одним из минусов стрелочных функций является то, что у них нет собственной переменной arguments, как у обычных функций:
function log(msg) { const print = () => console.log(arguments); print(`LOG: ${msg}`); } log("hello"); // hello
Повторимся, что у стрелочных функций нет this и нет arguments. Однако, приняв это во внимание, вы все же можете получить аргументы, переданные в стрелочные функции с помощью rest-параметров (так же известны, как spread операторы):
function log(msg) { const print = (...args) => console.log(args); print(`LOG: ${msg}`); } log("hello"); // LOG: hello Как насчет генераторов? “Толстые” стрелочные функции не могут использоваться как генераторы. Никаких исключений и обходных путей нет. Точка.Вывод “Толстые” стрелочные функции – одна из причин, почему я так люблю JavaScript. Очень соблазнительно просто начать использовать => вместо function. Я видел целые библиотеки, где используется только вариант =>. Не думаю, однако, что это разумно. В конце концов, у => есть много особенностей и скрытых функций. Я рекомендую использовать стрелочные функции только там, где вам нужна новая функциональность:

Функции с одиночными операторами, которые сразу же делают возврат;
функции, которые должны работать с this с родительским scope.

ES6 сегодня Так можно ли воспользоваться возможностями ES6 уже сегодня? Использование транспайлеров стало нормой в последние несколько лет. Ни простые разработчики, ни крупные компании не стесняются их применять.

О ключевом слове «this» языка JavaScript: особенности использования с пояснениями

Тайна this

Долгое время ключевое слово this оставалось для меня загадкой. Это мощный инструмент, но разобраться в нём нелегко.

С точки зрения Java, PHP или любого другого обычного языка this расценивается как экземпляр текущего объекта в методе класса, не больше и не меньше. Чаще всего его нельзя использовать вне метода, и этот подход не вызывает непонимания.

В JavaScript this - это текущий контекст исполнения функции. Поскольку функцию можно вызвать четырьмя способами:

вызов функции: alert("Hello World!") ,
вызов метода: console.log("Hello World!") ,
вызов конструктора: new RegExp("\\d") ,
непрямой вызов: alert.call(undefined, "Hello World!") ,

и каждый из них определяет свой контекст, поведение this слегка не соответствует ожиданиям начинающих разработчиков. Кроме того, strict mode также влияет на контекст исполнения.

Ключом к пониманию ключевого слова this является осознание принципов вызова функции и его влияния на контекст. В этой статье рассказывается про вызовы функций, влияние вызовов на this и типичные ловушки при идентификации контекста.

Прежде чем мы начнём, давайте познакомимся с несколькими терминами:

Вызов - это исполнение кода тела функции. Например, вызовом функции parseInt будет parseInt("15") .
Контекстом вызова является значение this в теле функции.
Область видимости функции - это набор переменных, объектов и функций, к которым можно получить доступ из тела функции.

2.1.
2.2.
2.3.

3.1.
3.2.

4.1.
4.2.

5.1.

С
6.1.

7.1.
7.2.

Вызов функции

Вызов функции совершается, когда за выражением, являющимся объектом функции, следуют открывающая скобка (, разделённый запятыми список аргументов и закрывающая скобка) , например, parseInt("18") . Выражение не может быть аксессором myObject.myFunction , который совершает вызов метода. Например, .join(",") - это вызов не функции, а метода.

Простой пример вызова функции:

Function hello(name) { return "Hello " + name + "!"; } // Function invocation var message = hello("World"); console.log(message); // => "Hello World!"

hello("World") - это вызов функции: hello расценивается как объект функции, за которым в скобках следует аргумент "World" .

Var message = (function(name) { return "Hello " + name + "!"; })("World"); console.log(message); // => "Hello World!"

Это тоже вызов функции: первая пара скобок (function(name) {...}) расценивается как объект функции, за которым в скобках следует аргумент: ("World") .

this при вызове функции

this - это глобальный объект при вызове функции

Глобальный объект определяется средой исполнения. В веб-браузере это объект window .

В вызове функции контекстом исполнения является глобальный объект. Давайте проверим контекст следующей функции:

Function sum(a, b) { console.log(this === window); // => true this.myNumber = 20; // add "myNumber" property to global object return a + b; } // sum() is invoked as a function // this in sum() is a global object (window) console.log(sum(15, 16)); // => 31 console.log(window.myNumber); // => 20

Когда вызывается sum(15, 16) , JavaScript автоматически инициализирует this как глобальный объект, являющийся window в браузере.

Когда this используется вне области видимости какой-либо функции (самая внешняя область видимости: контекст глобального исполнения), он также относится к глобальному объекту:

Console.log(this === window); // => true this.myString = "Hello World!"; console.log(window.myString); // => "Hello World!" console.log(this === window); // => true

this при вызове функции в strict mode

this принимает значение undefined при вызове функции в strict mode

/* jshint esnext: true */ class City { constructor(name, traveled) { this.name = name; this.traveled = false; } travel() { this.traveled = true; } } // Constructor invocation var paris = new City("Paris", false); paris.travel();

new City("Paris") - это вызов конструктора. Инициализация объекта управляется специальным методом класса: constructor , this которого является только что созданным объектом.

Вызов конструктора создаёт новый пустой объект, наследующий свойства от прототипа конструктора. Ролью функции-конструктора является инициализация объекта. Как вы уже знаете, контекст этого типа вызова называется экземпляром. Это - тема следующей главы.

Когда перед аксессором myObject.myFunction идёт ключевое слово new , JavaScript совершит вызов конструктора, а не метода. Возьмём в качестве примера new myObject.myFunction() : сперва при помощи аксессора extractedFunction = myObject.myFunction функция извлекается, а затем вызывается как конструктор для создания нового объекта: new extractedFunction() .

this в вызове конструктора

this - это только что созданный объект

Контекстом вызова конструктора является только что созданный объект. Он используется для инициализации объекта данными из аргументом функции-конструктора.

Давайте проверим контекст в следующем примере:

Function Foo () { console.log(this instanceof Foo); // => true this.property = "Default Value"; } // Constructor invocation var fooInstance = new Foo(); console.log(fooInstance.property); // => "Default Value"

new Foo() делает вызов конструктора с контекстом fooInstance . Объект инициализируется внутри Foo: this.property задаётся значением по умолчанию.

Тоже самое происходит при использовании class , только инициализация происходит в методе constructor:

/* jshint esnext: true */ class Bar { constructor() { console.log(this instanceof Bar); // => true this.property = "Default Value"; } } // Constructor invocation var barInstance = new Bar(); console.log(barInstance.property); // => "Default Value"

Когда исполняется new Bar() , JavaScript создаёт пустой объект и делает его контекстом метода constructor . Теперь вы можете добавлять свойства, используя this: this.property = "Default Value" .

Ловушка: как не забыть про new

Некоторые функции JavaScript создают экземпляры при вызове не только в качестве конструктора, но и функции. Например, RegExp:

Var reg1 = new RegExp("\\w+"); var reg2 = RegExp("\\w+"); console.log(reg1 instanceof RegExp); // => true console.log(reg2 instanceof RegExp); // => true console.log(reg1.source === reg2.source); // => true

При исполнении new RegExp("\\w+") и RegExp("\\w+") JavaScript создаёт эквивалентные объекты регулярных выражений.

Использование вызова функции для создания объектом потенциально опасно (если опустить фабричный метод), потому что некоторые конструкторы могут не инициализировать объект при отсутствии ключевого слова new .

Следующий пример иллюстрирует проблему:

Function Vehicle(type, wheelsCount) { this.type = type; this.wheelsCount = wheelsCount; return this; } // Function invocation var car = Vehicle("Car", 4); console.log(car.type); // => "Car" console.log(car.wheelsCount); // => 4 console.log(car === window); // => true

Vehicle - это функция, задающая свойства type и wheelsCount объекту-контексту. При исполнении Vehicle("Car", 4) возвращается объект car , обладающий корректными свойствами: car.type равен "Car" а car.wheelsCount - 4 . Легко подумать, что всё работает как надо.

Тем не менее, this - это объект window при вызове функции, и Vehicle("Car", 4) задаёт свойства объекта window - упс, что-то пошло не так. Новый объект не создан.

Обязательно используйте оператор new , когда ожидается вызов конструктора:

Function Vehicle(type, wheelsCount) { if (!(this instanceof Vehicle)) { throw Error("Error: Incorrect invocation"); } this.type = type; this.wheelsCount = wheelsCount; return this; } // Constructor invocation var car = new Vehicle("Car", 4); console.log(car.type); // => "Car" console.log(car.wheelsCount); // => 4 console.log(car instanceof Vehicle); // => true // Function invocation. Generates an error. var brokenCar = Vehicle("Broken Car", 3);

new Vehicle("Car", 4) работает верно: новый объект создан и инициализирован, поскольку присутствует слово new .

В вызове функции добавлена верификация: this instanceof Vehicle , чтобы убедиться, что у контекста исполнения верный тип объекта. Если this - не Vehicle , генерируется ошибка. Таким образом, если исполняется Vehicle("Broken Car", 3) (без new), то выбрасывается исключение: Error: Incorrect invocation .

Непрямой вызов

Непрямой вызов производится, когда функция вызывается методами.call() или.apply() .

/* jshint esnext: true */ var sumArguments = (...args) => { console.log(typeof arguments); // => "undefined" return args.reduce((result, item) => result + item); }; console.log(sumArguments.name); // => "" console.log(sumArguments(5, 5, 6)); // => 16

this в стрелочной функции

this - это контекст, в котором определена стрелочная функция

Стрелочная функция не создаёт свой контекст исполнения, а заимствует this из внешней функции, в которой она определена.

Следующий пример показывает прозрачность контекста:

/* jshint esnext: true */ class Point { constructor(x, y) { this.x = x; this.y = y; } log() { console.log(this === myPoint); setTimeout(()=> { console.log(this === myPoint); // => true console.log(this.x + ":" + this.y); // => "95:165" }, 1000); } } var myPoint = new Point(95, 165); myPoint.log();

setTimeout вызывает стрелочную функцию в том же контексте (метод myPoint), что и метод log() . Как мы видим, стрелочная функция «наследует» контекст той функции, в которой определена.

Если попробовать использовать в этом примере обычную функцию, она создаст свой контекст (window или undefined). Поэтому для того, чтобы код работал корректно, нужно вручную привязать контекст: setTimeout(function() {...}.bind(this)) . Это громоздко, поэтому проще использовать стрелочную функцию.

Если стрелочная функция определена вне всех функций, её контекст - глобальный объект:

/* jshint esnext: true */ var getContext = () => { console.log(this === window); // => true return this; }; console.log(getContext() === window); // => true

Стрелочная функция связывается с лексическим контекстом раз и навсегда . this нельзя изменить даже при помощи метод смены контекста:

/* jshint esnext: true */ var numbers = ; (function() { var get = () => { return this; }; console.log(this === numbers); // => true console.log(get()); // => // Use arrow function with .apply() and .call() console.log(get.call()); // => console.log(get.apply()); // => // Bind console.log(get.bind()()); // => }).call(numbers);

Функция, вызываемая непрямым образом с использованием.call(numbers) , задаёт this значение numbers . Стрелочная функция get также получает numbers в качестве this , поскольку принимает контекст лексически. Неважно, как вызывается get , её контекстом всегда будет numbers . Непрямой вызов с другим контекстом (используя.call() или.apply()), повторное связывание (с использованием.bind()) не принесут эффекта.

Стрелочную функцию нельзя использовать в качестве конструктора. Если вызвать new get() , JavaScript выбросит ошибку: TypeError: get is not a constructor .

Ловушка: определение метода стрелочной функцией

Вы можете захотеть использовать стрелочную функцию для объявления метода. Справедливо: их объявления гораздо короче по сравнению с обычным выражением: (param) => {...} вместо function(param) {..} .

В этом примере демонстрируется определение метода format() класса Period с использованием стрелочной функции:

/* jshint esnext: true */ function Period (hours, minutes) { this.hours = hours; this.minutes = minutes; } Period.prototype.format = () => { console.log(this === window); // =>

Так как format - стрелочная функция, определённая в глобальном контексте, её this - это объект window . Даже если format исполняется в качестве метода объекта walkPeriod.format() , window остаётся контекстом вызова. Так происходит, потому что стрелочная функция имеет статический контекст, не изменяемый другими типами вызовов.

this - это window , поэтому this.hours и this.minutes становятся undefined . Метод возвращает строку "undefined hours and undefined minutes" , что не является желаемым результатом.

Функциональное выражение решает проблему, поскольку обычная функция изменяет свой контекст в зависимости от вызова:

Function Period (hours, minutes) { this.hours = hours; this.minutes = minutes; } Period.prototype.format = function() { console.log(this === walkPeriod); // => true return this.hours + " hours and " + this.minutes + " minutes"; }; var walkPeriod = new Period(2, 30); console.log(walkPeriod.format());

walkPeriod.format() - это вызов метода с контекстом walkPeriod . this.hours принимает значение 2 , а this.minutes - 30 , поэтому метод возвращает корректный результат: "2 hours and 30 minutes" .

Заключение

Поскольку вызов функции имеет наибольшее влияние на this , отныне не спрашивайте :

Откуда берется this ?

а спрашивайте :

Как функция вызывается?

А в случае со стрелочной функцией спросите:

Каков this там, где объявлена стрелочная функция?

Такой подход к this убережет вас от лишней головной боли.

Не путайтесь в контекстах! 🙂

Tutorial

Одной из самых интересных частей нового стандарта ECMAScript 6 являются стрелочные функции. Стрелочные функции, как и понятно из названия определяются новым синтаксисом, который использует стрелку => . Однако, помимо отличного синтаксиса, стрелочные функции отличаются от традиционных функций и в других моментах:

Лексическое связывание. Значения специальных переменных this , super и arguments определяются не тем, как стрелочные функции были вызваны, а тем, как они были созданы.
Неизменяемые this , super и arguments . Значения этих переменных внутри стрелочных функций остаются неизменными на протяжении всего жизненного цикла функции.
Стрелочные функции не могут быть использованы как конструктор и кидают ошибку при использовании с оператором new .
Недоступность «собственного» значения переменной arguments .

Было несколько причин для введения этих отличий. Первоочередная - это то, что связывание (binding) используется довольно часто в JavaScript. Очень легко потерять нужное значение this при использовании традиционных функций, что может привести к непредсказуемым последствиям. Другая причина, это то, что JS-движки смогут легко оптимизировать выполнение стрелочных функций за счет этих ограничений (в противоположность традиционным функциям, которые могут быть использованы в качестве конструктора и которые свободны для модификации специальных переменных ).

Примечание: Данная статья - это компиляция из вольного перевода статьи Understanding ECMAScript 6 arrow functions и чтения последнего черновика спецификации (January 20, 2014 Draft Rev 22).

Синтаксис В общем случае, синтаксис стрелочных функций выглядит так:

Var fun = (x) => x;
Он очень похож на аналогичный синтаксис в таких языках как Scala, CoffeeScript и на синтаксис lambda-выражений из C#.

Синтаксис стрелочных функций может быть различен, в зависимости от того, как вы объявляете функцию. Объявление всегда начинается со списка аргументов, далее следует стрелка и тело функции. И список аргументов, и тело функции могут иметь различную форму, в зависимости от того, что вы пишете.

Один параметр Объявление стрелочной функции, которая принимает один аргумент и просто возвращает его, выглядит очень просто:

Var reflect = value => value; // эквивалент var reflect = function(value) { return value; }
Когда у стрелочной функции только один аргумент, то он может быть объявлен без скобок. Следующее после стрелки тело функции также может быть без фигурных скобок и может не содержать ключевого слова return .

Несколько параметров Но если вы хотите объявить более одного параметра, то должны обрамить список параметров в круглые скобки:

Var sum = (num1, num2) => num1 + num2; // эквивалент var sum = function(num1, num2) { return num1 + num2; };
Функция sum просто суммирует два аргумента. Единственное отличие от предыдущего примера в наличии круглых скобок и запятой (прямо как в традиционных функциях).

Без параметров Аналогично, функция безо всяких аргументов, должна иметь пустой список параметров, заключённый в круглые скобки:

Var sum = () => 1 + 2; // эквивалент var sum = function() { return 1 + 2; };

Традиционный синтаксис тела функции Вы можете воспользоваться синтаксисом традиционных функций для тела стрелочной функции, когда оно содержит более одного выражения. То есть обернуть функцию в фигурные скобки и добавить ключевое слово return :

Var sum = (num1, num2) => { return num1 + num2; } // эквивалент var sum = function(num1, num2) { return num1 + num2; };
Тело функции будет обработано точно так же, как и в случае классических функций, за исключением того, что значения специальных переменных this , super и arguments будут вычисляться по-другому.

Литерал объекта Отдельно надо упомянуть, что тело функции которое не содержит фигурных скобок и просто возвращает литерал объекта, должно быть забрано в круглые скобки:

Var getTempItem = id => ({ id: id, name: "Temp" }); // эквивалент var getTempItem = function(id) { return { id: id, name: "Temp" } };
Помещение литерала объекта в круглые скобки указывает парсеру, что фигурные скобки это не начало традиционного синтаксиса для тела функции, а начало литерала.

Переменное число параметров Так как «собственный» объект arguments не доступен внутри стрелочной функции (значение arguments лексически связано со значением arguments традиционной функции, внутри которой стрелочная функция была объявлена), то для стрелочных функций с переменным числом параметров нужно использовать rest -паттерн из шаблонов деструктуризации . Пример:

Var getTempItems = (...rest) => rest; // эквивалент var getTempItems = function() { return .slice.apply(arguments) };

Шаблон деструктуризации в качестве параметраВ рамках данной статьи мы не рассматриваем шаблоны деструктуризации - вы можете почитать про них в статье Обзор ECMAScript 6, следующей версии JavaScript , хотя эта информация частично устарела.

Как видно из предыдущего примера, несмотря на то, что у стрелочной функции всего один аргумент, всё равно необходимо применять круглые скобки при использовании шаблонов деструктуризации как единственного параметра функции. Примеры с другими шаблонами :

Var a = ({a}) => a; var b = ([b]) => b;

Использование стрелочных функций Установка контекста Одним из частых сценариев в JavaScript является установка правильного значения this внутри функции (связывание). Поскольку значение this может быть изменено, то, в зависимости от контекста исполнения функции, возможно ошибочно воздействовать на один объект, когда вы имели ввиду совершенно другой. Посмотрите на следующий пример:

Var pageHandler = { id: "123456" , init: function() { document.addEventListener("click", function(event) { this.doSomething(event.type); // ошибка }); } , doSomething: function(type) { console.log("Handling " + type + " for " + this.id) } };
В приведённом коде объект pageHandler должен обрабатывать клики на странице. Метод init() навешивает обработчик на нужное событие, который внутри себя вызывает this.doSomething() . Однако код отработает неправильно. Ссылка на this.doSomething() не валидна, поскольку this указывает на объект document внутри обработчика события вместо планируемого pageHandler . При попытке выполнить этот код, вы получите ошибку, поскольку объект document не имеет метода doSomething .

Вы можете завязать значение this на объекте pageHandler используя handleEvent или вызвав у функции стандартный метод bind() :

Var pageHandler = { id: "123456" , init: function() { document.addEventListener("click", (function(event) { this.doSomething(event.type); // error }).bind(this)); } , doSomething: function(type) { console.log("Handling " + type + " for " + this.id) } };
Теперь код работает так, как и задумывалось, но выглядит более громоздко. Кроме того, вызывая bind(this) вы каждый раз создаёте новую функцию, значение this которой завязано на значении pageHandler , но зато код работает так, как вы задумывали.

Стрелочные функции решают проблему более элегантным способом, поскольку используют лексическое связывание значения this (а также super и arguments ) и его значение определяется значением this в том месте, где стрелочная функция была создана. Например:

Var pageHandler = { id: "123456" , init: function() { document.addEventListener("click", event => this.doSomething(event.type)); } , doSomething: function(type) { console.log("Handling " + type + " for " + this.id) } };
В этом примере обработчик это стрелочная функция в которой вызывается this.doSomething() . Значение this будет тем же, что и в функции init() , и код в данном примере отработает правильно, аналогично тому, который использовал bind() . Вне зависимости от того, возвращает вызов this.doSomething() значение или нет, выражение внутри тела стрелочной функции не нужно обрамлять в фигурные скобки.

Кроме того, пример выше ещё и эффективнее вызова bind() , потому что для браузера он аналогичен следующему коду:

Var pageHandler = { id: "123456" , init: function() { var self = this; document.addEventListener("click", function(event) { return self.doSomething(event.type) }); } , doSomething: function(type) { console.log("Handling " + type + " for " + this.id) } };
То есть не происходит создание новой функции, как в случае с вызовом bind() .

«Прокидывание» контекста между несколькими вызовами Очевидно, что можно вкладывать одну стрелочную функцию в другую, тем самым «прокидывая» значение this через них:

Var obj = { arr1: , arr2: ["a", "b", "c"] , concatenate: function(a, b){ return a + "|" + b } , intersection: function() { return this.arr1.reduce((sum, v1) => // arrow function 1 this.arr2.reduce((sum, v2) => { // arrow function 2 sum.push(this.concatenate(v1, v2)) return sum; } , sum) , ) } }; var arrSum = obj.intersection();//["1|a", "1|b", "1|c", "2|a", "2|b", "2|c", "3|a", "3|b", "3|c"]

Использование в качестве аргумента Короткий синтаксис стрелочных функций делает их идеальными кандидатами на передачу в качестве аргументов в вызов других функций. Например, если вы хотите отсортировать массив, то обычно пишете что-то типа такого:

Var result = values.sort(function(a, b) { return a - b });
Довольно многословно для простой операции. Сравните с короткой записью стрелочной функции:

Var result = values.sort((a, b) => a - b);
Использование таких методов, как массивные sort() , map() , reduce() и так далее, может быть упрощено с использованием короткого синтаксиса стрелочной функции.

Другие особенности стрелочных функций Несмотря на то, что стрелочные функции отличаются от традиционных функций, у них есть общие черты:

Оператор typeof вернёт "function" для стрелочной функции
Стрелочная функция также экземпляр «класса» Function, поэтому instanceof сработает так же как, и с традиционной функцией
Вы всё ещё можете использовать методы call() , apply() , и bind() , однако помните, что они не будут влиять на значение this
Вы можете использовать метод toMethod() , однако он не будет менять значение super (метод toMethod() введён в es6 и не рассматривается в рамках данной статьи ).

Существенным отличием от традиционных функций является то, что попытка вызвать стрелочную функцию с указанием оператора new вызовет ошибку исполнения.Итог Стрелочные функции это одно из интереснейших нововведений в ECMAScript 6, которое, имея краткий синтаксис определения, упростит передачу функций в качестве значения параметра другой функции.

Лаконичный синтаксис позволит писать сложные вещи ещё сложнее проще. Например, так будет выглядеть генератор идентификаторов (который на es5 выглядит куда многословней):

Let idGen = (start = 0, id = start, reset = (newId = start) => id = newId, next = () => id++) => ({reset, next}); let gen = idGen(100); console.log(gen.next(), gen.next(), gen.reset(10), gen.next());//100 101 10 10
А лексическое связывание закроет один из самых больших источников боли и разочарования для разработчиков, а так же улучшит производительность за счёт оптимизации на уровне js-движка.

Если вы хотите попробовать стрелочные функции, то можете выполнить вышеуказанные примеры в консоли Firefox, который на данный момент (02.2014 FF28) почти полноценно поддерживает стрелочные функции (FF28 неправильно вычисляет значение arguments ).

Также вы можете попробовать стрелочные функции и другие возможности es6 в онлайн трансляторе Traceur .

Теги: Добавить метки

Всем привет! В этой статье мы рассмотрим, что такое стрелочные функции в ES6 и как их использовать .

Стрелочные функции – это функции, которые записываются при помощи оператора "стрелка"(=> ).

Давайте сразу рассмотрим пример:

Let add = (x, y) => x + y;
console.log(add(5, 2));

В результате выполнения данной функции в консоли мы увидим число 7.

Сначала, в круглых скобках мы передаем аргументы, далее ставим знак стрелочки, а потом пишем код самой функции. В нашем случае она просто принимает два числа и складывает их. По идее, это то же самое, что и function expression в ES5 . Если вы используете Babel или подобные компиляторы, то, скорее всего, они напишут что-то вроде этого:

Var add = function add(x, y) {
return x + y;
};

Если ваша функция принимает только один параметр, круглые скобки ставить необязательно.

Let square = x => x*x;

Такая функция принимает только один аргумент и возводит переданное число в квадрат.

Функция без параметров:

Let func = () => 77;

Если ваша функция содержит в себе несколько строк, то, во-первых, нужно использовать фигурные скобки, а во-вторых, обязательно написать, что функция возвращает, т.е. использовать ключевое слово return .

Let multiply = (x, y) => {
let result = x*y;
return result;
};

Если вам нужно вернуть литерал объекта, то его нужно обернуть в круглые скобки:

Let getObject = () => ({ brand: "BMW" });

Самовызывающаяся функция выглядит следующим образом.

Стрелочные функции. Как насчет аргументов

Последние

Это нужно знать