JS基础知识-this

与其他语言相比，函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。

在绝大多数情况下，函数的调用方式决定了this的值。所以导致了this使用场景非常之多，具体有哪些呢？

1. 作为普通函数调用
2. 使用call，bind，apply调用
3. 多为对象方法被调用
4. 在class中调用
5. 箭头函数

重点！！！！！

this的取什么值是函数执行的时候决定的，而不是函数在定义的确定的。
举例说明

• this在class中的调用

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

此处的this指向windows，然后我们是用call改变一下this的指向再来看看this指向。

    fin1.call({ x: 100 })  // {x：100}

此时,this的指向改为了传入的对象。同样的bind也可以改变this的指向。

    const fn2 = fn1.bind({ x: 200 })
    fn2()  // {x：200}

apply同样也是可以的。

1. bind改变this指针，直接运行函数，参数为依次传入。
2. bind改变this指针，返回一个函数，参数是依次传入。
   3.apply改变this指针，直接运行函数，参数必须为数组。

• 作为对象方法被调用

    const zhangsan = {
      name: '张三',
      sayHi: function () {
        console.log(this)
      }
    }
    zhangsan.sayHi()  //{name: "张三", sayHi: ƒ}

1. 此处的this指向对象张三

• 在class中调用

    class Pepple {
      constructor(name) {
        this.name = name
      }
      sayHi() {
        console.log(this)
      }
    }
    const zhang = new Pepple('张三')
    zhang.sayHi() 

1. 此处的this指向zhang的对象

• 在箭头函数中使用

    const zhangsan = {
      name: '张三',
      whit() {
        setTimeout(function () {
          console.log(this)
        }, 1000);
      },
      whit1() {
        setTimeout(() => {
          console.log(this)
        }, 1000);
      }
    }
    zhangsan.whit()  
    zhangsan.whit1()  

1. 没有使用箭头函数指向了windows,使用了箭头函数的指向了张三的对象
2. 箭头函数的this指向永远是上一级this的指向

至此，每个this的不同使用场景都已经通过demo的形式展示完毕，要想真正的学懂this，那就需要联合我们之前的class，作用域还有个人的练习。希望大家可以通过上述的案例中学到东西。