关于箭头函数中的this指向问题

Posted 2020-11-19 i-leo

参考文章https://blog.csdn.net/zhq2005095/article/details/70666833

this的主要应用场景有：

1、在普通函数，this指向window对象。

2、函数作为对象的属性，this指向调用函数的对象。

3、构造函数对象中，this指向函数的实例对象。

4、call和apply中，this指向第一个参数，即被扩展的作用域对象。

而ES6新增的箭头函数的this却有所不同，下面从以上四点对比function中的this和箭头函数中的this。

  1 // 1、普通函数中,function和箭头函数的this均指向window
  2 var a = 0
  3 function foo() {
  4   console.log(this)
  5   console.log(this.a)
  6 }
  7 foo() // window 0
  8 // 
  9 var a = 0
 10 var foo = () => {
 11   console.log(this)
 12   console.log(this.a)
 13 }
 14 foo() // window 0
 15 
 16 // 2、函数作为对象的属性
 17 var obj = {
 18   name: ‘qq‘,
 19   foo: function () {
 20     console.log(this)
 21     console.log(this.name)
 22   }
 23 }
 24 obj.foo() // obj qq
 25 
 26 // 这里箭头函数的this指向window对象
 27 var obj = {
 28   name: ‘qq‘,
 29   foo: () => {
 30     console.log(this)
 31     console.log(this.name)
 32   }
 33 }
 34 obj.foo() // window undefined
 35 
 36 //3、构造函数中的this
 37 const Animal = function (name, age) {
 38   this.name = name
 39   this.age = age
 40 }
 41 const animal = new Animal(‘mm‘, ‘00‘)
 42 console.log(animal) // mm 00
 43 
 44 // 箭头函数不能作为构造函数使用！！！
 45 const Animal = (name, age) => {
 46   this.name = name
 47   this.age = age
 48 }
 49 const animal = new Animal(‘mm‘, ‘00‘)
 50 console.log(animal) // Uncaught TypeError: Animal is not a constructor
 51 
 52 // 4、call和apply中的this
 53 function foo() {
 54   var a = 0
 55   console.log(this)
 56   console.log(this.a)
 57 }
 58 var obj = {
 59   a:1
 60 }
 61 foo.call(obj) // obj 1
 62 
 63 // 箭头函数的this指向window对象
 64 var a = 0
 65 const func = () => {
 66   console.log(this)
 67   console.log(this.a)
 68 }
 69 var obj = {
 70   a:1
 71 }
 72 func.call(obj) // window 0
 73 
 74 // 函数的定义是在foo1函数生成时，函数的执行是在1000ms后，执行环境不同，回调函数中的this指向window
 75 function foo1 (){
 76   // 固定this
 77   var that = this;
 78   setTimeout(function () {
 79       console.log(this); // window
 80       console.log(this.b); // undefined
 81       console.log(that); // obj
 82       console.log(that.b); //2
 83   },1000)
 84 }
 85 var obj1 = {
 86   b: 2
 87 }
 88 foo1.call(obj1);
 89 
 90 // 箭头函数的this指向函数定义时的作用域，foo2函数生成时箭头函数的定义生效，this指向定义时的对象obj2
 91 function foo2 () {
 92   setTimeout(() => {
 93     console.log(this) // obj
 94     console.log(this.a)  //2
 95   }, 1000)
 96 }
 97 var obj2 = {
 98   a: 2
 99 }
100 foo2.call(obj2)

 

可以看出，箭头函数的this指向是固定的，指向函数定义时的作用域，不能作为构造函数使用。