js中箭头函数this值

箭头函数是js中比较高级简洁的写法.

在箭头函数中,使用箭头函数的this值这个属性需要注意:

箭头函数里面， 没有this值， 如果我们访问的话，会去上一层作用域里面找this

（this就是一个局部变量，系统自动创建，箭头函数里面没有，他就会顺着作用域链往上找，就近原则）

下面是使用箭头函数this值的几种情况

<script>
    // 谁来调用这个函数，函数内部的this就指向谁
    // 箭头函数里面， 没有this值， 如果我们访问的话，会去上一层作用域里面找this
    // （this就是一个局部变量，系统自动创建，箭头函数里面没有，他就会顺着作用域链往上找，就近原则）

    // 全局环境下面的this值
    console.log(this);

    const obj = {
      name: '小猪佩奇',
      getName() {
        // 函数内部的this值，是函数调用的使用，由系统自动创建的一个变量
        // 谁来调用这个函数，函数内部的this就指向谁
        console.log(this === obj);
      }
    }
    obj.getName()

    // 1. dom事件
    const btnDom = document.querySelector('.btn')
    // 后面的匿名函数， 当用户点击按钮的时候，由按钮去调用这个回调函数，所有函数内部的this就指向btn
    // btnDom.addEventListener('click', function() {
    //   console.log(this);
    // })
    btnDom.addEventListener('click', () => {
      console.log(this); // 为什么是window？1. 箭头函数内部没有this， 2. 去上一层作用域里面找
    })

    // 2. 对象里面的方法调用
    const  obj2 = {
      name: '123',
      getName: function() {
        console.log(this); // 谁调用这个函数，this 打印 obj2

        const fn = () => {
          console.log(this); // 没有this， 上一层作用域里面 打印 obj2
        }
        fn()
      }
    }
    obj2.getName()

    const  obj3 = {
      name: '123',
      getName: () => {
        console.log(this);//这里打印的是window,因为this表示调用这个函数的对象,可以看到,是obj3调用了这个对象,可根据箭头函数的特殊性,箭头函数没有this值,需要去上一个作用域里面去找this值,上一个作用域是window.所以this返回值为window

        const fn = () => {
          console.log(this);//window
        }
        fn()
      }
    }
    obj3.getName()
  </script>

特别要注意的是,箭头函数是没有this值的,所以不管谁调用这个箭头函数,this都不会指向这个调用者,而是去上一层作用域去找上一层作用域的this值,如若上一层也是箭头函数,那么以此类推,继续往上找this值