12-18 es6的this指向问题

最新推荐文章于 2023-12-25 10:42:26 发布

原创最新推荐文章于 2023-12-25 10:42:26 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

探讨ES6中箭头函数与普通函数的this指向差异，箭头函数的this指向在定义时固定，普通函数则随调用上下文变化。通过实例说明箭头函数在回调与对象方法中的应用及注意事项。

es6的this指向问题

1.今天看项目，关于箭头函数的this的指向在回调函数中不太清楚，参考之前写的博客，有

箭头函数中的this指向是固定不变的，即是在定义函数时的指向；
而普通函数中的this指向时变化的，即是在使用函数时的指向。

再看一遍阮一峰的ES6入门，发现对于回调函数，

var handler = {
  id: '123456',

  init: function() {
    document.addEventListener('click',
      event => this.doSomething(event.type), false);
  },

  doSomething: function(type) {
    console.log('Handling ' + type  + ' for ' + this.id);
  }
};

上面代码的init方法中，使用了箭头函数，这导致这个箭头函数里面的this，总是指向handler对象。否则，回调函数运行时，this.doSomething这一行会报错，因为此时this指向document对象。

总结：this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

2.为了巩固这段知识，我自己写了如下代码，结果如下：

普通函数输出如下
222
箭头函数输出如下
undefined

//箭头函数中的this指向是固定不变的，即是在定义函数时的指向； 
//而普通函数中的this指向时变化的，即是在使用函数时的指向。 
let obj={
  a:'2',
  b(){
    console.log('普通函数输出如下')
    console.log(this.a)
    
  }
}
function kk(){
  obj.a=222;
  obj.b();
}
kk();
let objArrows={
  a:'2',
  b:()=>{
    console.log('箭头函数输出如下')
    console.log(this.a)
  }
}
function arrow(){
  objArrows.a=333;
  objArrows.b();
}
arrow()

很奇怪为什么在对象里定义成员函数，this应该是指向对象才对，这里却访问不到。在教程里找到了答案：

第一个场合是定义函数的方法，且该方法内部包括this

const cat = {   
	lives: 9,
    jumps: () => {
     this.lives--;   
     } }

上面代码中，cat.jumps()方法是一个箭头函数，这是错误的。调用cat.jumps()时，如果是普通函数，该方法内部的this指向cat；如果写成上面那样的箭头函数，使得this指向全局对象，因此不会得到预期结果。