W tym samouczku dowiesz się na temat tego słowa kluczowego w języku JavaScript na podstawie przykładów.
W JavaScript thissłowo kluczowe odnosi się do obiektu, w którym zostało wywołane.
1. niniejszy Inside Global Scope
Kiedy thisjest używane samodzielnie, thisodnosi się do obiektu globalnego ( windowobiektu w przeglądarkach). Na przykład,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Tutaj this.namejest to samo co window.name.
2. ta funkcja wewnętrzna
Kiedy thisjest używane w funkcji, thisodnosi się do obiektu globalnego ( windowobiektu w przeglądarkach). Na przykład,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. ta funkcja konstruktora wewnętrznego
W JavaScript funkcje konstruktorów służą do tworzenia obiektów. Gdy funkcja jest używana jako funkcja konstruktora, thisodnosi się do obiektu, w którym jest używana. Na przykład,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Wynik
Osoba (imię: „Jack”) Jack
Tutaj thisodnosi się do obiektu person1. Dlatego person1.namedaje nam Jack.
Uwaga : gdy thisjest używany z klasami ES6, odnosi się do obiektu, w którym jest używany (podobnie do funkcji konstruktora).
4. ta metoda Inside Object
Kiedy thisjest używane wewnątrz metody obiektu, thisodnosi się do obiektu, w którym się znajduje. Na przykład,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); console.log(this.name); ) ) person.greet();
Wynik
(imię: „Jack”, wiek: 25 lat, pozdrawiam: ƒ) Jack
W powyższym przykładzie thisodnosi się do personobiektu.
5. ta funkcja wewnętrzna wewnętrzna
Kiedy uzyskujesz dostęp thisdo funkcji wewnętrznej (wewnątrz metody), thisodwołuje się do obiektu globalnego. Na przykład,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); // (name: "Jack", age… ) console.log(this.age); // 25 // inner function function innerFunc() ( // this refers to the global object console.log(this); // Window (… ) console.log(this.age); // undefined ) innerFunc(); ) ) person.greet();
Wynik
(imię: „Jack”, wiek: 25 lat, pozdrawiam: ƒ) 25 Okno (…) undefined
Tutaj thiswewnątrz innerFunc()odnosi się do obiektu globalnego, ponieważ innerFunc()znajduje się wewnątrz metody.
Jednak na this.agezewnątrz innerFunc()odnosi się do personobiektu.
6. ta funkcja strzałki wewnętrznej
Wewnątrz funkcji strzałkowej thisodwołuje się do zakresu nadrzędnego. Na przykład,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Funkcje strzałkowe nie mają własnych this. Kiedy używasz thiswewnątrz funkcji strzałkowej, thisodwołuje się do jej nadrzędnego obiektu zasięgu. Na przykład,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Tutaj this.namewewnątrz hi()funkcja odnosi się do greetobiektu.
Możesz również użyć funkcji strzałki, aby rozwiązać problem posiadania undefinedfunkcji w metodzie (jak pokazano w przykładzie 5). Na przykład,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); console.log(this.age); // inner function let innerFunc = () => ( // this refers to the global object console.log(this); console.log(this.age); ) innerFunc(); ) ) person.greet();
Wynik
(imię: „Jack”, wiek: 25, powitanie: ƒ) 25 (imię: „Jack”, wiek: 25, powitanie: ƒ) 25
Tutaj innerFunc()definiuje się za pomocą funkcji strzałki. Bierze thisz zakresu nadrzędnego. Stąd this.agedaje 25 .
Kiedy funkcja strzałki jest używana z this, odnosi się do zakresu zewnętrznego.
7. ta funkcja wewnętrzna z trybem ścisłym
Kiedy thisjest używane w funkcji z trybem ścisłym, thisjest undefined. Na przykład,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Uwaga : Używając thisfunkcji w trybie ścisłym, możesz użyć wywołania funkcji JavaScript ().
Na przykład,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Kiedy przekazujesz thisz call()funkcją, greet()traktowany jest jako metoda thisobiektu (w tym przypadku obiekt globalny).
