Šioje pamokoje su pavyzdžiais sužinosite apie „JavaScript“ šį raktinį žodį.
„JavaScript“ thisraktinis žodis reiškia objektą, kuriame jis vadinamas.
1. tai „Inside Global Scope“
Kai thisnaudojamas atskirai, thisnurodo visuotinį objektą ( windowobjektą naršyklėse). Pavyzdžiui,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Čia this.nametas pats kaip window.name.
2. ši vidinė funkcija
Kai thisnaudojamas funkcijoje, thisnurodo visuotinį objektą ( windowobjektą naršyklėse). Pavyzdžiui,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. ši vidinė konstruktoriaus funkcija
„JavaScript“ sistemoje objektų kūrimui naudojamos konstruktoriaus funkcijos. Kai funkcija naudojama kaip konstruktoriaus funkcija, thisnurodo objektą, kuriame ji naudojama. Pavyzdžiui,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Rezultatas
Asmuo (vardas: „Džekas“) Džekas
Čia thisnurodo objektą asmuo1. Štai kodėl, person1.namesuteikia mums Džekas.
Pastaba : kai thisnaudojamas su ES6 klasėmis, jis nurodo objektą, kuriame jis naudojamas (panašiai kaip konstruktoriaus funkcijos).
4. šis „Inside Object“ metodas
Kai thisnaudojamas objekto metodo viduje, thisnurodo objektą, kuriame jis yra. Pavyzdžiui,
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();
Rezultatas
(vardas: „Džekas“, amžius: 25, pasveikink: ƒ) Džekas
Ankstesniame pavyzdyje thisnurodo personobjektą.
5. ši vidinė vidinė funkcija
Kai pasiekiate thisvidinę funkciją (metodo viduje), thisreiškia globalų objektą. Pavyzdžiui,
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();
Rezultatas
(vardas: „Džekas“, amžius: 25, pasisveikink: ƒ) 25 Langas (…) neapibrėžtas
Čia thisviduje innerFunc()reiškia globalų objektą, nes innerFunc()jis yra metodo viduje.
Tačiau this.ageišorė innerFunc()nurodo personobjektą.
6. ši rodyklės vidinė funkcija
Rodyklės funkcija thisnurodo pirminę sritį. Pavyzdžiui,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Rodyklių funkcijos neturi savo this. Kai thisnaudojate rodyklės funkciją, thisnurodo jos pirminės apimties objektą. Pavyzdžiui,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Čia this.nameviduje hi()funkcija nurodo greetobjektą.
Taip pat galite naudoti rodyklės funkciją, kad išspręstumėte problemą, susijusią undefinedsu funkcijos naudojimu metodo viduje (kaip parodyta 5 pavyzdyje). Pavyzdžiui,
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();
Rezultatas
(vardas: „Džekas“, amžius: 25, pasisveikinimas: ƒ) 25 (vardas: „Džekas“, amžius: 25, pasisveikinimas: ƒ) 25
Čia innerFunc()apibrėžiama naudojant rodyklės funkciją. Tai perima thisiš savo tėvų taikymo srities. Vadinasi, this.ageduoda 25 .
Kai rodyklės funkcija naudojama kartu this, ji nurodo išorinę sritį.
7. ši vidinė funkcija su griežtu režimu
Kai thisnaudojamas griežto režimo funkcijoje, thisyra undefined. Pavyzdžiui,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Pastaba : Kai naudojate thisfunkciją griežto režimo viduje, galite naudoti „JavaScript“ funkcijos iškvietimą ().
Pavyzdžiui,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Kai praeisite thissu call()funkcija, greet()bus traktuojamas kaip objekto metodas this(šiuo atveju globalus objektas).
