很多初學者,對於this究竟是指向誰,常常搞不清楚。
this會根據所在位置,而指向不同的目標,以下就幾種常見的情況來一一討論:
var x = 'Hello World';
function getValue() {
console.log(this.x);
}
getValue(); //Hello World
這裡的this,指的是全域物件,window,在全域環境宣告變數,也意味著,在全域物件,增加屬性值。
let person = {
name: 'Mary',
age: 18,
info: function () {
console.log(`person name:${this.name}`); //person name:Mary
}
}
person.info();
物件person的屬性info是函式,該函示內部的this所指向的物件,為函式所在的物件(person),不是全域物件window。
設定this的指向:
var age = 20;
var person = {
name: 'Mary',
age: 18,
info: function () {
console.log(`person name:${this.name}`);
function getAge() {
console.log(`person age:${this.age}`);
}
getAge();
}
}
person.info();
如果我們在屬性info裡面再增加一個函式,那這個函式的this會指向哪裡呢?
指向全域物件,info( )是被person物件呼叫,所以它指向person物件,但person物件並沒有呼叫getAge( ),所以它指向全域物件。
如果希望他們都能指向person物件的話,可以在info( )增加一個變數,一開始的時候,直接讓this所指向的物件,存到self。
var age = 20;
var person = {
name: 'Mary',
age: 18,
info: function () {
var self = this;
console.log(`person name:${self.name}`);
function getAge() {
console.log(`person age:${self.age}`);
}
getAge();
}
}
person.info();