this总结【1】—— this概览

摘要：是什么这个单词是一个代词，所以应该是指代某些东西搞清楚的关键之处，就是要搞清楚指代了什么那么到底指代了什么呢就像你平时指着一个苹果说指着一个香蕉说同样，也会因为情况的不同而不同在中按照常规理解，的值是什么取决于函数如何被调用然而，的值是什么

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 的值到底是什么？一次说清楚