摘要：是什么這個單詞是一個代詞，所以應該是指代某些東西搞清楚的關鍵之處，就是要搞清楚指代了什么那么到底指代了什么呢就像你平時指著一個蘋果說指著一個香蕉說同樣，也會因為情況的不同而不同在中按照常規理解，的值是什么取決于函數如何被調用然而，的值是什么

this這個單詞是一個代詞，所以this應該是 指代某些東西
搞清楚this的關鍵之處，就是要搞清楚this指代了什么

那么this到底指代了什么呢？
就像你平時
指著一個蘋果說 this is an apple
指著一個香蕉說 this is a banana

同樣，this也會因為情況的不同而不同

在JavaScript中
按照常規理解，this的值是什么取決于函數如何被調用
然而，this的值是什么完全取決于對應函數被call時傳入的第一個參數，而這一般是由js提前就預置好的

注意：這種方法可以判斷一般情況下的this是什么

判斷this值就看函數是怎么被調用的[函數有全局調用和方法調用]

this指向調用它的距離最近的那一個

    // 例子
    function fn() {
        console.log(this)
    }

    let obj = {
        a: "",
        fn: fn
    }

    // 場景一
    fn() // window[瀏覽器] or global[node]

    // 場景二
    obj.fn() // obj

    // 場景一：全局調用
    // 場景二：方法調用

function VS method

function xx(){...} 是function

method某個對象下面的方法 如 obj = {fn:function(){...}} obj.fn() 叫做方法[method]

更詳細的說明請看深入淺出面向對象和原型【概念篇1】

    // test1
    function fn() {
        console.log(this)
    }

    let obj1 = {
        wrapper: {
            a: "a",
            fn: fn
        }
    }
    obj1.wrapper.fn() // ?
    // fn()是被當做wrapper的方法被調用的，所以this是wrapper
    // this指向調用它的距離最近的那一個

    // test2
    function executeCallback(cb) {
        cb()
    }

    executeCallback(obj1.wrapper.fn)
    // this是全局變量
    // 因為executeCallback函數是把cb當成全局函數進行調用的
    // 不像是obj.cb()，若是obj.cb()就是方法調用了

按照常規理解已經可以解決大部分的面試、筆試題了，但如果想究this之根本，還需要通過call

注意：通過對call的初步理解，你可以知道this的值為什么是這樣的，但這種思維不方便你猜this

首先，我們要清楚this在函數中的位置

    function fn1([this], parameter) {
        // this就是隱藏的第一個參數，而且永遠是第一個參數
        console.log(this)
    }

其次，我們要知道call的語法

    fun.call(thisArg, arg1, arg2, ...)

OK，現在我們要知道你在使用call的時候
call傳入的第一個參數可以指定(改變)fn1的第一個參數，也就是隱藏的this

所以，為什么直接全局調用fn1時，打印出來的是window呢？
因為js已經幫你call了

    // 你寫的代碼
    fn1()

    // 在你寫上面代碼的時候，js幫你寫了一行你看不到的代碼
    fn1().call(undefined)

    // 你可能回問：這樣打出來的值應該是undefined呀
    // 但瀏覽器有個機制
    // 如果你傳的 thisArg 就 null 或者 undefined，那么 window 對象就是默認的 context（嚴格模式下默認 context 是 undefined）

我們重新來看待一下全局調用和方法調用，以及js是如何用call指定this的

    // 例子
    function fn() {
        console.log(this)
    }

    let obj = {
        a: "",
        fn: fn
    }

    // 場景一
    fn() // window[瀏覽器] or global[node]
    // js幫你寫的代碼
    fn().call(undefined)

    // 場景二
    obj.fn() // obj
    // js幫你寫的代碼
    obj.fn().call(obj)

小測試(小陷阱)

    let module = {
        x: 42,
        getX: function () {
            return this.x;
        }
    }

    let retrieveX = module.getX;
    console.log(retrieveX()); // undefined
    console.log(module.getX()) // 42

嚴格模式下只需要注意一點就行，其它情況下與非嚴格模式相同

全局作用域里函數中的this是undefined

function test() {
    "use strict"
    console.log(this) 
}
test() // undefined

所以，在使用構造函數時，如果忘了加new，this不再指向全局對象，而是報錯，因為這就是函數的全局調用

let People = function (name) {
    "use strict"
    this.name = name
}
People() // Cannot set property "name" of undefined

function fn() {
    console.log(this)
}

arr[fn, fn2, fn3]

arr[0]() // ??

// answer:arr

// 解析
// 數組也是對象的一種
// arr[0]() 可以看做 arr.0().call(arr)

// 例子一
function fn0() {
    function fn() {
        console.log(this);
    }

    fn();
}

fn0(); // fn中this是全局變量

// 例子二
let a = {
    b: function () {
        console.log(this) // {b:fn}
        function xx() {
            console.log(this) // window
        }
        xx()
    }
}
a.b()

document.addEventListener("click", function (e) {
    console.log(this);
    setTimeout(function () {
        console.log(this); // 這里的this是全局變量
    }, 200);
}, false);

document.querySelector("div").addEventListener("click",function (e) {
    console.log(this) // 

})
// 事件里的this指向的是觸發事件的DOM節點

請看深入淺出面向對象和原型【番外篇——重新認識new】

如果幾種復雜情況下的this你看完了，你應該會有疑惑
為啥我明白了全局調用和方法調用，但this的值仍然和我推斷的不一樣呢？

我說過了，this的值是call的第一個參數，js已經給很多this進行call了

所以，總結一下

this的值是什么，你別猜，很可能會和你想的不一樣

console出來或者去看文檔、看源碼才是最穩妥的選擇

如果你非要猜，就套用一下我這篇博客寫到的這幾種情況

如果你怕猜錯，又要用到this，很簡單，直接用bind去強制指定this

關于call/apply/bind 請看this總結【2】—— call/apply和bind

this 的值到底是什么？一次說清楚