面對對象（四）對象的方法中this

Betta 發(fā)布于2019-08-26 10:09 / 2994人閱讀

摘要：但是，下面這幾種用法，都會改變的指向。情況一情況二情況三上面代碼中，就是一個值。等同于上面代碼中，是多層對象內(nèi)部的一個方法。為求簡便，將其賦值給變量，結(jié)果調(diào)用時，指向了頂層對象。

var obj ={
foo: function () {

console.log(this);

}
};

obj.foo() // obj
上面代碼中，obj.foo方法執(zhí)行時，它內(nèi)部的this指向obj。
但是，下面這幾種用法，都會改變this的指向。

// 情況一
(obj.foo = obj.foo)() // window
// 情況二
(false || obj.foo)() // window
// 情況三
(1, obj.foo)() // window
上面代碼中，obj.foo就是一個值。這個值真正調(diào)用的時候，運行環(huán)境已經(jīng)不是obj了，而是全局環(huán)境，所以this不再指向obj。

可以這樣理解，JavaScript 引擎內(nèi)部，obj和obj.foo儲存在兩個內(nèi)存地址，稱為地址一和地址二。obj.foo()這樣調(diào)用時，是從地址一調(diào)用地址二，因此地址二的運行環(huán)境是地址一，this指向obj。但是，上面三種情況，都是直接取出地址二進行調(diào)用，這樣的話，運行環(huán)境就是全局環(huán)境，因此this指向全局環(huán)境。上面三種情況等同于下面的代碼。

上面三種情況等同于下面的代碼。

// 情況一
(obj.foo = function () {
console.log(this);
})()
// 等同于
(function () {
console.log(this);
})()

// 情況二
(false || function () {
console.log(this);
})()

// 情況三
(1, function () {
console.log(this);
})()

2.this所在的方法不在對象的第一層（一個函數(shù)一層）

這時this只是指向當前一層的對象，而不會繼承更上面的層

var a = {
p: "Hello",
b: {

m: function() {
  console.log(this.p);
}

}
};

a.b.m() // undefined
上面代碼中，a.b.m方法在a對象的第二層，該方法內(nèi)部的this不是指向a，而是指向a.b，因為實際執(zhí)行的是下面的代碼。

var b = {
m: function() {
console.log(this.p);
}
};

var a = {
p: "Hello",
b: b
};

(a.b).m() // 等同于 b.m()

var a = {
b: {

m: function() {
  console.log(this.p);
},
p: "Hello"

}
};

var hello = a.b.m;
hello() // undefined
上面代碼中，m是多層對象內(nèi)部的一個方法。為求簡便，將其賦值給hello變量，結(jié)果調(diào)用時，this指向了頂層對象。為了避免這個問題，可以只將m所在的對象賦值給hello，這樣調(diào)用時，this的指向就不會變。

var hello = a.b;
hello.m() // Hello