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 you have read our privacy policy.

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