Tässä opetusohjelmassa opit JavaScriptin avainsanasta esimerkkien avulla.
JavaScriptissä thisavainsana viittaa objektiin, johon sitä kutsutaan.
1. tämä Inside Global Scope
Kun thissitä käytetään yksin, thisviittaa globaaliin objektiin ( windowselainobjekti). Esimerkiksi,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Tässä this.nameon sama kuin window.name.
2. tämä sisäpuolinen toiminto
Kun thissitä käytetään funktiossa, thisviittaa globaaliin objektiin ( windowobjekti selaimissa). Esimerkiksi,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. tämä sisärakentajan toiminto
JavaScriptissä rakenninfunktioita käytetään objektien luomiseen. Kun funktiota käytetään konstruktorifunktiona, thisviittaa esineeseen, jonka sisällä sitä käytetään. Esimerkiksi,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Tuotos
Henkilö (nimi: "Jack") Jack
Tässä thisviittaa henkilö1-objektiin. Siksi person1.nameantaa meille Jack.
Huomaa : Kun thissitä käytetään ES6-luokkien kanssa, se viittaa esineeseen, jonka sisällä sitä käytetään (samanlainen kuin konstruktoritoiminnot).
4. tämä Inside Object -menetelmä
Kun thissitä käytetään objektin menetelmän sisällä, thisviittaa esineeseen, jossa se on. Esimerkiksi,
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();
Tuotos
(nimi: "Jack", ikä: 25, tervehdi: ƒ) Jack
Edellisessä esimerkissä thisviittaa personesineeseen.
5. tämä sisäpuolinen toiminto
Kun käytät thissisäisen toiminnon sisällä (menetelmän sisällä), thisviittaa globaaliin objektiin. Esimerkiksi,
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();
Tuotos
(nimi: "Jack", ikä: 25, tervehdys: ƒ) 25 Ikkuna (…) määrittelemätön
Tässä thissisällä innerFunc()tarkoittaa globaalia kohdetta, koska innerFunc()se on menetelmän sisällä.
Kuitenkin, this.ageulkopuolella innerFunc()viittaa personobjektin.
6. tämä sisäpuoli-nuolitoiminto
Nuolitoiminnon sisällä thisviittaa ylätason laajuuteen. Esimerkiksi,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Nuolitoiminnoilla ei ole omaa this. Kun käytät thisnuolitoimintoa, thisviittaa sen ylätason objektiin. Esimerkiksi,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Tässä toiminnon this.namesisällä hi()viitataan greetesineeseen.
Voit käyttää nuolitoimintoa myös ongelman ratkaisemiseen undefinedkäytettäessä toimintoa menetelmän sisällä (kuten esimerkissä 5 nähdään). Esimerkiksi,
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();
Tuotos
(nimi: "Jack", ikä: 25, tervehdys: ƒ) 25 (nimi: "Jack", ikä: 25, tervehdys: ƒ) 25
Tässä innerFunc()määritetään nuolitoiminnolla. Se ottaa thissen vanhemman laajuudesta. Näin ollen this.ageantaa 25 .
Kun nuolitoimintoa käytetään yhdessä this, se viittaa ulompaan laajuuteen.
7. tämä sisäinen toiminto tiukassa tilassa
Kun thissitä käytetään toiminnossa, jossa on tiukka tila, thison undefined. Esimerkiksi,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Huomaa : Kun käytät thisfunktiota tiukassa tilassa, voit käyttää JavaScript-toimintokutsu ().
Esimerkiksi,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Kun siirtää thiskanssa call()toiminto, greet()käsitellään menetelmällä thisobjektin (maailmanlaajuinen objekti tässä tapauksessa).
