this问题

涉及面试题:

如何正确判断this?

箭头函数的this是什么?

说明this的几种不同使用场景

this必须是在要执行时才能确认值，定义时无法确定.
1.作为构造函数属性执行

2.作为对象属性执行

3.作为普通函数执行

4.call apply bind

我们先看几个函数调用的场景

function fn() {
  console.log(this.a)
}
var a = 1
fn()

const obj = {
  a: 2,
  fn: fn
}
obj.fn()

const c = new fn()

• 对于直接调用fn来说，不管fn函数放在什么地方，this一定是window (普通函数执行)
• 对于obj.fn()来说，我们只需要记住，谁调用了函数，谁就是this，那么这个场景下，this就是obj对象(作为对象属性执行)
• 对于new的方式，也就是构造函数，this被永远绑定在了new的实例c上面，不会被任何方式改变(作为构造函数属性执行)

下面是bind apply call的场景

function fn1(name) {
    console.log(name)
    console.log(this)
}
fn1.call({
        x: 100
    }, "张三") //张三   { x: 100 }

var fn2 = function fn2(name) {
    console.log(name)
    console.log(this)
}.bind({
    y: 200
})
fn2.call({
        x: 100
    }, "张三") //张三  { y: 200}

对于这些函数，this取决第一个参数，如果第一个参数为空，那么就是window
无论我们对函数bind多少次，函数中的this永远都是由第一次bind决定的

箭头函数的this

function fn() {
    return () => {
        return () => {
            console.log(this)
        }
    }
}
console.log(fn()()())

首先箭头函数其实是没有this的，箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值(箭头函数中的this只取决包裹箭头函数的第一个普通函数的this)

在例子中，因为包裹箭头函数的第一个普通函数是fn，所以此时的this是window，另外 call() / apply() / bind() 方法对于箭头函数来说只是传入参数，对它的 this 毫无影响。

上面就是this 的所有规则，但是如果同时出现多个规则的时候，采用下面的规则来决定this

new的方式优先级最高(构造函数)
接着是bind这些函数(apply,call,bind)，
然后是obj.fn()这些调用方式(对象属性调用)，
最后是fn()这种调用方式(函数调用)。
同时箭头函数的this一旦被绑定，就不会被任何方式所改变