摘要：是什么這個(gè)單詞是一個(gè)代詞，所以應(yīng)該是指代某些東西搞清楚的關(guān)鍵之處，就是要搞清楚指代了什么那么到底指代了什么呢就像你平時(shí)指著一個(gè)蘋果說指著一個(gè)香蕉說同樣，也會(huì)因?yàn)榍闆r的不同而不同在中按照常規(guī)理解，的值是什么取決于函數(shù)如何被調(diào)用然而，的值是什么

this這個(gè)單詞是一個(gè)代詞，所以this應(yīng)該是 指代某些東西
搞清楚this的關(guān)鍵之處，就是要搞清楚this指代了什么

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

同樣，this也會(huì)因?yàn)榍闆r的不同而不同

在JavaScript中
按照常規(guī)理解，this的值是什么取決于函數(shù)如何被調(diào)用
然而，this的值是什么完全取決于對(duì)應(yīng)函數(shù)被call時(shí)傳入的第一個(gè)參數(shù)，而這一般是由js提前就預(yù)置好的

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

判斷this值就看函數(shù)是怎么被調(diào)用的[函數(shù)有全局調(diào)用和方法調(diào)用]

this指向調(diào)用它的距離最近的那一個(gè)

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

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

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

    // 場(chǎng)景二
    obj.fn() // obj

    // 場(chǎng)景一：全局調(diào)用
    // 場(chǎng)景二：方法調(diào)用

function VS method

function xx(){...} 是function

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

更詳細(xì)的說明請(qǐng)看深入淺出面向?qū)ο蠛驮汀靖拍钇?】

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

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

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

    executeCallback(obj1.wrapper.fn)
    // this是全局變量
    // 因?yàn)閑xecuteCallback函數(shù)是把cb當(dāng)成全局函數(shù)進(jìn)行調(diào)用的
    // 不像是obj.cb()，若是obj.cb()就是方法調(diào)用了

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

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

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

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

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

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

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

所以，為什么直接全局調(diào)用fn1時(shí)，打印出來的是window呢？
因?yàn)閖s已經(jīng)幫你call了

    // 你寫的代碼
    fn1()

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

    // 你可能回問：這樣打出來的值應(yīng)該是undefined呀
    // 但瀏覽器有個(gè)機(jī)制
    // 如果你傳的 thisArg 就 null 或者 undefined，那么 window 對(duì)象就是默認(rèn)的 context（嚴(yán)格模式下默認(rèn) context 是 undefined）

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

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

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

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

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

小測(cè)試(小陷阱)

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

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

嚴(yán)格模式下只需要注意一點(diǎn)就行，其它情況下與非嚴(yán)格模式相同

全局作用域里函數(shù)中的this是undefined

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

所以，在使用構(gòu)造函數(shù)時(shí)，如果忘了加new，this不再指向全局對(duì)象，而是報(bào)錯(cuò)，因?yàn)檫@就是函數(shù)的全局調(diào)用

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

// 解析
// 數(shù)組也是對(duì)象的一種
// 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指向的是觸發(fā)事件的DOM節(jié)點(diǎn)

請(qǐng)看深入淺出面向?qū)ο蠛驮汀痉馄匦抡J(rèn)識(shí)new】

如果幾種復(fù)雜情況下的this你看完了，你應(yīng)該會(huì)有疑惑
為啥我明白了全局調(diào)用和方法調(diào)用，但this的值仍然和我推斷的不一樣呢？

我說過了，this的值是call的第一個(gè)參數(shù)，js已經(jīng)給很多this進(jìn)行call了

所以，總結(jié)一下

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

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

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

如果你怕猜錯(cuò)，又要用到this，很簡(jiǎn)單，直接用bind去強(qiáng)制指定this

關(guān)于call/apply/bind 請(qǐng)看this總結(jié)【2】—— call/apply和bind

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