I den här handledningen lär du dig om JavaScript är det här nyckelordet med hjälp av exempel.
I JavaScript thishänvisar nyckelord till objektet där det heter.
1. detta Inside Global Scope
När det thisanvänds ensamt thisavser det globala objektet ( windowobjekt i webbläsare). Till exempel,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Här this.nameär samma som window.name.
2. denna insida funktion
När den thisanvänds i en funktion thisavser det globala objektet ( windowobjekt i webbläsare). Till exempel,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. denna Inside Constructor-funktion
I JavaScript används konstruktörsfunktioner för att skapa objekt. När en funktion används som en konstruktionsfunktion, thisavser det objektet som det används i. Till exempel,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Produktion
Person (namn: "Jack") Jack
Här thisavser person1-objektet. Det är därför, person1.nameger oss Jack.
Obs : När det thisanvänds med ES6-klasser hänvisar det till objektet som det används i (liknar konstruktorfunktioner).
4. denna Inside Object Method
När det thisanvänds i ett föremåls metod thishänvisar det till objektet det ligger i. Till exempel,
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();
Produktion
(namn: "Jack", ålder: 25, hälsar: ƒ) Jack
I exemplet ovan thishänvisar till personobjektet.
5. denna inre inre funktion
När du går thisin i en inre funktion (inuti en metod) thishänvisar det till det globala objektet. Till exempel,
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();
Produktion
(namn: "Jack", ålder: 25, hälsning: ƒ) 25 Fönster (…) odefinierad
Här hänvisar thisinsidan innerFunc()till det globala objektet eftersom det innerFunc()är inuti en metod.
Men this.ageutanför innerFunc()refererar till personobjektet.
6. denna inre pilfunktion
Inne i pilfunktionen thishänvisar till det överordnade omfånget. Till exempel,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Pilfunktioner har inte sina egna this. När du använder thisinuti en pilfunktion thishänvisar det till dess överordnade omfångsobjekt. Till exempel,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Här refererar funktionen till objektet this.nameinuti .hi()greet
Du kan också använda pilfunktionen för att lösa problemet med att ha undefineden funktion i en metod (som visas i exempel 5). Till exempel,
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();
Produktion
(namn: "Jack", ålder: 25, hälsning: ƒ) 25 (namn: "Jack", ålder: 25, hälsning: ƒ) 25
Här innerFunc()definieras med hjälp av pilfunktionen. Det tar thisfrån sitt överordnade omfång. Därför this.ageger 25 .
När pilfunktionen används med thishänvisar den till det yttre omfånget.
7. denna insida funktion med strikt läge
När thisanvänds i en funktion med strikt läge, thisär undefined. Till exempel,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Obs! När du använder thisen funktion i strikt läge kan du använda JavaScript-funktionssamtal ().
Till exempel,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
När du klarar thisav call()funktionen greet()behandlas som metoden för thisobjektet (globalt objekt i detta fall).
