ECMA Javascript中this的深入理解（附範例）

這篇文章帶給大家的內容是關於ECMA Javascript中this的深入理解（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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}));

以上是ECMA Javascript中this的深入理解（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！