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

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

это в обычных функциях

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

1. Контекст метода: Когда обычная функция вызывается как метод объекта, это относится к объекту, которому принадлежит этот метод.

Output

Object

obj - это объект с именем свойства и методом getName.getName использует this.name для возврата значения свойства name.Когда вызывается obj.getName(), это значение внутри метода ссылается на объект obj.Метод возвращает "Object", который является значением параметра obj.name.

2. Контекст автономной функции: Когда обычная функция вызывается как автономная функция, это относится к глобальному объекту (window в браузерах, global в Node.js). В строгом режиме это не определено.

Output

<ref *1> Object [global] {
  global: [Circular *1],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Functio...

Функция showThis() регистрирует значение параметра this.В нестрогом режиме это относится к глобальному объекту (например, window в браузерах).В строгом режиме это значение не определено внутри функции.

Динамическая привязка: обычные функции позволяют явно задавать значение this с помощью таких методов, как call, apply или bind.

Output

Hello, my name is GFG
Hello, my name is GFG
Hello, my name is GFG

call: Вызывает функцию greet и явно присваивает ее объекту person.apply: Аналогично call, но аргументы передаются в виде массива (здесь дополнительные аргументы не передаются).bind: Возвращает новую функцию, которая постоянно привязана к объекту person. Новая функция (greetAlice) может быть вызвана позже.

это в функциях со стрелками

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

1. Лексическая область видимости: В функции arrow это определяется контекстом, в котором определена функция, а не местом ее вызова.

Output

undefined

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

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

Функция arrow внутри setInterval наследует это от конструктора Timer, гарантируя, что она ссылается на экземпляр Timer.

Ключевые отличия

Примечание: Разница между обычными функциями и функциями со стрелками

Лучшие практики

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