一、this

this作为关键字，它的作用就是引用，并且它通常只写在函数内部就是函数体内，在js中this的引用对象随着函数的使用环境变化而变化。这里我们探讨一下普通函数和箭头函数中的this

二、普通函数

1. 定义

个人理解：普通函数的this与其定义位置无关，谁调用这个函数，this就指向谁。

2. 实例

在全局中：

window.name = 'window'
  function demo1() { 
   
    console.log(this.name)
  }
  let a = { 
   }
  a.name = 'a'
  a.speak = demo1
  demo1() // window
  a.speak() // a

直接执行demo1函数，虽然看上去没有其他东西去调用demo，实际上是window在调用，所以this指向window，第二次我们用a去调用，则this指向a
在对象属性中：

  let demo2 = { 
   
    name: 'demo2',
    speak1:function () { 
   
      console.log(this.name);
    }
  }
  let b = { 
   
    name: 'b',
    speak2: demo2.speak1
  }
  demo2.speak1() // demo2
  b.speak2() // b

同理，demo2调用时this指向demo2，b调用时this指向b

类中：

  class Person { 
   
    speak1 = function () { 
   
      console.log(this.name);
    }
  }

  let c = new Person()
  c.name = 'c'
  let d = { 
   
    name: 'd'
  }
  c.speak1() // c
  d.speak1 = c.speak1
  d.speak1() // d

同理，实例c调用时this指向实例c，对象b调用时this指向对象b

三、箭头函数

1. 定义

个人理解：箭头函数的this跟调用者无关，定义位置所在的作用域的this（函数作用域）是谁，箭头函数的this就指向谁

2. 实例

在全局中：

  window.name = 'window'
  let demo1 = () => { 
   
    console.log(this.name);
  }
  demo1() // window
  let a = { 
   
    name: 'a',
    speak: demo1
  }
  a.speak() // window

demo1定义所在的作用域是全局，而全局的this指向window，所以无论是直接调用（使用window调用）还是用对象a调用，最终this都是window

在对象属性中：

  window.name = 'window'
  let demo2 = { 
   
    name: 'demo2',
    speak1: () => { 
   
      console.log(this.name);
    }
  }
  let b = { 
   
    name: 'b',
    speak2: demo2.speak1
  }
  demo2.speak1() // window
  b.speak2() // window

箭头函数speak1定义在对象demo2中，但是对象demo2的this仍然指向window，所以无论是demo2调用还是b调用，最终this都是指向window

在类中：

  class Person { 
   
    speak1 = () => { 
   
      console.log(this.name);
    }
  }

  let c = new Person()
  c.name = 'c'
  let d = { 
   
    name: 'd'
  }
  c.speak1() // c
  d.speak1 = c.speak1
  d.speak1() // c

箭头函数speak1定义在类Person中，Person的this指向它的实例化对象，即实例对象c。所以无论是使用c调用还是d调用，最终this都指向c

四、两者混用

普通函数是谁调用this指向谁，而箭头函数的this指向定义所在作用域的this。所以如果我们将箭头函数定义在普通函数内部，那箭头函数中的this将指向普通的this，即谁调用普通函数就指向谁
具体案例：

  window.name = 'window'
  let demo = { 
   
    name: 'demo',
    speak1:function () { 
   
      console.log(this.name);
    },
    speak2: ()=> { 
   
      console.log(this.name);
    },
    speak3: function () { 
   
      return (()=> { 
   
        console.log(this.name);
      })()
    }
  }
  demo.speak1() // demo
  demo.speak2() // window
  demo.speak3() // demo

如果理解了这个案例，那么应该就理解了普通函数和箭头函数this指向的区别了

今天的文章箭头函数中的this指向分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。