W celu przedstawienia dużego obrazu opiszę zarówno wiązanie dynamiczne, jak i leksykalne.
Dynamiczny Nazwa Oprawa
this
odnosi się do obiektu metoda jest wywoływana. To jest regularnie czytane zdanie na SO. Ale to wciąż tylko fraza, dość abstrakcyjna. Czy istnieje odpowiedni wzór kodu tego zdania?
Tak jest:
const o = {
m() { console.log(this) }
}
// the important patterns: applying methods
o.m(); // logs o
o["m"](); // logs o
m
to metoda, ponieważ opiera się na this
. o.m()
lub o["m"]()
oznacza m
jest stosowane do . Wzory te są tłumaczeniem Javascript na nasze słynne zdanie.
Jest jeszcze inny ważny wzór kod, który należy zwrócić uwagę na:
"use strict";
const o = {
m() { console.log(this) }
}
// m is passed to f as a callback
function f(m) { m() }
// another important pattern: passing methods
f(o.m); // logs undefined
f(o["m"]); // logs undefined
Jest bardzo podobny do poprzedniego wzoru, tylko nawias brakuje. Ale konsekwencje są znaczne: Po przejściu m
do funkcji f
, wyciągasz m
z jego obiektu/kontekstu o
. To jest wykorzenione teraz i this
nic nie mówi (zakłada się tryb ścisły).
leksykalna (lub statyczne) Name Binding
Strzałka funkcje nie mają własnych this
/super
/arguments
wiążące. Oni dziedziczyć ich z zakresem leksykalnym dominującej:
const toString = Object.prototype.toString;
const o = {
foo:() => console.log("window", toString.call(this)),
bar() {
const baz =() => console.log("o", toString.call(this));
baz();
}
}
o.foo() // logs window [object Window]
o.bar() // logs o [object Object]
Oprócz zasięgu globalnym (Window
w przeglądarkach) tylko funkcje są w stanie utworzyć zakres w JavaScript (i {}
bloków w ES2015).Po wywołaniu funkcji strzałki o.foo
nie istnieje żadna funkcja otaczająca, z której baz
może dziedziczyć jej this
. W konsekwencji przechwytuje wiązanie globalnego zasięgu, które jest związane z obiektem Window
.
Gdy baz
jest wywoływana przez o.bar
funkcja strzałka otoczony o.bar
(o.bar
tworzy swoją nadrzędną zakres leksykograficznego) i może dziedziczyć o.bar
jest this
wiążące. o.bar
został wywołany na o
, a tym samym jego this
jest związany z o
.
to po prostu rejestruje wartość 'this' z zakresu zawierającego, traktując go jak o zmienna termiczna. – Barmar
To tylko dlatego, że nie musisz robić kludge 'var self = this;', a następnie użyć 'self' w funkcji. – Barmar
W twoim przypadku nie ma kontekstu zamykającego, ani kontekstu globalnego, ani kontekstu modułu, więc "to" jest czymkolwiek w tym przypadku, najprawdopodobniej null lub okno. Innymi słowy, 'this' ma dokładnie taką samą wartość, jak w przypadku dodania' console.log (this) 'przed przypisaniem funkcji. –