JavaScript: преимущества стрелочных функций

JavaScript: преимущества стрелочных функций
Возможно, вы не знаете, что это одно из основных различий между обычными и стрелочными возможностями ES6 в JavaScript.

Когда я был в учебном лагере по программированию, изучая JavaScript и ES6, казалось, что у всех в классе была некоторая путаница по поводу обычных объявлений возможностей и новых объявлений стрелочных возможностей ES6.

  • Когда нам следует использовать обычные возможности, а когда стрелочные возможности?
  • В чем разница между обычными возможностями и стрелочными возможностями?
  • Можем ли мы использовать одно или иное во всех ситуациях для единообразия?

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

Давайте рассмотрим простой пример. Предположим что, у нас есть следующий объект JavaScript:

const obj1 = { fullName: 'Object 1', color: 'red', print: function() { console.log(`${this.fullName} is ${this.color}`); }};obj1.print(); // Object 1 is red

У нас есть способ print для obj1, который отображает строку в консоль. Результат — то, что, как мы и ожидали, this в способе print ссылается на сам obj1.

Сейчас давайте создадим ещё один объект с иным способом print:

const obj2 = { fullName: 'Object 2', color: 'blue', print: function() { setTimeout(function() { console.log(`${this.fullName} is ${this.color}`); }, 1000); }};obj2.print(); // undefined - is undefined

Сейчас способ print будет отображать полученную строку только через одну секунду из-за setTimeout. Но почему undefined is undefined вместо вывода Object 2 is blue?

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

В приведенном выше фрагменте кода в строке 5 анонимная функцию, объявленная с использованием обычного объявления возможности, передается как обратный вызов для setTimeout. Далее два this в строке 6 будут ссылаться на объект, которому принадлежит способ setTimeout, который переходит в объект window.

Так как свойства fullName и color не существуют в объекте window, результирующая строка возвращает undefined is undefined.

Как мы можем сделать так, чтобы два this в строке 6 ссылались на obj2? На этот раз давайте объявим возможность обратного вызова в строке 5, используя синтаксис стрелочной возможности ES6:

const obj2 = { fullName: 'Object 2', color: 'blue', print: function() { setTimeout(() => {      console.log(`${this.fullName} is ${this.color}`);    }, 1000);  }};obj2.print(); // Object 2 is blue

Это работает! Так какова же теория этого изменения?

Что ж, оказывается, что объявление стрелочной возможности создает то, что мы называем лексической областью видимости. Это означает, что два this в строке 6 будут ссылаться не на непосредственный родительский объект, а на вызывающий, который вызвал возможность, содержащую их.

В строке 11 при вызове obj2 способа print все элементы this, заключенные внутри стрелочных возможностей способа print, будут ссылаться на obj2.

Заключение

Я надеюсь, что эта статья объяснила необходимые концепции и помогла вам разобраться с путаницей. Ключевое слово this в JavaScript целая тема сама по себе, и есть много дискуссий об этом, но документация MDN будет хорошей отправной точкой для дальнейших исследований.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *