JavaScript 中的 this 全面解析

JavaScript中有物件當然就少不了，this關鍵字啦！有了this關鍵字JavaScript的程式碼了也會減少點，今天我們就一起來分析一下JavaScript中的this吧！

隱式綁定

關於this，一般來說，誰呼叫了方法，該方法的this就指向誰，如：

function foo(){
    console.log(this.a)
}
var a = 3;
var obj = {
    a: 2,
    foo: foo
};
obj.foo(); // 输出2,因为是obj调用的foo，所以foo的this指向了obj，而obj.a = 2

如果存在多次調用，物件屬性引用鏈只有上一層或說最後一層在調用位置中起作用，如：

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

#隱含遺失

一個最常見的this綁定問題就是被隱式綁定的函數會遺失綁定對象，也就是說他回應用預設綁定，從而把this綁定到全域物件或undefined上，取決於是否是嚴格模式。

function foo() {
    console.log( this.a )
}
var obj1 = {
    a: 2,
    foo: foo
}
var bar = obj1.foo; // 函数别名！
var a = "oops, global"; // a是全局对象的属性
bar(); // "oops, global"

雖然bar是obj.foo的一個引用，但是實際上，它引用的是foo函數本身，因此此時的bar()其實是一個不帶任何修飾的函數調用，因此應用了預設綁定

一個更微妙、更常見且更出乎意料的情況發生在傳入回呼函數時：

function foo() {
    console.log( this.a )
}
function doFoo( fn ){
    // fn 其实引用的是 foo
    fn(); // <-- 调用位置！
}
var obj = {
    a: 2,
    foo: foo
}
var a = "oops, global"; // a是全局对象的属性
doFoo( obj.foo ); // "oops, global"

參數傳遞其實就是一種隱式賦值，因此我們傳入函數時也會被隱式賦值，所以結果和上一個例子一樣，如果把函數傳入語言內建的函數而不是傳入自己宣告的函數（如setTimeout等），結果也是一樣的

明確綁定

簡單的說，就是指定this，如：call、apply、bind、new綁定等

硬綁定

function foo( something ) {
    console.log( this.a, something)
    return this.a + something
}
var obj = {
    a: 2
}
var bar = function() {
    return foo.apply( obj, arguments)
}
var b = bar(3); // 2 3
console.log(b); // 5

這裡簡單做一下解釋： 在bar函數中，foo使用apply函數綁定了obj，也就是說foo中的this將指向obj，同時，使用arguments（不限制傳入參數的數量）作為參數傳入foo函數中；所以在運行bar(3)的時候，首先輸出obj.a也就是2和傳入的3，然後foo回傳了兩者的相加值，所以b的值為5

也同樣，本範例也可以使用bind:

function foo( something ) {
    console.log( this.a, something)
    return this.a + something
}
var obj = {
    a: 2
}
var bar = foo.bind(obj)
var b = bar(3); // 2 3
console.log(b); // 5

new綁定

在傳統物件導向的語言中，使用new初始化類別的時候會呼叫類別中的建構子，但JS中new的機制其實和麵向類別和語言完全不同。

使用new來呼叫函數，或者說發生建構函數呼叫時，會自動執行下面的操作：

    創建（或者說構造）一個全新的物件

    這個新物件會被執行[[Prototype]]連接

##    這個新物件會綁定到函數呼叫的this

    如果函數沒有回傳其他對象，那麼new

表達式中的函數會自動傳回這個新物件如：

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

使用new來呼叫foo(…)時，我們會建構一個新物件並把它綁定到foo(…)呼叫中的this上。 new是最後一種可以影響函數呼叫時this綁定行為的方法，我們稱之為new綁定。

this的優先權

#毫無疑問，預設綁定的優先權是四條規則中最低的，所以我們可以先不考慮它。

隱式綁定和明確綁定哪個優先權更高？讓我們來測試一下：

function foo(a){
    console.log(this.a)
}
var obj1 = {
    a: 2,
    foo: foo
}
var obj2 = {
    a: 3,
    foo: foo
}
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call(obj2); // 3
obj2.foo.call(obj1); // 2

可以看到，顯式綁定優先權較高，也就是說在判斷時應當先考慮是否可以存在顯式綁定。

現在我們要搞清楚new綁定和隱式綁定的優先權誰高誰低 ：

function foo(something){
    this.a = something
}
var obj1 = {
    foo: foo
}
var obj2 = {}
obj1.foo(2); 
console.log(obj1.a); // 2
obj1.foo.call(obj2,3);
console.log(obj2.a); // 3
var bar = new obj1.foo(4)
console.log(obj1.a); // 2
console.log(bar.a); // 4

可以看到new綁定比隱式綁定優先權高。但是new綁定和顯式綁定誰的優先權更高呢？

function foo(something){
    this.a = something
}
var obj1 = {}
var bar = foo.bind(obj1);
bar(2);
console.log(obj1.a); // 2
var baz = new bar(3);
console.log(obj1.a); // 2
console.log(baz.a); // 3

可以看到，new綁定修改了硬綁定中的this，所以new綁定的優先權比顯式綁定更高。

之所以要在new中使用硬綁定函數，主要目的是預先設定函數的一些參數，這樣在使用new進行初始化時就可以只傳入其餘的參數。 bind(…)的功能之一就是可以把除了第一個參數（第一個參數用於綁定this）之外的其他參數都傳給下層的函數（這種技術稱為“部分應用”，是「柯里化」的一種）。舉例來說：

function foo(p1,p2){
    this.val = p1 + p2;
}
// 之所以使用null是因为在本例中我们并不关心硬绑定的this是什么
// 反正使用new时this会被修改
var bar = foo.bind(null,'p1');
var baz = new bar('p2');
baz.val; // p1p2
}

柯里化:在直覺上，柯里化聲稱「如果你固定某些參數，你將得到接受餘下參數的一個函數」。所以對於有兩個變數的函數yx，如果固定了y = 2，則得到有一個變數的函數2x

This在箭頭函數中的應用

箭頭函數不使用this的四種標準規則，而是根據外層（函數或全域）作用域來決定this。

我们来看一下箭头函数的词法作用域：

function foo() {
    // 返回一个箭头函数
    return (a) => {
        // this继承自foo()
        console.log(this.a)
    };
}
var obj1 = {
    a: 2
};
var obj2 = {
    a: 3
};
var bar = foo.call(obj1);
bar.call(obj2); // 2, 不是3！

foo()内部创建的箭头函数会捕获调用时foo()的this。由于foo()的this绑定到obj1，bar（引用箭头函数）的this也会绑定到obj1，箭头函数的绑定无法被修改。（new也不行!）

总结

如果要判断一个运行中的函数的this绑定，就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断this的绑定对象。

由new调用？绑定到新创建的对象。

由call或者apply（或者bind）调用？绑定到指定的对象。

由上下文对象调用？绑定到那个上下文对象。

默认：在严格模式下绑定到undefined，否则绑定到全局对象。

相关推荐：

JavaScript学习笔记之基础语法

JavaScript 是真正的 OOP 语言吗？

如何用JavaScript修改伪类样式

以上是JavaScript 中的 this 全面解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！