js this 綁定機制的用法

這篇文章主要講解了js this 綁定機制的用法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

函數調用位置

與詞法作用域相反的是，this的指向由函數運行時決定，它是動態的，隨著函數調用位置變化而變化。

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

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

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

this 綁定規則

函數的調用位置決定了this的綁定對象，當我們找到調用位置后，然后判斷需要應用下面四條規則中的哪一條。

獨立函數調用

獨立函數調用，this 指向函數調用位置所在的包含環境對象。

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

作為對象的方法調用

當函數作為某個對象的方法被調用時，this 指向這個對象。

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

特別注意：雖然函數foo并不屬于obj對象，但調用位置使用obj的上下文來調用函數。我一直在強調調用位置的重要性，因為你可能一不留神就會忽略掉它，看下面的列子：

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

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

使用 .call/ .apply 綁定

每創建一個函數，這個函數就有了兩個繼承而來的方法：call和apply。

它們的第一個參數是一個對象，它們會把這個對象綁定到this，接著在調用函數時指定這個 this 。因為你可以直接指定 this 的綁定對象，因此我們稱之為顯式綁定。

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

new綁定

使用 new 來調用函數，或者說發生構造函數調用時，會自動執行下面的操作。

1. 創建（或者說構造）一個全新的對象。
2. 這個新對象會被執行[[原型]]連接，即指向構造函數的原型Foo.prototype。
3. 這個新對象會綁定到函數調用的 this 。
4. 如果函數沒有返回其他對象，那么 new 表達式中的函數調用會自動返回這個新對象。

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

使用 new 來調用 foo(..) 時，我們會構造一個新對象并把它綁定到 foo(..) 調用中的 this 上。

優先級

如果要判斷一個運行中函數的this綁定，就需要找到這個函數的直接調用位置。找到之后就可以順序應用下面這四條規則來判斷 this 的綁定對象。

1. 由 new 調用？綁定到新創建的對象。
2. 由 call 或者 apply （或者 bind ）調用？綁定到指定的對象。
3. 由上下文對象調用？綁定到那個上下文對象。
4. 默認：在嚴格模式下綁定到 undefined ，否則綁定到全局對象。

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

看完上述內容，是不是對js this 綁定機制的用法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。