U ovom ćete uputstvu uz primjere naučiti o JavaScript-ovoj ključnoj riječi.
U JavaScript-u thisključna riječ odnosi se na objekt gdje se zove.
1. ovaj Inside Global Scope
Kada thisse koristi sam, thisodnosi se na globalni objekt ( windowobjekt u preglednicima). Na primjer,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Ovdje this.nameje isto što i window.name.
2. ova Unutarnja funkcija
Kada thisse koristi u funkciji, thisodnosi se na globalni objekt ( windowobjekt u preglednicima). Na primjer,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. ovu funkciju unutarnjeg konstruktora
U JavaScriptu se konstruktorske funkcije koriste za stvaranje objekata. Kada se funkcija koristi kao konstruktorska funkcija, thisodnosi se na objekt unutar kojeg se koristi. Na primjer,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Izlaz
Osoba (ime: "Jack") Jack
Ovdje se thisodnosi na objekt person1. Zato person1.namenam daje Jack.
Napomena : Kada thisse koristi s ES6 klasama, odnosi se na objekt unutar kojeg se koristi (slično funkcijama konstruktora).
4. ova metoda unutarnjeg objekta
Kada thisse koristi unutar metode objekta, thisodnosi se na objekt u kojem se nalazi. Na primjer,
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();
Izlaz
(ime: "Jack", dob: 25 godina, pozdrav: ƒ) Jack
U gornjem primjeru thisodnosi se na personobjekt.
5. ova Unutarnja unutarnja funkcija
Kada pristupite thisunutarnjoj funkciji (unutar metode), thisodnosi se na globalni objekt. Na primjer,
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();
Izlaz
(ime: "Jack", dob: 25, pozdrav: ƒ) 25 Prozor (…) nedefiniran
Ovdje se thisiznutra innerFunc()odnosi na globalni objekt jer se innerFunc()nalazi unutar metode.
Međutim, this.agevan se innerFunc()odnosi na personobjekt.
6. ovu funkciju Inside Arrow
Unutar funkcije strelice thisodnosi se na nadređeni opseg. Na primjer,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Funkcije strelica nemaju svoje this. Kada koristite thisunutar funkcije strelice, thisodnosi se na njezin nadređeni objekt opsega. Na primjer,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Ovdje se this.nameunutar hi()funkcije odnosi na greetobjekt.
Funkciju strelice možete koristiti i za rješavanje problema s undefinedkorištenjem funkcije unutar metode (kao što je prikazano u primjeru 5). Na primjer,
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();
Izlaz
(ime: "Jack", dob: 25, pozdrav: ƒ) 25 (ime: "Jack", dob: 25, pozdrav: ƒ) 25
Ovdje innerFunc()se definira pomoću funkcije strelice. Preuzima thisiz roditeljskog opsega. Dakle, this.agedaje 25 .
Kada se upotrebljava funkcija strelice this, odnosi se na vanjski opseg.
7. ovo Unutarnja funkcija sa strogim načinom rada
Kada thisse koristi u funkciji sa strogim načinom, thisje undefined. Na primjer,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Napomena : Kada koristite thisunutar funkcije sa strogim načinom rada, možete koristiti poziv funkcije JavaScript ().
Na primjer,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Kada proslijedite thiss call()funkcijom, greet()tretira se kao metoda thisobjekta (u ovom slučaju globalni objekt).
