Zrozumienie słowa kluczowego „this” w JavaScript

Co robi Ten słowo kluczowe w JavaScript oznacza? A jak można go praktycznie wykorzystać w swoim programie JavaScript? Oto niektóre z częstych pytań, jakie zadają nowicjusze, a nawet niektórzy doświadczeni programiści JavaScript na temat Ten słowo kluczowe.

Jeśli jesteś jednym z tych programistów, którzy zastanawiają się, co to jest Ten chodzi o słowo kluczowe, to ten artykuł jest dla Ciebie. Zbadaj co Ten odnosi się do niego w różnych kontekstach i zapoznaj się z niektórymi problemami, aby uniknąć nieporozumień i oczywiście błędów w kodzie.

„to” w zasięgu globalnym

W kontekście globalnym Ten zwróci okno obiekt, o ile znajduje się poza funkcją. Kontekst globalny oznacza, że ​​nie umieszcza się go wewnątrz funkcji.

if(true) {
console.log(this) // returns window object
}
let i = 2
while(i < 10) {
console.log(this) // returns window object till i 9
 i++
}

Jeśli uruchomisz powyższy kod, otrzymasz obiekt okna.

„to” funkcje wewnętrzne (metody)

Kiedy jest używany wewnątrz funkcji, Ten odnosi się do obiektu, z którym jest powiązana funkcja. Wyjątkiem jest sytuacja, gdy używasz Ten w samodzielnej funkcji, w którym to przypadku zwraca okno obiekt. Zobaczmy kilka przykładów.

W poniższym przykładzie powiedz imię funkcja znajduje się wewnątrz Ja obiekt (tzn. jest to metoda). W takich przypadkach Ten odnosi się do obiektu zawierającego funkcję.

 
functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley",
 sayName: sayName
}
console.log(me.sayName()) // My name is Kingsley

Ten jest Ja obiekt, że tak powiem to imię w środku powiedz imię metoda jest dokładnie taka sama jak Moje imie.

Innym sposobem myślenia jest to, że wszystko, co po wywołaniu znajduje się po lewej stronie funkcji, tak będzie Ten. Oznacza to, że możesz ponownie wykorzystać plik powiedz imię funkcjonować w różnych obiektach i Ten za każdym razem będzie odnosić się do zupełnie innego kontekstu.

Teraz, jak już wspomniano, Ten zwraca okno obiekt, gdy jest używany wewnątrz samodzielnej funkcji. Dzieje się tak, ponieważ samodzielna funkcja jest powiązana z okno obiekt domyślnie:

functiontalk() {
returnthis
}
talk() // returns the window object

Powołanie rozmawiać() to to samo, co dzwonienie okno.rozmowa(), a wszystko, co znajduje się po lewej stronie funkcji, automatycznie stanie się Ten.

Na marginesie, Ten słowo kluczowe w funkcji zachowuje się inaczej w Ścisły tryb JavaScript (wraca nieokreślony). Należy o tym również pamiętać, gdy używasz bibliotek interfejsu użytkownika korzystających z trybu ścisłego (np. React).

Używanie „tego” z funkcją Function.bind()

Mogą zaistnieć sytuacje, w których nie można po prostu dodać funkcji do obiektu jako metody (jak w ostatniej sekcji).

Być może obiekt nie jest Twój i wyciągasz go z biblioteki. Obiekt jest niezmienny, więc nie można go po prostu zmienić. W takich przypadkach nadal możesz wykonać instrukcję funkcji oddzielnie od obiektu, używając metody Funkcja.bind() metoda.

W poniższym przykładzie powiedz imię funkcja nie jest metodą na Ja obiekt, ale nadal wiążesz go za pomocą wiązać() funkcjonować:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
const meTalk = sayName.bind(me)
meTalk() // My name is Kingsley

Niezależnie od obiektu, w który przejdziesz wiązać() zostanie użyte jako wartość Ten w tym wywołaniu funkcji.

Podsumowując, możesz użyć wiązać() na dowolnej funkcji i przekazać w nowym kontekście (obiekt). I ten obiekt zastąpi znaczenie Ten wewnątrz tej funkcji.

Używanie „tego” z funkcją Function.call()

A co, jeśli nie chcesz zwracać zupełnie nowej funkcji, a raczej po prostu wywołać funkcję po powiązaniu jej z kontekstem? Rozwiązaniem na to jest dzwonić() metoda:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
sayName.call(me) // My name is Kingsley

The dzwonić() Metoda natychmiast wykonuje funkcję zamiast zwracać inną funkcję.

Jeśli funkcja wymaga parametru, możesz przekazać go poprzez dzwonić() metoda. W poniższym przykładzie przekazujesz język do powiedzNazwa() funkcję, dzięki czemu można jej używać do warunkowego zwracania różnych wiadomości:

functionsayName(lang) {
if (lang "en") {
return`My name is ${this.name}`
 } elseif (lang "it") {
return`Io sono ${this.name}`
 }
}
const me = {
 name: "Kingsley"
}
sayName.call(me, 'en') // My name is Kingsley
sayName.call(me, 'it') // Io sono Kingsley

Jak widać, możesz po prostu przekazać do funkcji dowolny parametr jako drugi argument funkcji dzwonić() metoda. Możesz także przekazać dowolną liczbę parametrów.

The stosować() metoda jest bardzo podobna do dzwonić() I wiązać(). Jedyna różnica polega na tym, że przekazujesz wiele argumentów, oddzielając je przecinkiem dzwonić(), podczas gdy przekazujesz wiele argumentów wewnątrz tablicy za pomocą stosować().

W podsumowaniu, bind(), call() i Apply() wszystkie umożliwiają wywoływanie funkcji z zupełnie innym obiektem bez żadnego związku między nimi (tj. funkcja nie jest metodą na obiekcie).

„to” wewnętrzne funkcje konstruktora

Jeśli wywołasz funkcję z a nowy słowo kluczowe, tworzy Ten obiekt i zwraca go:

functionperson(name){
this.name = name
}
const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")
me.name // Kingsley
her.name // Sarah
him.name // Jake

W powyższym kodzie utworzyłeś trzy różne obiekty za pomocą tej samej funkcji. The nowy słowo kluczowe automatycznie tworzy powiązanie między tworzonym obiektem a obiektem Ten słowo kluczowe wewnątrz funkcji.

„to” wewnętrzne funkcje wywołania zwrotnego

Funkcje wywołania zwrotnego są różni się od zwykłych funkcji. Funkcje wywołania zwrotnego to funkcje przekazywane innej funkcji jako argument, dzięki czemu można je wykonać natychmiast po zakończeniu wykonywania funkcji głównej.

The Ten słowo kluczowe odnosi się do zupełnie innego kontekstu, gdy jest używane wewnątrz funkcji wywołania zwrotnego:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the window object

Po sekundzie wywoływania osoba konstruktora i utworzenie nowego Ja obiekt, zarejestruje obiekt okna jako wartość Ten. Zatem w przypadku użycia w funkcji wywołania zwrotnego Ten odnosi się do obiektu okna, a nie do obiektu „skonstruowanego”.

Można to naprawić na dwa sposoby. Pierwsza metoda polega na użyciu wiązać() związać osoba funkcję dla nowo konstruowanego obiektu:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }.bind(this), 1000)
}
const me = new person("Kingsley") // returns the me object

Dzięki powyższej modyfikacji, Ten w wywołaniu zwrotnym będzie wskazywało to samo Ten jako funkcja konstruktora (the Ja obiekt).

Drugi sposób rozwiązania problemu Ten w funkcjach wywołania zwrotnego polega na użyciu funkcji strzałkowych.

„to” Funkcje strzałek wewnętrznych

Funkcje strzałkowe różnią się od zwykłych funkcji. Możesz ustawić funkcję wywołania zwrotnego jako funkcję strzałkową. Dzięki funkcjom strzałek już nie potrzebujesz wiązać() ponieważ automatycznie wiąże się z nowo skonstruowanym obiektem:

functionperson(name){
this.name = name
 setTimeout(() => {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the me object

Dowiedz się więcej o JavaScript

Dowiedziałeś się już wszystkiego o słowie kluczowym „this” i jego znaczeniu we wszystkich różnych kontekstach w JavaScript. Jeśli dopiero zaczynasz przygodę z JavaScriptem, odniesiesz ogromne korzyści, poznając wszystkie podstawy JavaScriptu i jego działanie.