传统函数和箭头函数的this指向

函数内部中的this对象，它在标准函数和箭头函数中有不同的行为

传统函数

this引用的是把函数当成方法调用的上下文对象，什么意思呢，上个栗子🌰

 window.color = 'red'
 let o = {
    color: 'blue'
 }
      
function sayColor() {
    console.log(this.color) 
}
sayColor()
o.sayColor = sayColor
o.sayColor()

打印结果如下：

可以看到第9行this指向的是window，因为是在全局掉用sayColor方法

当给o设置一个属性，属性为sayColor方法，然后通过o调用sayColor（第10行），此时this指向调用它的o，color值自然为o.color，如果o没有color属性，则会打印undefined

箭头函数

this指向定义它的上下文，上个栗子🌰

window.color = 'red'
let p = {
   color: 'blue'
}
let sayColor1 = () => {
   console.log(this.color) 
}
sayColor1()
p.sayColor1 = sayColor1
p.sayColor1()

打印结果如下：

因为是在全局创建它的，所以指向window，打印都是window.color

再看个栗子🌰

function Color () {
   this.color = 'pink',
   this.sayColor =  () => {
   console.log(this.color) 
   }
}
const q = new Color() // 此时在q使用Color创建，Color对象中定义箭头函数，this会指向Color，即q
q.sayColor()  // 打印出pink

常见的应用场景： 在回调函数中使用this，如果是传统函数，this值拿到的并非想要的，可以使用箭头函数避免

上个栗子🌰

  function King() {
     this.royaltyName = 'Henry'
        setTimeout(() => console.log(this.royaltyName)) // 打印Henry
     }
     function Queen() {
        this.royaltyName = 'Elizabeth'
        setTimeout(function() {
            console.log(this.royaltyName) // 打印undefined
        })
   }
  new King()
  new Queen()