Funkcja strzałki w obiekcie Literal

Question

Próbuję dowiedzieć się, dlaczego funkcja strzałki w literale obiektu jest wywoływana z window jako this. Czy ktoś może mi dać wgląd?

var arrowObject = { 
    name: 'arrowObject', 
    printName:() => { 
    console.log(this); 
    } 
}; 

// Prints: Window {external: Object, chrome: Object ...} 
arrowObject.printName(); 

i obiekt, który działa zgodnie z oczekiwaniami:

var functionObject = { 
    name: 'functionObject', 
    printName: function() { 
    console.log(this); 
    } 
}; 

// Prints: Object {name: "functionObject"} 
functionObject.printName(); 

Według Babel REPL, oni transpiled do

var arrowObject = { 
    name: 'arrowObject', 
    printName: function printName() { 
    console.log(undefined); 
    } 
}; 

I

var functionObject = { 
    name: 'functionObject', 
    printName: function printName() { 
    console.log(this); 
    } 
}; 

Dlaczego nie jest arrowObject.printName(); o nazwie z arrowObject jako this?

Logi konsoli pochodzą z Fiddle (gdzie use strict; nie jest używany).

Answer 1

Pamiętaj, że tłumaczenie Babel przyjmuje tryb ścisły, ale Twój wynik z window wskazuje, że uruchamiasz swój kod w trybie luźnym. Jeśli powiesz Babel założyć luźny tryb, jego transpilation is different:

var _this = this;     // ** 

var arrowObject = { 
    name: 'arrowObject', 
    printName: function printName() { 
    console.log(_this);    // ** 
    } 
}; 

Zanotować _this globalnego i console.log(_this); zamiast console.log(undefined); od ścisłego trybu transpilation.

próbuję dowiedzieć się, dlaczego funkcja strzałka w obiekcie dosłownym jest wywoływana z window jak this.

Ponieważ funkcje strzałek dziedziczą this z kontekstu, w którym zostały utworzone. Wydaje się, gdzie to robisz:

var arrowObject = { 
    name: 'arrowObject', 
    printName:() => { 
    console.log(this); 
    } 
}; 

... this jest window. (Co sugeruje, że nie używasz trybu ścisłego, polecam go używać tam, gdzie nie ma wyraźnego powodu, aby tego nie robić). Jeśli byłby to coś innego, na przykład undefined globalnego kodu trybu ścisłego, this w funkcji strzałki, to inna wartość.

mogą być nieco jaśniejsze, co jest kontekst, w którym funkcja strzałka jest tworzony jeśli łamiemy swoją inicjatora do logicznego równoważne:

var arrowObject = {}; 
arrowObject.name = 'arrowObject'; 
arrowObject.printName =() => { 
    console.log(this); 
};