Автор оригинала: Shadab Ansari.
Вступление
Если вы являетесь разработчиком JavaScript, вы можете знать, что JavaScript соответствует Ecmascript (Es) Стандарты. Спецификации ES6 или ECMAScript 2015, ввели некоторые революционные спецификации для JavaScript, таких как функции стрелки, классы, отдых и распространенные операторы, обещания, пусть и const и т. Д.
В этом уроке мы сосредоточимся на функциях со стрелками, которые очень запутаны и запугивают для новичков JavaScript.
Стрелка Функция синтаксиса
Как известно, функция ES5 имеет следующий синтаксис:
function square(a) {
return a * a;
}
В ES6 мы можем написать ту же функцию только с одной строкой кода:
let square = (a) => { return a * a; }
Кроме того, если тело функции имеет только одно утверждение, которое он возвращает, мы можем пропустить фигурные брекеты {} и Возвращение утверждение:
let square = (a) => a * a
Кроме того, если функция принимает только один параметр, мы можем даже пропустить брекеты () вокруг него:
let square = a => a * a
С другой стороны, если функция не требует никаких параметров, мы можем написать так:
let results = () => { /* ...some statements */ };
Мы должны писать меньше кода с этим синтаксисом при предоставлении одной и той же функциональности, что может помочь Declutter и упростить ваш код.
Преимущество этого синтаксиса наиболее заметна при использовании в обратных вызовах. Таким образом, многословие и труднодоступен фрагмент кода, как это:
function getRepos() {
return fetch('https://api.github.com/users/stackabuse/repos')
.then((response) => {
return response.json();
}).then((response) => {
return response.data;
}).then((repos) => {
return repos.filter((repo) => {
return repo.created_at > '2019-06-01';
});
}).then((repos) => {
return repos.filter((repo) => {
return repo.stargazers_count > 1;
});
});
}
Может быть уменьшен до следующего, используя функции стрелки:
function getRepos() {
return fetch('https://api.github.com/users/stackabuse/repos')
.then(response => response.json())
.then(response => response.data)
.then(repos => repos.filter(repo => repo.created_at > '2019-06-01'))
.then(repos => repos.filter(repo => repo.stargazers_count > 1));
}
Преимущества функций стрелки
Существует два основных преимущества использования функций стрелки. Одним из них является то, что он более короткий синтаксис и, таким образом, требует меньшего количества кода. Основная выгода заключается в том, что он удаляет несколько болевых точек, связанных с это оператор.
Нет связывания оператора «Это»
В отличие от других объектно-ориентированных языков программирования, в JavaScript (перед функциями стрелки) каждая функция определила его ссылку на это И это зависит от Как Функция была вызвана. Если у вас есть опыт работы с современными языками программирования, такие как Java, Python, C # и т. Д., Оператор это или Я Внутри метода относится к объекту, называемую методом, а не Как Этот метод называется.
Программисты всегда жаловались, что используя это слишком сложно в JavaScript. Это вызывает отличную путаницу в сообществе JavaScript и вызывает непреднамеренное поведение кода в некоторых случаях.
Чтобы лучше понять преимущество функций стрелки, давайте сначала понять, как это Работает в ES5.
Оператор «Это» в ES5
Значение это определяется контекстом выполнения функции, который в простых терминах означает Как Функция называется.
То, что добавляет больше в путаницу, заключается в том, что каждый раз, когда вызывается одна и та же функция, контекст выполнения может быть разным.
Давайте попробуем понять его с помощью примера:
function test() {
console.log(this);
}
test();
Выход этой программы будет следующим в консоли браузера:
Window {...}
Как мы называли Тест () от глобального контекста это ключевое слово относится к глобальному объекту, который является Окно объект в браузерах. Каждая глобальная переменная, которую мы создаем, привязаны к этому глобальный объект Окно Отказ
Например, если вы запустите следующий код в консоли браузера:
let greetings = 'Hello World!'; console.log(greetings); console.log(window.greetings)
Вас встретятся с «Hello World!» дважды:
Hello World! Hello World!
Как мы можем видеть глобальную переменную Привет прилагается к глобальному объекту окно Отказ
Давайте возьмем другой пример с функцией конструктора:
function Greetings(msg) {
this.msg = msg;
};
let greetings = Greetings('Hello World!');
console.log(greetings);
Мы получим следующее сообщение в консоли:
undefined
что имеет смысл, потому что мы называем Привет () в окно контекст и как предыдущий пример это относится к глобальному объекту окно и this.msg добавил Msg Имущество для окно объект.
Мы можем проверить это, если запустим:
window.msg
Мы будем приветствовать:
Hello World!
Но если мы используем Новый Оператор при создании Привет объект:
let greetings = new Greetings('Hello World!');
console.log(greetings.msg);
Мы будем приветствовать:
Hello World!
Мы видим это Оператор не относится к глобальному окно Объект на этот раз. Это Новый Оператор, который делает эту магию. Новый Оператор создает пустой объект и делает это Обратитесь к этому пустую объекту.
Я надеюсь, что теперь вы получаете чувство нашего предыдущего заявления
это зависит от Как Функция называется.
Давайте возьмем еще один пример:
let greetings = {
msg: 'Hello World!',
greet: function(){
console.log(this.msg);
}
}
greetings.greet();
Если мы запустим этот код в консоли браузера, снова мы будем приветствовать:
Hello World!
Почему вы думаете это не относился к окно Объект на этот раз?
Неявное обязательство: это Ключевое слово связано с объектом перед точкой.
В нашем примере это относится к Привет объект.
Но если мы назначаем функцию ссылки привет. Гид к переменной:
let greetRef = greetings.greet; greetRef();
Мы будем приветствовать:
undefined
Это что-нибудь объясняет? Помните, что вызывая функцию в оконном контексте из предыдущего примера?
Как мы называем Commentref () в оформлении окно контекст, в этом случае это относится к окно объект, и мы знаем, что у него нет Msg имущество.
Давайте возьмем более сложный сценарий использования анонимной функции:
let factory = {
items: [5, 1, 12],
double: function(){
return this.items.map(function(item, index){
let value = item*2;
console.log(`${value} is the double of ${this.items[index]}`);
return value;
});
}
};
Если мы позвоним Factory.double () Мы получим следующую ошибку:
Uncaught TypeError: Cannot read property '0' of undefined
at
at Array.map ()
Ошибка указывает, что Это.темы не определен, что означает это Внутри анонимной функции карта () не имеет отношения к фабрика объект.
Это причины, по которым мы называем ценность это определяется контекстом выполнения функции. Есть более сложные примеры на этой болевой точке, которая находится за пределами объема этого учебника.
Есть несколько способов обойти эту проблему, как пропуская это контекст или использование Bind () Отказ Но использование этих обходных путей делают код осложненным и излишне раздутым.
К счастью, в ES6 функции стрелки более предсказуются с точки зрения ссылки на это ключевое слово.
«Это» оператор и функции стрелки в ES6
Во-первых, давайте преобразом анонимную функцию внутри карта () к функции стрелки:
let factory = {
items: [5, 1, 12],
double: function(){
return this.items.map((item, index) => {
let value = item*2;
console.log(`${value} is the double of ${this.items[index]}`);
return value;
});
}
};
Если мы позвоним Factory.double () Мы будем приветствовать:
10 is the double of 5 2 is the double of 1 24 is the double of 12 [10, 2, 24]
Как мы можем видеть поведение это Внутри функция стрелки довольно предсказуема. В стрелки функциями это всегда будет принимать свою ценность снаружи. На самом деле, функция стрелки даже не имеет это Отказ
Если мы ссылаемся на это Где-то в функции стрелки. Просмотру выполнена точно так же, как если бы она была обычной переменной – во внешнем объеме. Мы также называем это Лексический охват Отказ
В нашем примере это Внутри функция стрелки имеет то же значение, что и это За пределами I.e в методе Двойной () Отказ Итак, Это.темы В функции стрелки такая же, как Это.темы В методе Двойной () И это завод. Итоги Отказ
Функции стрелки не могут быть вызваны с Новый оператор
Поскольку функция стрелки не имеет это Ключевое слово, очевидно, что они не могут поддерживать Новый оператор.
Заключение
Функции со стрелками могут быть запутаны, чтобы начать, но очень полезно заставить код вести себя более предсказуемым с Лексический навес из это ключевое слово. Также легко на пальцах, так как он позволит вам ввести меньше кода.
В качестве разработчика JavaScript вам следует удобно использовать его, так как он широко используется с различными фреймами/библиотеками Frontend/Library, таких как React, Angular и т. Д. Я надеюсь, что этот учебник сможет помочь вам решить, когда и как реализовать функции стрелки в вашем будущие проекты.