Słowo kluczowe this
odnosi się do wartości obiektu powiązanego z tagiem
w momencie wywołania, co oznacza, że jego wartość różni się w zależności
czy funkcja jest wywoływana jako metoda, samodzielna funkcja czy jako
konstruktora.
Po wywołaniu funkcja tworzy wystąpienie słowa kluczowego this
za
jako odniesienia do obiektu pełniącego tę funkcję,
dostęp do właściwości i metod zdefiniowanych w jej zakresie z zakresu.
Praca z parametrem this
jest pod wieloma względami podobny do pracy ze zmienną zadeklarowaną
dzięki const
. Podobnie jak stała, nie można usunąć funkcji this
ani jej wartości
ale metody i właściwości obiektu, które słowo kluczowe this
można zmienić.
Globalne powiązanie
Poza funkcją lub kontekstem obiektu this
odnosi się do
globalThis
, która w większości przypadków jest odniesieniem do obiektu globalnego
Środowiska JavaScript. W kontekście skryptu uruchomionego w przeglądarce
obiekt globalny jest obiektem window
:
this;
> Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, ...}
W Node.js globalThis
jest obiektem global
:
$ node
Welcome to Node.js v20.10.0.
Type ".help" for more information.
> this
<ref *1> Object [global] {
...
}
Poza trybem ścisłym właściwość this
odnosi się też do obiektu globalnego w osobnym
ponieważ obiekt nadrzędny Window
jest obiektem, który rzeczywiście jest „właścicielem”
tych funkcji.
function myFunction() {
console.log( this );
}
myFunction();
> Window {...}
(function() {
console.log( this );
}());
> Window {...}
W trybie ścisłym funkcja this
ma wartość undefined
w osobnym
funkcja:
(function() {
"use strict";
console.log( this );
}());
> undefined
Przed wprowadzeniem trybu ścisłego wartość null
lub undefined
dla this
zostałaby zastąpiona odwołaniem do obiektu globalnego. Czasami w komunikacie
wiązanie globalne nazywane „wiązaniem domyślnym” z powodu tego
starszego sposobu działania.
Powiązanie pośrednie
Gdy funkcja jest wywoływana jako metoda obiektu, wystąpienie this
wewnątrz obiektu
ta metoda odnosi się do obiektu zawierającego metodę, dając dostęp do metody
metod i właściwości, które są z nim związane:
let myObject = {
myValue: "This is my string.",
myMethod() {
console.log( this.myValue );
}
};
myObject.myMethod();
> "This is my string."
Może to wyglądać, że wartość this
zależy od tego, jak funkcja i jej wartość
obiekt nadrzędny jest zdefiniowany. Zamiast tego kontekst wartości this
to
obecny kontekst wykonania. W tym przypadku kontekstem wykonania jest fakt,
Obiekt myObject
wywołuje metodę myMethod
, więc wartością jest myObject
za this
. Może się to wydawać kwestią techniczną w kontekście
ale w przypadku bardziej zaawansowanych zastosowań this
jest to niezbędne rozróżnienie,
o kilku ważnych rzeczach.
Ogólnie używaj znaczników this
w sposób, który nie powinien dotyczyć otaczającego kodu
do dowolnej konstrukcji. Wyjątkiem od tej reguły jest ES5
Funkcje strzałek.
this
w funkcjach strzałek
W funkcjach strzałek
this
łączy się w
środowisko leksykalne. Oznacza to, że
this
w funkcji strzałki odnosi się do wartości this
w tej funkcji
najbliższy kontekst zamykający:
let myObject = {
myMethod() { console.log( this ); },
myArrowFunction: () => console.log( this ),
myEnclosingMethod: function () {
this.myArrowFunction = () => { console.log(this) };
}
};
myObject.myMethod();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }
myObject.myArrowFunction();
> Window {...}
W poprzednim przykładzie myObject.myMethod()
rejestruje obiekt myObject
jako obiekt
który jest „właścicielem” tę metodę, ale myObject.myArrowFunction()
zwraca globalThis
(lub undefined
), ponieważ wystąpienie this
w funkcji strzałki
odnosi się do najwyższego zakresu nadrzędnego.
W poniższym przykładzie funkcja myEnclosingMethod
tworzy funkcję strzałki na
który zawiera go podczas wykonywania. Wystąpienie this
w elemencie
funkcja strzałki odnosi się teraz do wartości this
w elemencie zamykającym
czyli metody zawierającej tę funkcję strzałki. Ponieważ
wartość this
w myEnclosingMethod
dotyczy myObject
, po
zdefiniuj funkcję strzałki, a this
w funkcji strzałki odnosi się również do
myObject
:
let myObject = {
myMethod() { console.log( this ); },
myEnclosingMethod: function () {
this.myArrowFunction = () => { console.log(this) };
}
};
myObject.myEnclosingMethod();
myObject.myArrowFunction();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }
Jednoznaczne powiązanie
Powiązanie niejawne obsługuje większość przypadków użycia związanych z pracą z this
. Musisz jednak
może czasami potrzebować wartości this
, aby uwzględnić konkretne wykonanie
w kontekście systemu, a nie zakładanego kontekstu. Ilustracja, nawet nieco przestarzała,
działa z this
w ramach funkcji wywołania zwrotnego setTimeout
,
ponieważ to wywołanie zwrotne ma unikalny kontekst wykonania:
var myObject = {
myString: "This is my string.",
myMethod() {
console.log( this.myString );
}
};
myObject.myMethod();
> "This is my string."
setTimeout( myObject.myMethod, 100 );
> undefined
Chociaż ten konkretny mankament związany z setTimeout
został już rozwiązany przez
inne funkcje, podobne problemy z „utratą danych” Problemy dotyczące odbiorców this
zostały już wcześniej rozwiązane
tworząc wyraźne odwołanie do wartości this
w zakresie
zamierzonego kontekstu. Czasami możesz zauważyć przypisanie zadania this
do zmiennej korzystającej z identyfikatorów takich jak that
, self
lub _this
w starszej wersji
w postaci baz kodu. Oto typowe konwencje identyfikatorów zmiennych zawierających
przekazano wartość this
.
Gdy wywołujesz funkcję za pomocą metody call()
, bind()
lub apply()
,
this
wyraźnie odwołuje się do wywoływanego obiektu:
let myFunction = function() {
console.log( this.myValue );
}
let myObject = {
"myValue" : "This is my string."
};
myFunction.call( myObject );
> "This is my string."
var myObject = {
myString: "This is my string.",
myMethod() {
console.log( this.myString );
}
};
setTimeout( myObject.myMethod.bind( myObject ), 100 );
> "This is my string."
Bezpośrednie wiązanie zastępuje wartość this
podaną przez wiązanie niejawne.
let myObject = {
"myValue" : "This string sits alongside myMethod.",
myMethod() {
console.log( this.myValue );
}
};
let myOtherObject = {
"myValue" : "This is a string in another object entirely.",
};
myObject.myMethod.call( myOtherObject );
> "This is a string in another object entirely."
Jeśli funkcja jest wywoływana w sposób, który ustawiałby wartość this
na
undefined
lub null
, ta wartość została zastąpiona przez globalThis
poza zakresem ścisłym
tryb:
let myFunction = function() {
console.log( this );
}
myFunction.call( null );
> Window {...}
Podobnie, jeśli funkcja zostanie wywołana w sposób, który dałby this
obiekt podstawowy
jest ona zastępowana
obiekt otoki wartości podstawowej
poza trybem ścisłym:
let myFunction = function() {
console.log( this );
}
let myNumber = 10;
myFunction.call( myNumber );
> Number { 10 }
W trybie ścisłym przekazywana wartość this
nie jest w żaden sposób przekształcana w obiekt,
nawet jeśli jest to wartość podstawowa, null
lub undefined
:
"use strict";
let myFunction = function() {
console.log( this );
}
let myNumber = 10;
myFunction.call( myNumber );
> 10
myFunction.call( null );
> null
new
powiązanie
Jeśli jako konstruktor używany jest class,
Słowo kluczowe new
, this
odnosi się do nowo utworzonej instancji:
class MyClass {
myString;
constructor() {
this.myString = "My string.";
}
logThis() {
console.log( this );
}
}
const thisClass = new MyClass();
thisClass.logThis();
> Object { myString: "My string." }
Podobnie wartość this
w funkcji konstruktora wywoływanej przy użyciu new
odnosi się do tworzonego obiektu:
function MyFunction() {
this.myString = "My string.";
this.logThis = function() {
console.log( this );
}
}
const myObject = new MyFunction();
myObject.logThis();
> Object { myString: "My string.", logThis: logThis() }
Powiązanie modułu obsługi zdarzeń
W kontekście modułów obsługi zdarzeń wartość this
odwołuje się do obiektu, który
który je wywołuje. W ramach funkcji wywołania zwrotnego modułu obsługi zdarzeń oznacza to, że this
odwołuje się do elementu powiązanego z modułem obsługi:
let button = document.querySelector( "button" );
button.addEventListener( "click", function( event ) { console.log( this ); } );
Gdy użytkownik wejdzie w interakcję z elementem button
we wcześniejszym fragmencie kodu, efektem będzie
obiekt elementu zawierający sam <button>
:
> Button {}
Gdy funkcja strzałki jest używana jako wywołanie zwrotne detektora zdarzeń, wartość
Pole this
jest ponownie dostarczane przez najbliższy otaczający kontekst wykonania. Na górze
na poziomie, co oznacza, że this
w funkcji wywołania zwrotnego modułu obsługi zdarzeń to
globalThis
(lub undefined
w trybie ścisłym):
let button = document.querySelector( "button" );
button.addEventListener( "click", ( event ) => { console.log( this ); } );
> undefined
Tak jak w przypadku każdego innego obiektu, gdy użyjesz funkcji call()
, bind()
lub apply()
metody odwoływania się do funkcji wywołania zwrotnego detektora zdarzeń, this
bezpośrednio odwołuje się do obiektu:
let button = document.querySelector( "button" );
let myObject = {
"myValue" : true
};
function handleClick() {
console.log( this );
}
button.addEventListener( "click", handleClick.bind( myObject ) );
> Object { myValue: true }
Sprawdź swoją wiedzę
Jaki jest obiekt globalny w przypadku skryptu działającego w przeglądarce?
do których this
odnosi się poza funkcją lub
w kontekście obiektu?
undefined
window
browser