本文實(shí)例講述了js this 綁定機(jī)制。分享給大家供大家參考，具體如下：

函數(shù)調(diào)用位置

與詞法作用域相反的是，this的指向由函數(shù)運(yùn)行時(shí)決定，它是動(dòng)態(tài)的，隨著函數(shù)調(diào)用位置變化而變化。

要理解 this，首先要理解調(diào)用位置：調(diào)用位置就是函數(shù)在代碼中被調(diào)用的位置（而不是聲明的位置）。只有仔細(xì)分析調(diào)用位置才能回答這個(gè)問題：這個(gè)this到底引用的是什么？

function baz() {
// 當(dāng)前調(diào)用棧是：baz
// 因此，當(dāng)前調(diào)用位置是全局作用域
console.log( "baz" );
bar(); // <-- bar的調(diào)用位置
}
function bar() {
// 當(dāng)前調(diào)用棧是baz -> bar
// 因此，當(dāng)前調(diào)用位置在baz中
console.log( "bar" );
foo(); // <-- foo的調(diào)用位置
}
function foo() {
// 當(dāng)前調(diào)用棧是baz -> bar -> foo
// 因此，當(dāng)前調(diào)用位置在bar中
console.log( "foo" );
}
baz(); // <-- baz的調(diào)用位置

多數(shù)現(xiàn)代桌面瀏覽器都內(nèi)置了開發(fā)者工具，其中包含JavaScript調(diào)試器。你可以在工具中給函數(shù)的第一行代碼設(shè)置一個(gè)斷點(diǎn)，或者直接在第一行代碼之前插入一條 debugger;語句。運(yùn)行代碼時(shí)，調(diào)試器會(huì)在那個(gè)位置暫停，同時(shí)會(huì)展示當(dāng)前位置的函數(shù)調(diào)用列表，這就是你的調(diào)用棧。因此，如果你想要分析this的綁定，使用開發(fā)者工具得到調(diào)用棧，然后找到棧中第二個(gè)元素，這就是真正的調(diào)用位置。

this 綁定規(guī)則

函數(shù)的調(diào)用位置決定了this的綁定對象，當(dāng)我們找到調(diào)用位置后，然后判斷需要應(yīng)用下面四條規(guī)則中的哪一條。

獨(dú)立函數(shù)調(diào)用

獨(dú)立函數(shù)調(diào)用，this 指向函數(shù)調(diào)用位置所在的包含環(huán)境對象。

function foo() {
console.log( this.a );
}
var a = 2;
foo(); // 2

作為對象的方法調(diào)用

當(dāng)函數(shù)作為某個(gè)對象的方法被調(diào)用時(shí)，this 指向這個(gè)對象。

function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
obj.foo(); // 2

特別注意：雖然函數(shù)foo并不屬于obj對象，但調(diào)用位置使用obj的上下文來調(diào)用函數(shù)。我一直在強(qiáng)調(diào)調(diào)用位置的重要性，因?yàn)槟憧赡芤徊涣羯窬蜁?huì)忽略掉它，看下面的列子：

function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
var bar = obj.foo; // 函數(shù)別名！ 步驟1
var a = "oops, global"; // a是全局對象的屬性
bar(); // "oops, global" 步驟2

在步驟1中，變量bar是obj.foo 的一個(gè)引用，它實(shí)際指向的是函數(shù)foo。所以使用bar()與直接使用foo()并沒有不同。

使用 .call/ .apply 綁定

每創(chuàng)建一個(gè)函數(shù)，這個(gè)函數(shù)就有了兩個(gè)繼承而來的方法：call和apply。

它們的第一個(gè)參數(shù)是一個(gè)對象，它們會(huì)把這個(gè)對象綁定到this，接著在調(diào)用函數(shù)時(shí)指定這個(gè) this 。因?yàn)槟憧梢灾苯又付?this 的綁定對象，因此我們稱之為顯式綁定。

function foo() {
console.log( this.a );
}
var obj = {
a:2
};
foo.call( obj ); // 2

new綁定

使用 new 來調(diào)用函數(shù)，或者說發(fā)生構(gòu)造函數(shù)調(diào)用時(shí)，會(huì)自動(dòng)執(zhí)行下面的操作。

1. 創(chuàng)建（或者說構(gòu)造）一個(gè)全新的對象。
2. 這個(gè)新對象會(huì)被執(zhí)行[[原型]]連接，即指向構(gòu)造函數(shù)的原型Foo.prototype。
3. 這個(gè)新對象會(huì)綁定到函數(shù)調(diào)用的 this 。
4. 如果函數(shù)沒有返回其他對象，那么 new 表達(dá)式中的函數(shù)調(diào)用會(huì)自動(dòng)返回這個(gè)新對象。

function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2

使用 new 來調(diào)用 foo(..) 時(shí)，我們會(huì)構(gòu)造一個(gè)新對象并把它綁定到 foo(..) 調(diào)用中的 this 上。

優(yōu)先級

如果要判斷一個(gè)運(yùn)行中函數(shù)的this綁定，就需要找到這個(gè)函數(shù)的直接調(diào)用位置。找到之后就可以順序應(yīng)用下面這四條規(guī)則來判斷 this 的綁定對象。

1. 由 new 調(diào)用？綁定到新創(chuàng)建的對象。
2. 由 call 或者 apply （或者 bind ）調(diào)用？綁定到指定的對象。
3. 由上下文對象調(diào)用？綁定到那個(gè)上下文對象。
4. 默認(rèn)：在嚴(yán)格模式下綁定到 undefined ，否則綁定到全局對象。

一定要注意，有些調(diào)用可能在無意中使用默認(rèn)綁定規(guī)則。如果想“更安全”地忽略 this 綁定，你可以使用一個(gè)DMZ對象，比如 ø = Object.create(null) ，以保護(hù)全局對象。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

最新評論