普通函数与箭头函数的this指向的区别

直接上一个简单的下配demo来说明问题
1.使用普通函数
需求：实现点击id为box的盒子，让其变色

• 方式1—使用普通哈函数

可以发现当你没有在外层保留this的指向时，此时setTimeout定时器中的箭头函数的指向时指向window的，那么此时this.style.background====>window.style.background,因此找不到windowd.style，所以报上面的错误

当我在外层保留this的指向时，然后我在定时器内函数使用外层保留的this即self，此时打印出的self便指向的时box这个盒子，便可以解决指向问题

• 方式2-----使用箭头函数
  

    var box = document.getElementById('box');
    box.addEventListener('click', function () {
      var self = this;
      setTimeout(function () {
        console.log(self)
        self.style.background = "red";


      }, 2000)
    })


    var box = document.getElementById('box');
    box.addEventListener('click', function () {

      setTimeout(() => {
        console.log(this)
        this.style.background = "blue"
      }, 1000)

    })

需求2：对一已经数组。返回数组中的偶数

 const arr = [2, 5, 8, 7, 9, 12]
    const result = arr.filter(function (item) {
      if (item % 2 === 0) {
        return true
      } else {
        return false
      }
    })
    console.log(result)


    //使用箭头函数
    const result1 = arr.filter((item) => {
      if (item % 2 === 0) {
        return true
      } else {
        return false
      }
    })
    console.log(result1)

    //使用箭头函数
    const result2 = arr.filter(item => item % 2 === 0)
    console.log(result2)

总结：
1.箭头函数适合于this无关的问题，比如定时器，数组的方法回调
2.箭头函数不适合与this有关的回调，事件回调，对象的方法（如box.addEventListener(‘click’, function () {}）—这里的functio就不适合使用箭头函数）