Функции стрелки – фантастическое дополнение к JavaScript. Однако я отметил, что многие разработки используют только функции стрелки. Кажется, они думают, что это «новый способ» создавать функции, одновременно используя Функция Ключевое слово «старый путь».
Но это не правильно, Функции стрелки не на 100% эквивалентны классическим функциям. Есть тонкие, но важные различия, которые могут привести к большим головным болям, если вы не знаете о них.
В классических функциях стоимость это Ключевое слово динамическое, потому что это зависит от того, как вы их называете.
Если вы называете функцию как метод объекта, Это относится к этому объекту. Но если вы называете функцию как обычную функцию (то есть не как метод объекта), Это представляет глобальный объект (или undefined в строгом режиме.)
myObject.myMethod(); // this == myObject myFunction(); // this == global object or undefined
С классическими функциями вы называете их, используя новый ключевое слово. В этом случае вы создадите объект и Это будет ссылаться на этот новый объект.
// this == the new object const myObject = new ConstructorFunction();
Кроме того, вы можете вручную Установите значение Это используя .bind Метод (Функции в JavaScript являются объектами). Это не изменяет оригинальную функцию, но она возвращает новую версию с новым значением для Это Отказ
const boundFunction = normalFunction.bind({name: "Bob", age: 40});
normalFunction(); // this == global object or undefined
boundFunction(); // this == {name: "Bob", age: 40}
Вы не можете сделать все об этом со стрелами.
В функциях стрелки, часто говорится, что у них нет это “. Значение Это В функции стрелки «унаследована» из контекста, где была создана функция.
Это означает, что если вы создаете функцию стрелки в глобальном контексте (I.E. не внутри объекта или функции), Это относится к глобальному объекту или undefined в строгом режиме. Если вы объявите функцию стрелки внутри класса, Это является примером класса.
И если вы объявите функцию стрелки внутри другой функции, она будет иметь то же самое Это как внешняя функция.
// Declaring an arrow function in the global context
// this == global object or undefined
const sayHello1 = () => "Hello";
class MyClass {
// Declaring an arrow function in a class
// this == object
sayHello2 = () => "Hello";
}
function outerFunction() {
// Declaring arrow function inside
// another function
// this == the same value as in outerFunction
const innerFunction = () => "Hello"
}
И самое главное, Вы не можете изменить значение Это в функции стрелки. Даже .bind не работает молча! Призывая этот метод не бросит ошибку, но это вернет новую версию функции … с тем же Это как оригинал.
// Declaring an arrow function in the global context
// this == global object or undefined
const sayHello = () => "Hello";
sayHello(); // this == global object or undefined
const sayHello2 = sayHello.bind({ name: "Alice", age: 30 });
sayHello2(); // this == global object or undefined
Другое различие происходит при объявлении методов внутри класса.
Если вы объявляете методы классов «Стандарт», одна и та же функция будет повторно использована среди всех случаев этого класса. Но если вы используете функции стрелки, каждый раз, когда вы создаете новый экземпляр, для этого экземпляра будет создана новая копия функции.
Важно сказать это снова, функции стрелки – это фантастическое дополнение к JavaScript. Если тело функции – это простое выражение или если вы не хотите иметь дело с Это Ключевое слово, они очень полезны. Вам просто нужно знать, когда их использовать.
Станьте лучшим разработчиком JavaScript! Мой рассылка имеет простые, действующие шаги для повышения навыков JavaScript, прямо на ваш почтовый ящик. Нажмите здесь, чтобы подписаться
Оригинал: “https://dev.to/nicozerpa/beware-of-javascript-arrow-functions-44l1”