深入理解this機制系列第一篇——this的4種綁定規則 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　如果要問javascript中哪兩個知識點容易混淆，作用域查詢和this機制絕對名列前茅。前面的作用域系列已經詳細介紹過作用域的知識。本系列開始將介紹javascript的另一大山脈——this機制。本文是該系列的第一篇——this的4種綁定規則

默認綁定

　　全局環境中，this默認綁定到window

console.log(this === window);//true

　　函數獨立調用時，this默認綁定到window

function foo(){
    console.log(this === window);
}
foo(); //true

　　被嵌套的函數獨立調用時，this默認綁定到window

//雖然test()函數被嵌套在obj.foo()函數中，但test()函數是獨立調用，而不是方法調用。所以this默認綁定到window
var a = 0;
var obj = {
    a : 2,
    foo:function(){
            function test(){
                console.log(this.a);
            }
            test();
    }
}
obj.foo();//0

【IIFE】

　　IIFE立即執行函數實際上是函數聲明后直接調用執行

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

//等價于上例

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

【閉包】

　　類似地，test()函數是獨立調用，而不是方法調用，所以this默認綁定到window

　　[注意]函數共有4種調用方式，函數調用相關內容移步至此

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

　　由于閉包的this默認綁定到window對象，但又常常需要訪問嵌套函數的this，所以常常在嵌套函數中使用var that = this，然后在閉包中使用that替代this，使用作用域查找的方法來找到嵌套函數的this值

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

隱式綁定

　　一般地，被直接對象所包含的函數調用時，也稱為方法調用，this隱式綁定到該直接對象

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

//foo()函數的直接對象是obj1，this隱式綁定到obj1
obj1.foo();//1

//foo()函數的直接對象是obj2，this隱式綁定到obj2
obj1.obj2.foo();//2

隱式丟失

　　隱式丟失是指被隱式綁定的函數丟失綁定對象，從而默認綁定到window。這種情況容易出錯卻又常見

【函數別名】

var a = 0;
function foo(){
    console.log(this.a);
};
var obj = {
    a : 2,
    foo:foo
}
//把obj.foo賦予別名bar，造成了隱式丟失，因為只是把foo()函數賦給了bar，而bar與obj對象則毫無關系
var bar = obj.foo;
bar();//0

//等價于
var a = 0;
var bar = function foo(){
    console.log(this.a);
}
bar();//0

【參數傳遞】

var a = 0;
function foo(){
    console.log(this.a);
};
function bar(fn){
    fn();
}
var obj = {
    a : 2,
    foo:foo
}
//把obj.foo當作參數傳遞給bar函數時，有隱式的函數賦值fn=obj.foo。與上例類似，只是把foo函數賦給了fn，而fn與obj對象則毫無關系
bar(obj.foo);//0

//等價于
var a = 0;
function bar(fn){
    fn();
}
bar(function foo(){
    console.log(this.a);
});

【內置函數】

　　內置函數與上例類似，也會造成隱式丟失

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

//等價于
var a = 0;
setTimeout(function foo(){
    console.log(this.a);
},100);//0

【間接引用】

　　函數的"間接引用"一般都在無意間創建，最容易在賦值時發生，會造成隱式丟失

function foo() {
    console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
//將o.foo函數賦值給p.foo函數，然后立即執行。相當于僅僅是foo()函數的立即執行
(p.foo = o.foo)(); // 2

function foo() {
    console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
//將o.foo函數賦值給p.foo函數，之后p.foo函數再執行，是屬于p對象的foo函數的執行
p.foo = o.foo;
p.foo();//4

【其他情況】

　　在javascript引擎內部，obj和obj.foo儲存在兩個內存地址，簡稱為M1和M2。只有obj.foo()這樣調用時，是從M1調用M2，因此this指向obj。但是，下面三種情況，都是直接取出M2進行運算，然后就在全局環境執行運算結果（還是M2），因此this指向全局環境

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

(obj.foo = obj.foo)();//0

(false || obj.foo)();//0

(1, obj.foo)();//0

顯式綁定

　　通過call()、apply()、bind()方法把對象綁定到this上，叫做顯式綁定。對于被調用的函數來說，叫做間接調用

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

　　普通的顯式綁定無法解決隱式丟失問題

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

【硬綁定】

　　硬綁定是顯式綁定的一個變種，使this不能再被修改

var a = 0;
function foo(){
    console.log(this.a);
}
var obj = {
    a:2
};
var bar= function(){
    foo.call(obj);
}
//在bar函數內部手動調用foo.call(obj)。因此，無論之后如何調用函數bar，它總會手動在obj上調用foo
bar();//2
setTimeout(bar,100);//2
bar.call(window);//2

【API】

　　javascript中新增了許多內置函數，具有顯式綁定的功能，如數組的5個迭代方法：map()、forEach()、filter()、some()、every()

var id = 'window';
function foo(el){
    console.log(el,this.id);
}
var obj = {
    id: 'fn'
};
[1,2,3].forEach(foo);//1 "window" 2 "window" 3 "window"
[1,2,3].forEach(foo,obj);//1 "fn" 2 "fn" 3 "fn"

new綁定

　　如果函數或者方法調用之前帶有關鍵字new，它就構成構造函數調用。對于this綁定來說，稱為new綁定

　　【1】構造函數通常不使用return關鍵字，它們通常初始化新對象，當構造函數的函數體執行完畢時，它會顯式返回。在這種情況下，構造函數調用表達式的計算結果就是這個新對象的值

function fn(){
    this.a = 2;
}
var test = new fn();
console.log(test);//{a:2}

　　【2】如果構造函數使用return語句但沒有指定返回值，或者返回一個原始值，那么這時將忽略返回值，同時使用這個新對象作為調用結果

function fn(){
    this.a = 2;
    return;
}
var test = new fn();
console.log(test);//{a:2}

　　【3】如果構造函數顯式地使用return語句返回一個對象，那么調用表達式的值就是這個對象

var obj = {a:1};
function fn(){
    this.a = 2;
    return obj;
}
var test = new fn();
console.log(test);//{a:1}

　　[注意]盡管有時候構造函數看起來像一個方法調用，它依然會使用這個新對象作為this。也就是說，在表達式new o.m()中，this并不是o

var o = {
    m: function(){
        return this;
    }
}
var obj = new o.m();
console.log(obj,obj === o);//{} false
console.log(obj.constructor === o.m);//true

嚴格模式

　　【1】嚴格模式下，獨立調用的函數的this指向undefined

function fn(){
    'use strict';
    console.log(this);//undefined
}
fn();

function fn(){
    console.log(this);//window
}
fn();

　　【2】在非嚴格模式下，使用函數的call()或apply()方法時，null或undefined值會被轉換為全局對象。而在嚴格模式下，函數的this值始終是指定的值

var color = 'red';
function displayColor(){
    console.log(this.color);
}
displayColor.call(null);//red

var color = 'red';
function displayColor(){
    'use strict';
    console.log(this.color);
}
displayColor.call(null);//TypeError: Cannot read property 'color' of null