FE.ES-理解ECMA Javascript的this

seasonley發表於2019-02-16
JavaScript

this 實際上是在函式被呼叫時發生的繫結，它指向什麼完全取決於函式的呼叫位置（也就是函式的呼叫方法）。

四條規則：(你不知道的JS)

1. 預設繫結

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

無論是否在嚴格模式下，在全域性執行上下文中（在任何函式體外部）this 都指代全域性物件。(MDN)
在嚴格模式下，this將保持他進入執行上下文時的值，如果 this 沒有被執行上下文（execution context）定義，那它將保持為 undefined。(MDN)

function foo() {
    "use strict";
    console.log( this.a );
}
var a = 2;
foo(); // TypeError: this is undefined

2. 隱式繫結/丟失

當函式作為物件裡的方法被呼叫時，它們的 this 是呼叫該函式的物件，且繫結只受最靠近的成員引用的影響。(MDN)

//隱式繫結
function foo() {
    console.log( this.a );
}
var obj2 = {
    a: 42,
    foo: foo
};
var obj1 = {
    a: 2,
    obj2: obj2
};
obj1.obj2.foo(); // 42
//隱式丟失
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"

3. 顯示繫結

如果要想把 this 的值從一個上下文傳到另一個，就要用 call 或者apply 方法。(MDN)
呼叫f.bind(someObject)會建立一個與f具有相同函式體和作用域的函式，但是在這個新函式中，this將永久地被繫結到了bind的第一個引數，無論這個函式是如何被呼叫的。

var obj = {
    count: 0,
    cool: function coolFn() {
    if (this.count < 1) {
        setTimeout( function timer(){
            this.count++; // this 是安全的
                            // 因為 bind(..)
            console.log( "more awesome" );
            }.bind( this ), 100 ); // look, bind()!
        }
    }
};
obj.cool(); // 更酷了。

硬繫結

建立一個包裹函式，傳入所有的引數並返回接收到的所有值。
硬繫結會大大降低函式的靈活性，使用硬繫結之後就無法使用隱式繫結或者顯式繫結來修改 this 。

// 簡單的輔助繫結函式
function bind(fn, obj) {
    return function() {
        return fn.apply( obj, arguments );
    };
}

軟繫結

給預設繫結指定一個全域性物件和 undefined 以外的值，那就可以實現和硬繫結相同的效果，同時保留隱式繫結或者顯式繫結修改 this 的能力。

Function.prototype.softBind = function(obj) {
    var fn = this;
    var curried = [].slice.call( arguments, 1 );// 捕獲所有 curried 引數
    var bound = function() {
        return fn.apply(
            (!this || this === (window || global))?obj : this
            curried.concat.apply( curried, arguments )
        );
    };
    bound.prototype = Object.create( fn.prototype );
    return bound;
};

4. new 繫結

當一個函式用作建構函式時（使用new關鍵字），它的this被繫結到正在構造的新物件。(MDN)
使用 new 來呼叫函式，或者說發生建構函式呼叫時，會自動執行下面的操作(你不知道的JS)

  1. 建立（或者說構造）一個全新的物件。
  2. 這個新物件會被執行 [[ 原型 ]] 連線。
  3. 這個新物件會繫結到函式呼叫的 this 。
  4. 如果函式沒有返回其他物件，那麼 new 表示式中的函式呼叫會自動返回這個新物件。
function foo(a) {
    this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2

四條規則優先順序

new 繫結 > 顯式繫結 > 隱式繫結 > 預設繫結

  1. 函式是否在 new 中呼叫（ new 繫結）？如果是的話 this 繫結的是新建立的物件。

     var bar = new foo()

  2. 函式是否通過 call 、 apply （顯式繫結）或者硬繫結呼叫？如果是的話， this 繫結的是指定的物件。
    另外：如果繫結 null 或者 undefined ，實際應用的是預設繫結規則。

     var bar = foo.call(obj2)

  3. 函式是否在某個上下文物件中呼叫（隱式繫結）？如果是的話， this 繫結的是那個上下文物件。

     var bar = obj1.foo()

  4. 如果都不是的話，使用預設繫結。如果在嚴格模式下，就繫結到 undefined ，否則繫結到全域性物件。

     var bar = foo()

    其中：間接引用函式會應用預設繫結規則

    function foo() {
    console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
(p.foo = o.foo)(); // 2

例外

1. 箭頭函式

箭頭函式不使用 this 的四種標準規則，而是根據外層（函式或者全域性）作用域來決定 this 。
在箭頭函式中，this與封閉詞法上下文的this保持一致。(MDN)
箭頭函式會繼承外層函式呼叫的 this 繫結（無論 this 繫結到什麼）。這其實和self = this 機制一樣。
箭頭函式的繫結無法被修改。

2. nodejs

setTimeout(function() { 
    console.log(this) 
    //瀏覽器中：window 
    //nodejs中：Timeout例項
}, 0)

其他解釋

https://www.zhihu.com/questio…
func(p1, p2) 等價於
func.call(undefined, p1, p2)

obj.child.method(p1, p2) 等價於
obj.child.method.call(obj.child, p1, p2)

如果你傳的 context 就 null 或者 undefined，那麼 window 物件就是預設的 context（嚴格模式下預設 context 是 undefined）

例子

    var number = 50;
    var obj = {
        number: 60,
        getNum: function () {
        var number = 70;
        return this.number;
    }
    }; 

    alert(obj.getNum());
    alert(obj.getNum.call());
    alert(obj.getNum.call({number:20}));

參考資料：
深入理解JavaScript系列（13）：This? Yes,this!
MDN-this
《你不知道的JS上卷》閱讀小記之setTimeout的this指向問題Script
JavaScript 的 this 原理-阮一峰
如何理解 JavaScript 中的 this 關鍵字？-方應杭-知乎
JS this 相關問題

相關文章