Šajā apmācībā jūs uzzināsit par JavaScript šo atslēgvārdu, izmantojot piemērus.
JavaScript valodā thisatslēgvārds attiecas uz objektu, kur to sauc.
1. šī iekšējā globālā darbības joma
Ja thisto lieto atsevišķi, tas thisattiecas uz globālo objektu ( windowobjekts pārlūkprogrammās). Piemēram,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Šeit this.nameir tas pats, kas window.name.
2. šī iekšējā funkcija
Kad thistiek izmantots funkcijā, thisattiecas uz globālo objektu ( windowobjektu pārlūkprogrammās). Piemēram,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. šī iekšējā konstruktora funkcija
JavaScript, lai izveidotu objektus, tiek izmantotas konstruktora funkcijas. Ja funkcija tiek izmantota kā konstruktora funkcija, thisattiecas uz objektu, kurā tā tiek izmantota. Piemēram,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Rezultāts
Persona (vārds: "Džeks") Džeks
Šeit thisattiecas uz objektu person1. Tāpēc person1.namedod mums Džeku.
Piezīme : Ja thisto lieto kopā ar ES6 klasēm, tas attiecas uz objektu, kurā tas tiek izmantots (līdzīgi kā konstruktora funkcijās).
4. šī iekšējā objekta metode
Ja thistiek izmantots objekta metodē, tas thisattiecas uz objektu, kurā tas atrodas. Piemēram,
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();
Rezultāts
(vārds: "Džeks", vecums: 25, sveicināt: ƒ) Džeks
Iepriekš minētajā piemērā thisattiecas uz personobjektu.
5. šī iekšējā iekšējā funkcija
Kad piekļūstat thisiekšējai funkcijai (metodes iekšienē), tas thisattiecas uz globālo objektu. Piemēram,
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();
Rezultāts
(vārds: "Džeks", vecums: 25 gadi, sveiciens: ƒ) 25 Logs (…) nav definēts
Šeit thisiekšpuse innerFunc()attiecas uz globālo objektu, jo innerFunc()tas atrodas metodes iekšpusē.
Tomēr this.ageārpuse innerFunc()attiecas uz personobjektu.
6. šī bultiņas funkcija
Bultiņas funkcija thisattiecas uz vecāku darbības jomu. Piemēram,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Bultu funkcijām nav savas this. Izmantojot thisbultiņas funkciju, tiek thisnorādīts uz tās vecāku darbības objektu. Piemēram,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Šeit this.nameiekšpusē hi()funkcija attiecas uz greetobjektu.
Varat arī izmantot bultiņas funkciju, lai atrisinātu problēmu, kas undefinedrodas, lietojot funkciju metodes iekšienē (kā redzams 5. piemērā). Piemēram,
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();
Rezultāts
(vārds: "Džeks", vecums: 25, sveiciens: ƒ) 25 (vārds: "Džeks", vecums: 25, sveiciens: ƒ) 25
Šeit innerFunc()tiek definēts, izmantojot bultiņas funkciju. Tas ņem thisno vecāku darbības jomas. Tādējādi this.agedod 25 .
Ja bultiņas funkcija tiek izmantota kopā this, tā attiecas uz ārējo darbības jomu.
7. šī iekšējā funkcija ar stingru režīmu
Ja thisto lieto funkcijā ar stingru režīmu, thisir undefined. Piemēram,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Piezīme . Izmantojot thisfunkciju stingrā režīmā, varat izmantot JavaScript funkciju izsaukumu ().
Piemēram,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Kad jūs nododat thisar call()funkciju, tas greet()tiek uzskatīts par objekta metodi this(šajā gadījumā globālo objektu).
