面對(duì)對(duì)象（三）this 關(guān)鍵字

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

摘要：涵義實(shí)質(zhì)使用場(chǎng)合使用注意點(diǎn)避免多層避免數(shù)組處理方法中的避免回調(diào)函數(shù)中的綁定的方法參考鏈接涵義就是屬性或方法當(dāng)前所在的對(duì)象。上面代碼是一個(gè)文本輸入框，每當(dāng)用戶輸入一個(gè)值，就會(huì)調(diào)用回調(diào)函數(shù)，驗(yàn)證這個(gè)值是否在指定范圍。

涵義
實(shí)質(zhì)
使用場(chǎng)合
使用注意點(diǎn)
避免多層 this
避免數(shù)組處理方法中的 this
避免回調(diào)函數(shù)中的 this
綁定 this 的方法
Function.prototype.call()
Function.prototype.apply()
Function.prototype.bind()
參考鏈接

1.涵義
this就是屬性或方法“當(dāng)前”所在的對(duì)象。
只要函數(shù)被賦給另一個(gè)變量，this的指向就會(huì)變。

var A = {
name: "張三",
describe: function () {

return "姓名："+ this.name;

}
};

var name = "李四";
var f = A.describe;
f() // "姓名：李四"
上面代碼中，A.describe被賦值給變量f，內(nèi)部的this就會(huì)指向f運(yùn)行時(shí)所在的對(duì)象（本例是頂層對(duì)象）。

再看一個(gè)網(wǎng)頁編程的例子。

上面代碼是一個(gè)文本輸入框，每當(dāng)用戶輸入一個(gè)值，就會(huì)調(diào)用onChange回調(diào)函數(shù)，驗(yàn)證這個(gè)值是否在指定范圍。瀏覽器會(huì)向回調(diào)函數(shù)傳入當(dāng)前對(duì)象，因此this就代表傳入當(dāng)前對(duì)象（即文本框），然后就可以從this.value上面讀到用戶的輸入值。
2.實(shí)質(zhì)

JavaScript 語言之所以有 this 的設(shè)計(jì)，跟內(nèi)存里面的數(shù)據(jù)結(jié)構(gòu)有關(guān)系。

var obj = { foo: 5 };
上面的代碼將一個(gè)對(duì)象賦值給變量obj。JavaScript 引擎會(huì)先在內(nèi)存里面，生成一個(gè)對(duì)象{ foo: 5 }，然后把這個(gè)對(duì)象的內(nèi)存地址賦值給變量obj。也就是說，變量obj是一個(gè)地址（reference）。后面如果要讀取obj.foo，引擎先從obj拿到內(nèi)存地址，然后再?gòu)脑摰刂纷x出原始的對(duì)象，返回它的foo屬性。

2.1屬性結(jié)構(gòu)保存
原始的對(duì)象以字典結(jié)構(gòu)保存，每一個(gè)屬性名都對(duì)應(yīng)一個(gè)屬性描述對(duì)象。舉例來說，上面例子的foo屬性，實(shí)際上是以下面的形式保存的。

{
foo: {

[[value]]: 5
[[writable]]: true
[[enumerable]]: true
[[configurable]]: true

}
}
注意，foo屬性的值保存在屬性描述對(duì)象的value屬性里面。

var obj = { foo: function () {} };
這時(shí)，引擎會(huì)將函數(shù)多帶帶保存在內(nèi)存中，然后再將函數(shù)的地址賦值給foo屬性的value屬性。

{
foo: {

[[value]]: 函數(shù)的地址
...

}
}

2.2函數(shù)的this
this，它的設(shè)計(jì)目的就是在函數(shù)體內(nèi)部，指代函數(shù)當(dāng)前的運(yùn)行環(huán)境。

3.使用場(chǎng)合
（1）全局環(huán)境
只要是在全局環(huán)境下運(yùn)行，this就是指頂層對(duì)象window
（2）構(gòu)造函數(shù)
構(gòu)造函數(shù)中的this，指的是實(shí)例對(duì)象
由于this指向?qū)嵗龑?duì)象，所以在構(gòu)造函數(shù)內(nèi)部定義this.p，就相當(dāng)于定義實(shí)例對(duì)象有一個(gè)p屬性
（3）對(duì)象的方法
如果對(duì)象的方法里面包含this，this的指向就是方法運(yùn)行時(shí)所在的對(duì)象。該方法賦值給另一個(gè)對(duì)象，就會(huì)改變this的指向

4.使用注意點(diǎn)
5.避免多層 this
6.避免數(shù)組處理方法中的 this
7.避免回調(diào)函數(shù)中的 this
8.綁定 this 的方法
Function.prototype.call()
Function.prototype.apply()
Function.prototype.bind()
9.參考鏈接

this.property