本文写于 2020 年 4 月 26 日

    1. let obj = {
    2.   foo() {
    3.     console.log(this)
    4.   }
    5. }
    6. let bar = obj.foo
    7. obj.foo() // 打印出的 this 是 obj
    8. bar() // 打印出的 this 是 window

    最后两行函数的值为什么不一样？？？

    this 关键字是 JavaScript 最复杂的机制之一，它是一个特别的关键字。

    之前关于函数的文章里写过了，let bar = obj.foo可以让bar()和obj.foo()等价，那为什么 this 指向不一样？

    在学 React 的时候，很多人会发现有个很烦人的操作，就是在constructor里面，需要bind(this)。

    首先需要从函数的调用开始讲起。

    1. foo(p1, p2)
    2. obj.foo(p1, p2)
    3. foo.call(obj, p1, p2)
    4. /*
    5.  *  或者apply或者bind，这三个都是用来绑定this的
    6.  */

    这几种其实都是调用函数。那有什么区别呢？

    乍看之下，前两种简单，后面一种复杂。很多人就选择完全不使用后面的call()。

    但实际上，后面的方法是用来绑定 this 的，前面的方法属于“随缘绑定”，但都可以等价的变成该种写法：

    1. func.call(context, p1, p2)

    foo(p1, p2) 等价于 foo.call(undefined, p1, p2)
    obj.foo(p1, p2) 等价于 obj.foo.call(obj, p1, p2)

    我们来实现一个简单的 bind

    1. function bind(fn, obj) {
    2.   return function () {
    3.     return fn.apply(obj, arguments)
    4.   }
    5. }
    7. bin(foo, obj)

    很多人特别喜欢死记硬背这个 this 的指向，“谁调用 this 就指向谁”blablabla……

    但实际上，this 是要为我们所用的，我想让你指向谁，你就要指向谁。我们不应该被它牵着走。

    先看foo(p1, p2)中的 this 如何确定。

    当你写下面代码时：

    1. function foo() {
    2.   console.log(this)
    3. }
    4. foo()

    等价于

    1. function foo() {
    2.   console.log(this)
    3. }
    4. foo.call(undefined) // 可以简写为 foo.call()

    按理说打印出来的 this 应该就是 undefined 了吧，但是浏览器里有一条规则：

    如果你传的第一个参数是null或者undefined， window 对象就是默认的。因此上面的打印结果是 window。

    如果希望这里的 this 不是 window 该怎么做呢？

    很简单：

    1. func.call(obj) // 那么里面的 this 就是 obj 对象了

    再看obj.foo(p1, p2) 里的 this 如何确定：

    1. let obj = {
    2.   foo() {
    3.     console.log(this)
    4.   }
    5. }
    6. obj.foo()

    他本身的指向就是 obj 自己，所以写成call()也就是：obj.foo.call(obj)

    回到最上面的代码。

    1. let obj = {
    2.   foo() {
    3.     console.log(this)
    4.   }
    5. }
    6. let bar = obj.foo
    7. obj.foo() // 转换为 obj.foo.call(obj)，this 就是 obj
    8. bar()
    9. // 转换为 bar.call()
    10. // 由于没有传 context
    11. // 所以 this 就是 undefined
    12. // 最后浏览器给你一个默认的 this —— window 对象

    提一个有趣的用法：如果把函数放到数组里，然后数组[]调用函数，this 指向哪里呢？

    1. function fn() {
    2.   console.log(this)
    3. }
    4. let arr = [fn, fn2]
    5. arr[0]()

    这里面的 this 是什么呢？

    我们可以把arr[0]()理解为arr.0()，虽然后者的语法错了，但是形式与转换代码里的obj.foo(p1, p2)对应上了！

    arr[0]() => arr.0() => arr.0.call(arr)

    那么里面的 this 就是 arr 了。

    总之，this 就是你 call 一个函数时，传入的第一个参数。

    （完）