2

Не могу понять, почему стрелочная функция иначе работает с this. Простой пример:

function btnClick() {
  console.log(this);
};

window.onload = function() {

  var buttons = document.querySelectorAll('.actions input');
  [...buttons].map((el) => el.onclick = btnClick);

}
//<input type="button" name="save" value="Сохранить">
//<input type="button" name="delete" value="Удалить">

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

const btnClick = () => {
  console.log(this);
};

window.onload = function() {

  var buttons = document.querySelectorAll('.actions input');
  [...buttons].map((el) => el.onclick = btnClick);

}
//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

Со всеми вытекающими последствиями.... Как быть в данной ситуации? Отказываться от стрелок в пользу Function Declaration? Или все-таки есть решение?

2 ответа 2

3

Внутри стрелочной функции используется this контекста (контекст функции или глобальный контекст), в котором она описана. Это и есть их киллерфича, а не более короткий синтаксис. Если тяжело набирать function funName() { ... }, то используйте снипетты в вашем текстовом редакторе. Да вот же, первая ссылка по запросу "стрелочные функции" с примерами и разъяснениями.

 function myFunction () {
     let self = this;
     let functionDeclaration = function () {
         console.log(self === this);
     }

     let arrowFun = () => console.log(self === this);

     functionDeclaration();
     arrowFun();
 }

 myFunction.call("some");
// output:
// false
// true
3
  • Все они создают. Просто значение this скопится статически (лексически). 9 мар 2018 в 11:49
  • @smellyshovel, удалил первое предложение. Теперь всё правильно? Может я сам чего недопонимаю, а тут с советами лезу)))
    – alvoro
    9 мар 2018 в 11:52
  • Ну в принципе говорите верно, просто формулировка не совсем точная. 9 мар 2018 в 11:53
3

[[ThisBindingStatus]] - "lexical" | "initialized" | "uninitialized" - If the value is "lexical", this is an ArrowFunction and does not have a local this value.

Цитата из спецификации.

Если функция является стрелочной, то значение this скопится [scopes] статически (то есть лексически). Это значит, что значение this внутри стрелочной функции будет таким же, как и в том Лексическом Окружении, в рамках которого определена эта стрелочная функция.

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

console.log(this);
let this1 = this;

let foo = () => {
    console.log(this);
    let this2 = this;
    
    let bar = () => {
        console.log(this);
        let this3 = this;
        
        let baz = () => {
            let this4 = this;
            console.log(this);
            console.log(this1 === this4); // === this2 === this3
            
        }
        baz();
    }
    bar();
};

foo();

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.