js | 改變this的指向

三種狀況：

// 狀況一
(obj.foo = obj.foo)() // window
// 狀況二
(false || obj.foo)() // window
// 狀況三
(1, obj.foo)() // window
複製代碼

分析： obj.foo就是一個值。這個值真正調用的時候，運行環境已經不是obj了，而是全局環境，因此this再也不指向obj

簡述： JavaScript 引擎內部，obj和obj.foo儲存在兩個內存地址，稱爲地址一和地址二。obj.foo()這樣調用時，是從地址一調用地址二，所以地址二的運行環境是地址一，this指向obj。可是，上面三種狀況，都是直接取出地址二進行調用，這樣的話，運行環境就是全局環境，所以this指向全局環境

例子：

// 狀況一
(obj.foo = function () {
  console.log(this);
})()
// 等同於
(function () {
  console.log(this);
})()

// 狀況二
(false || function () {
  console.log(this);
})()

// 狀況三
(1, function () {
  console.log(this);
})()
複製代碼

除此以外:

嵌套對象內部的方法賦值給一個變量，this依然會指向全局對象

var a = {
        b: {
            m: function () {
                console.log(this.p);
            },
            p: "hello"
        }
    };

    var hello = a.b.m;
    hello() //undefined
複製代碼

與

var a = {
        b: {
            m: function () {
                console.log(this.p);
            },
            p: "hello"
        }
    }
    var hello = a.b;
    hello.m(); //hello
複製代碼

解析： 將其賦值給hello變量，結果調用時，this指向了頂層對象。爲了不這個問題，能夠只將m所在的對象賦值給hello，這樣調用時，this的指向就不會變

回顧：

使用箭頭函數

var a = {
        b: {
            m: ()=> {
                console.log(this.p);
            },
            p: "hello"
        }
    }
    var hello = a.b;
    hello.m(); //undefined
複製代碼

解析請看此時不能使用箭頭函數