Стрелочные функции были созданы для упрощения функций scope и решение ключевого слова this, сделав его проще. Они используют синтаксис =>, который выглядит как стрелка.

Примечание. Он не заменяет существующие функции. Если вы замените синтаксис каждой функции стрелочными функциями, он будет работать не во всех случаях.

Давайте посмотрим на существующий синтаксис ES5. Если бы ключевое слово this находилось внутри метода объекта (функции, принадлежащей объекту), на что оно могло бы ссылаться?

var Actor = {
  name: 'RajiniKanth',
  getName: function() {
     console.log(this.name);
  }
};
Actor.getName();

Приведенный выше фрагмент будет относиться к object и распечатывать имя "RajiniKanth". Давайте рассмотрим приведенный ниже фрагмент и посмотрим, на что он здесь указывает.

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   this.movies.forEach(function(movie) {
     alert(this.name + " has acted in " + movie);
   });
  }
};

Actor.showMovies();

А как насчет того, чтобы ключевое слово this находилось внутри method’s function?

Здесь это будет относиться к window object, чем к inner function, поскольку оно выпало из scope. Поскольку this всегда ссылается на владельца функции, в которой он находится, в этом случае - поскольку он теперь вне области видимости - объект window / global.

Когда он находится внутри метода object, владельцем function является объект. Таким образом, ключевое слово this привязано к объекту. Тем не менее, когда он находится внутри функции, автономно или внутри другого метода, он всегда будет ссылаться на объект window/global.

var fn = function(){
  alert(this);
}

fn(); // [object Window]

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

Обычно вы создаете переменную вне внутренней функции метода. Теперь метод ‘forEach’ получает доступ к this и, следовательно, к свойствам object’s и их значениям.

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   var _this = this;
   this.movies.forEach(function(movie) {
     alert(_this.name + " has acted in " + movie);
   });
  }
};

Actor.showMovies();

Использование bind для присоединения ключевого слова this, которое относится к методу, к method’s inner function.

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   this.movies.forEach(function(movie) {
     alert(this.name + " has acted in " + movie);
   }.bind(this));
  }
};

Actor.showMovies();

Теперь с помощью стрелочной функции ES6 мы можем решить проблему лексической области видимости более простым способом.

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   this.movies.forEach((movie) => {
     alert(this.name + " has acted in " + movie);
   });
  }
};

Actor.showMovies();

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

С помощью стрелки функции this привязаны к охватывающей области во время создания и не могут быть изменены. Операторы new, bind, call и apply на это не влияют.

var asyncFunction = (param, callback) => {
  window.setTimeout(() => {
  callback(param);
  }, 1);
};

// With a traditional function if we don't control
// the context then can we lose control of `this`.
var o = {
  doSomething: function () {
  // Here we pass `o` into the async function,
  // expecting it back as `param`
  asyncFunction(o, function (param) {
  // We made a mistake of thinking `this` is
  // the instance of `o`.
  console.log('param === this?', param === this);
  });
  }
};

o.doSomething(); // param === this? false

В приведенном выше примере мы потеряли контроль над этим. Мы можем решить приведенный выше пример, используя ссылку на переменную this или используя bind. С ES6 становится проще управлять this, привязанным к лексической области видимости.

var asyncFunction = (param, callback) => {
  window.setTimeout(() => {
  callback(param);
  }, 1);
};

var o = {
  doSomething: function () {
  // Here we pass `o` into the async function,
  // expecting it back as `param`.
  //
  // Because this arrow function is created within
  // the scope of `doSomething` it is bound to this
  // lexical scope.
  asyncFunction(o, (param) => {
  console.log('param === this?', param === this);
  });
  }
};

o.doSomething(); // param === this? true

Когда не использовать стрелочные функции

Внутри литерала объекта.

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  getName: () => {
     alert(this.name);
  }
};

Actor.getName();

Actor.getName определяется с помощью функции стрелки, но при вызове она предупреждает undefined, потому что this.name равно undefined, поскольку контекст остается для window.

Это происходит потому, что стрелочная функция лексически связывает контекст с _40 _..., то есть с внешней областью видимости. Выполнение this.name эквивалентно window.name, которое не определено.

Прототип объекта

То же правило применяется при определении методов для prototype object. Вместо использования стрелочной функции для определения метода sayCatName, который возвращает неверный context window:

function Actor(name) {
  this.name = name;
}
Actor.prototype.getName = () => {
  console.log(this === window); // => true
  return this.name;
};
var act = new Actor('RajiniKanth');
act.getName(); // => undefined

Вызов конструкторов

this в вызове конструкции - это вновь созданный объект. При выполнении new Fn () контекст constructor Fn - это новый объект: this instanceof Fn === true.

this настраивается из включающего контекста, то есть из внешней области видимости, которая не позволяет назначать его вновь созданному объекту.

var Message = (text) => {
  this.text = text;
};
// Throws "TypeError: Message is not a constructor"
var helloMessage = new Message('Hello World!');

Обратный вызов с динамическим контекстом

Стрелочная функция связывает context статически при объявлении и не может сделать его динамическим. Присоединение слушателей событий к элементам DOM - обычная задача в программировании на стороне клиента. Событие запускает функцию обработчика с этим в качестве целевого элемента.

var button = document.getElementById('myButton');
button.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});

this - это окно в стрелочной функции, которая определена в глобальном контексте. Когда происходит событие щелчка, браузер пытается вызвать функцию-обработчик с контекстом кнопки, но функция стрелки не изменяет свой предопределенный контекст. this.innerHTML эквивалентно window.innerHTML и не имеет смысла.

Вы должны применить выражение функции, которое позволяет изменять это в зависимости от целевого элемента:

var button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log(this === button); // => true
  this.innerHTML = 'Clicked button';
});

Когда пользователь нажимает кнопку, this в функции обработчика является кнопкой. Таким образом, this.innerHTML = 'Clicked button' правильно изменяет текст кнопки, чтобы отразить состояние нажатия.

использованная литература

• Когда нельзя использовать стрелочные функции

Стрелочные функции - до сих пор наиболее широко используемая функция ES6 ...

Использование: все функции ES5 следует заменить стрелочными функциями ES6, за исключением следующих сценариев:

Стрелочные функции не использовать:

1. When we want function hoisting
   • as arrow functions are anonymous.
2. When we want to use this/arguments in a function
   • as arrow functions do not have this/arguments of their own, they depend upon their outer context.
3. When we want to use named function
   • as arrow functions are anonymous.
4. When we want to use function as a constructor
   • as arrow functions do not have their own this.
5. When we want to add function as a property in object literal and use object in it
   • as we can not access this (which should be object itself).

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

Вариант 1: когда мы хотим передать функции более одного аргумента и вернуть из нее какое-то значение.

Версия ES5:

var multiply = function (a, b) {
    return a*b;
};
console.log(multiply(5, 6)); // 30

Версия ES6:

var multiplyArrow = (a, b) => a*b;
console.log(multiplyArrow(5, 6)); // 30

Примечание:

Ключевое слово function не требуется. => является обязательным. {} являются необязательными, когда мы не предоставляем {} return неявно добавляется JavaScript, а когда мы предоставляем {}, нам нужно добавить return, если он нам нужен.

Вариант 2: когда мы хотим передать только один аргумент функции и вернуть из него какое-то значение.

Версия ES5:

var double = function(a) {
    return a*2;
};
console.log(double(2)); // 4

Версия ES6:

var doubleArrow  = a => a*2;
console.log(doubleArrow(2)); // 4

Примечание:

При передаче только одного аргумента мы можем опустить круглые скобки, ().

Вариант 3: когда мы не хотим передавать какой-либо аргумент функции и не хотим возвращать какое-либо значение.

Версия ES5:

var sayHello = function() {
    console.log("Hello");
};
sayHello(); // Hello

Версия ES6:

var sayHelloArrow = () => {console.log("sayHelloArrow");}
sayHelloArrow(); // sayHelloArrow

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

Версия ES6:

var increment = x => {
  return x + 1;
};
console.log(increment(1)); // 2

Вариант 5: когда мы хотим вернуть объект из стрелочных функций.

Версия ES6:

var returnObject = () => ({a:5});
console.log(returnObject());

Примечание:

Нам нужно заключить объект в круглые скобки, (). В противном случае JavaScript не сможет отличить блок от объекта.

Вариант 6. Стрелочные функции не имеют собственного arguments (массив, подобный объекту). Они зависят от внешнего контекста для arguments.

Версия ES6:

function foo() {
  var abc = i => arguments[0];
  console.log(abc(1));
};
foo(2); // 2

Примечание:

foo - это функция ES5, с массивом arguments, подобным объекту, и аргументом, переданным ей, является 2, поэтому arguments[0] для foo равно 2.

abc - это стрелочная функция ES6, поскольку у нее нет собственного arguments. Следовательно, вместо этого он печатает arguments[0] из foo своего внешнего контекста.

Вариант 7: стрелочные функции не имеют this самих себя, они зависят от внешнего контекста для this

Версия ES5:

var obj5 = {
  greet: "Hi, Welcome ",
  greetUser : function(user) {
        setTimeout(function(){
        console.log(this.greet + ": " +  user); // "this" here is undefined.
        });
     }
};

obj5.greetUser("Katty"); //undefined: Katty

Примечание:

Обратный вызов, переданный в setTimeout, является функцией ES5 и имеет свой собственный this, который не определен в среде use-strict. Отсюда получаем вывод:

undefined: Katty

Версия ES6:

var obj6 = {
  greet: "Hi, Welcome ",
  greetUser : function(user) {
    setTimeout(() => console.log(this.greet + ": " +  user));
      // This here refers to outer context
   }
};

obj6.greetUser("Katty"); // Hi, Welcome: Katty

Примечание:

Обратный вызов, переданный в setTimeout, является стрелочной функцией ES6, и у нее нет своего собственного this, поэтому он берет ее из своего внешнего контекста, то есть greetUser, который имеет this. Это obj6, и поэтому мы получаем результат:

Hi, Welcome: Katty

Разное:

• Мы не можем использовать new со стрелочными функциями.
• Стрелочные функции не имеют свойство prototype.
• У нас нет привязки this, когда стрелочная функция вызывается через apply или call.

Я по-прежнему поддерживаю все, что написал в моем первом ответе в этой теме. Однако с тех пор мое мнение о стиле кода изменилось, поэтому у меня есть новый ответ на этот вопрос, основанный на моем последнем.

Что касается лексического this

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

Я считаю, что мы вообще не должны использовать this. Следовательно, если человек сознательно избегает использования this в своем коде, то «лексическая this» особенность стрелок не имеет большого значения или вообще не имеет значения. Кроме того, исходя из того, что this - это плохо, то, как стрелка обращается с this, менее "хорошо"; вместо этого, это скорее средство защиты от другой ненормативной лексики.

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

Даже если легче написать код с this со стрелками, чем без них, правила использования стрелок остаются очень сложными (см. Текущий поток). Таким образом, рекомендации не являются ни «четкими», ни «последовательными», как вы просили. Даже если программисты знают о двусмысленности стрелок, я думаю, они пожимают плечами и все равно принимают их, потому что значение лексического this затмевает их.

Все это является предисловием к следующему осознанию: если не использовать this, то двусмысленность в отношении this, которую обычно вызывают стрелки, становится неактуальной. Стрелки в этом контексте становятся более нейтральными.

Что касается краткого синтаксиса

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

Другими словами: черт возьми, мне тоже нужны однострочные функции!

Что касается руководства

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

Рекомендации по обозначению функций в ES6:

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

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

Для обсуждения давайте временно предположим, что мы используем средство проверки типов, например TypeScript или Facebook Flow. Рассмотрим следующий игрушечный модуль, который представляет собой действительный код ECMAScript 6 плюс аннотации типа Flow (я включу нетипизированный код, который реально будет получен из Babel, в конце этого ответа, чтобы его действительно можно было запустить):

export class C {
  n : number;
  f1: number => number;
  f2: number => number;

  constructor(){
    this.n = 42;
    this.f1 = (x:number) => x + this.n;
    this.f2 = function (x:number) { return  x + this.n;};
  }
}

Теперь посмотрим, что происходит, когда мы используем класс C из другого модуля, например:

let o = { f1: new C().f1, f2: new C().f2, n: "foo" };
let n1: number = o.f1(1); // n1 = 43
console.log(n1 === 43); // true
let n2: number = o.f2(1); // n2 = "1foo"
console.log(n2 === "1foo"); // true, not a string!

Как видите, здесь проверка типов завершилась неудачно: f2 должен был вернуть число, но вернул строку!

Хуже того, кажется, что никакое средство проверки мыслимого типа не может обрабатывать обычные (не стрелочные) функции JavaScript, потому что this из f2 не встречается в списке аргументов f2, поэтому требуемый тип для этого не может возможно, будет добавлен как аннотация к f2.

Влияет ли эта проблема на людей, которые не используют средства проверки типов? Я так думаю, потому что даже когда у нас нет статических типов, мы думаем, как будто они есть. (Первый параметр должен быть числом, второй - строкой и т. Д.) Скрытый аргумент this, который может или не может использоваться в теле функции, усложняет наш мысленный учет.

Вот работающая нетипизированная версия, которая будет произведена Babel:

class C {
    constructor() {
        this.n = 42;
        this.f1 = x => x + this.n;
        this.f2 = function (x) { return x + this.n; };
    }
}

let o = { f1: new C().f1, f2: new C().f2, n: "foo" };
let n1 = o.f1(1); // n1 = 43
console.log(n1 === 43); // true
let n2 = o.f2(1); // n2 = "1foo"
console.log(n2 === "1foo"); // true, not a string!

Я предпочитаю всегда использовать стрелочные функции, когда доступ к локальному this не требуется, потому что стрелочные функции не связывают свои собственные this, arguments, super или new.target.

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

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

В стрелочных функциях this лексически связан, что означает, что он закрывается более чем на this из области, в которой была определена стрелочная функция (родительская область), и не изменяется. независимо от того, где и как он вызывается / вызывается.

Ограничения стрелочных функций как методов объекта

// this = global Window
let objA = {
  id: 10,
  name: "Simar",
  print () { // same as print: function()
    console.log(`[${this.id} -> ${this.name}]`);
  }
}

objA.print(); // logs: [10 -> Simar]

objA = {
  id: 10,
  name: "Simar",
  print: () => {
    // Closes over this lexically (global Window)
    console.log(`[${this.id} -> ${this.name}]`);
  }
};

objA.print(); // logs: [undefined -> undefined]

В случае objA.print(), когда print() метод был определен с использованием обычного function, он работал, разрешая this правильно в objA для вызова метода, но не работал, когда определялся как функция arrow=>. Это потому, что this в обычной функции, когда она вызывается как метод объекта (objA), является самим объектом.

Однако в случае стрелочной функции this лексически привязывается к this охватывающей области, в которой она была определена (глобальная / Window в нашем случае), и остается неизменной во время своего вызова в качестве метода на objA.

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

/* this = global | Window (enclosing scope) */

let objB = {
  id: 20,
  name: "Paul",
  print () { // Same as print: function()
    setTimeout( function() {
      // Invoked async, not bound to objB
      console.log(`[${this.id} -> ${this.name}]`);
    }, 1)
  }
};

objB.print(); // Logs: [undefined -> undefined]'

objB = {
  id: 20,
  name: "Paul",
  print () { // Same as print: function()
    setTimeout( () => {
      // Closes over bind to this from objB.print()
      console.log(`[${this.id} -> ${this.name}]`);
    }, 1)
  }
};

objB.print(); // Logs: [20 -> Paul]

В случае objB.print(), где метод print() определен как функция, которая вызывает _21 _ [$ {this.id} - ›{this.name}] _ 22_ асинхронно в качестве обратного вызова на setTimeout, this правильно разрешается в objB, когда функция стрелки использовался как обратный вызов, но потерпел неудачу, когда обратный вызов был определен как обычная функция.

Это потому, что функция стрелки =>, переданная в setTimeout(()=>..), закрыла this лексически от своего родителя, то есть вызов objB.print(), который ее определил. Другими словами, функция стрелки => передана в setTimeout(()==>..., привязана к objB как ее this, потому что вызов objB.print() this был сам objB.

Мы могли бы легко использовать Function.prototype.bind(), чтобы заставить обратный вызов, определенный как обычная функция, работать, привязав его к правильному this.

const objB = {
  id: 20,
  name: "Singh",
  print () { // The same as print: function()
    setTimeout( (function() {
      console.log(`[${this.id} -> ${this.name}]`);
    }).bind(this), 1)
  }
}

objB.print() // logs: [20 -> Singh]

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

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

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

/* this = global | Window (enclosing scope) */

function print() {
  console.log(`[${this.id} -> {this.name}]`);
}

const obj1 = {
  id: 10,
  name: "Simar",
  print // The same as print: print
};

obj.print(); // Logs: [10 -> Simar]

const obj2 = {
  id: 20,
  name: "Paul",
};

printObj2 = obj2.bind(obj2);
printObj2(); // Logs: [20 -> Paul]
print.call(obj2); // logs: [20 -> Paul]

Ничего из вышеперечисленного не будет работать со стрелочной функцией _44 _ [$ {this.id} - ›{this.name}] _ 45_, поскольку this не может быть изменено и останется привязанным к this охватывающей области, в которой она была определена (глобальная / Окно).

Во всех этих примерах мы вызывали одну и ту же функцию с разными объектами (obj1 и obj2) один за другим, оба из которых были созданы после объявления функции print().

Это были надуманные примеры, но давайте подумаем еще о примерах из реальной жизни. Если бы нам пришлось написать наш reduce() метод, аналогичный тому, который работает с arrays, мы снова не сможем определить его как лямбда, потому что он должен вывести this из контекста вызова, то есть массива, для которого он был вызван.

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

Кроме того, когда фреймворки или системы принимают функцию (-ы) обратного вызова для последующего вызова с динамическим контекстом this, мы не можем использовать стрелочные функции, поскольку снова this может потребоваться изменение при каждом вызове. Эта ситуация обычно возникает с обработчиками событий DOM.

'use strict'
var button = document.getElementById('button');

button.addEventListener('click', function {
  // web-api invokes with this bound to current-target in DOM
  this.classList.toggle('on');
});

var button = document.getElementById('button');

button.addEventListener('click', () => {
  // TypeError; 'use strict' -> no global this
  this.classList.toggle('on');
});

Это также причина того, почему в таких фреймворках, как Angular 2+ и Vue.js, ожидается, что методы привязки компонентов шаблона будут обычными функциями / методами, поскольку this их вызов управляется. каркасами для связывающих функций. (Angular использует Zone.js для управления асинхронным контекстом для вызовов функций привязки представления и шаблона.)

С другой стороны, в React, когда мы хотим передать метод компонента в качестве обработчика события, например <input onChange={this.handleOnchange} />, мы должны определить handleOnchanage = (event)=> {this.props.onInputChange(event.target.value);} как стрелочную функцию для каждого вызова. Мы хотим, чтобы это был тот же экземпляр компонента, который создал JSX для визуализированного элемента DOM.

Эта статья также доступна на моя публикация в Medium. Если вам понравилась статья или у вас есть комментарии и предложения, хлопайте или оставьте комментарии на Medium.

Проще говоря,

var a = 20; function a() {this.a = 10; console.log(a);}
//20, since the context here is window.

Другой пример:

var a = 20;
function ex(){
    this.a = 10;
    function inner(){
        console.log(this.a); // Can you guess the output of this line?
    }
    inner();
}
var test = new ex();

Ответ: консоль напечатает 20.

Причина в том, что всякий раз, когда функция выполняется, создается ее собственный стек, в этом примере функция ex выполняется с оператором new, поэтому будет создан контекст, а при выполнении inner JavaScript создаст новый стек и выполнит функцию inner. в global context, хотя есть локальный контекст.

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

Стрелки решают эту проблему. Вместо того, чтобы брать Global context, они берут local context, если таковые существуют. В * данном примере new ex() будет равно this.

Таким образом, во всех случаях, когда привязка является явной, стрелки по умолчанию решают проблему.