Ebben az útmutatóban példák segítségével megismerheti a JavaScript kulcsszavát.
A JavaScript-ben a thiskulcsszó arra az objektumra utal, ahol hívják.
1. ez az Inside Global Scope
Ha thisönmagában használjuk, akkor thisa globális objektumra ( windowa böngészőkben található objektum) utal . Például,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Itt this.nameugyanaz, mint window.name.
2. ez az Inside Function
Ha thisegy függvényben használjuk, akkor thisa globális objektumra ( windowa böngészőkben található objektum) utal . Például,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. ez az Inside Constructor funkció
A JavaScript-ben konstruktor függvényeket használnak objektumok létrehozására. Ha egy függvényt konstruktorként használunk, akkor thisarra az objektumra utalunk, amelyen belül használjuk. Például,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Kimenet
Személy (név: "Jack") Jack
Itt thisa person1 objektumra utal. Ezért person1.namead nekünk Jacket.
Megjegyzés : thisES6 osztályokkal együtt használva arra az objektumra utal, amelyen belül használják (hasonlóan a konstruktor funkcióihoz).
4. ez az Inside Object módszer
Amikor thisegy objektum metódusán belül használják, thisarra az objektumra utal, amelyben benne van. Például,
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();
Kimenet
(név: "Jack", életkor: 25, üdvözlet: ƒ) Jack
A fenti példában thisaz personobjektumra utal .
5. ez a Belső Belső Funkció
Amikor belép thisegy belső függvénybe (egy módszer belsejébe), akkor thisa globális objektumra utal. Például,
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();
Kimenet
(név: "Jack", életkor: 25, üdvözlet: ƒ) 25 Ablak (…) nincs meghatározva
Itt a thisbelső innerFunc()a globális objektumra utal, mivel innerFunc()egy módszerben van.
Azonban this.agekívül innerFunc()utal az personobjektumra.
6. ez a Belső nyíl funkció
A nyíl függvényben thisa szülő hatókörére utal. Például,
const greet = () => ( console.log(this); ) greet(); // Window (… )
A nyílfüggvényeknek nincs sajátjuk this. Amikor thisegy nyíl függvényt használ this, a szülő hatókör objektumára utal. Például,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Itt this.namebelül a hi()függvény utal az greetobjektumra.
A nyílfüggvény segítségével megoldhatja azt a problémát is, undefinedhogy egy függvényt egy metóduson belül használjon (ahogy az 5. példában látható). Például,
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();
Kimenet
(név: "Jack", életkor: 25, üdvözlet: ƒ) 25 (név: "Jack", életkor: 25, üdvözlet: ƒ) 25
Itt innerFunc()a nyíl függvény segítségével definiálható. thisSzülői köréből veszi . Ezért 25-ötthis.age ad .
Ha a nyíl függvényt használjuk this, akkor az a külső hatókörre vonatkozik.
7. ez a Belső funkció szigorú üzemmóddal
Ha thisszigorú üzemmódú funkcióban használják, thisakkor undefined. Például,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Megjegyzés : Ha thisszigorú módú funkciót használ , használhatja a JavaScript Function hívást ().
Például,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Ha átadja thisa call()függvényt, greet()akkor az thisobjektum (ebben az esetben globális objektum) módszereként kezelik .
