ES6箭头函数

ES6的箭头函数其实就是词法作用域的一种方式,它本身没有this,所以会向上寻找有this的作用域当做自己的作用域;而普通函数的this是运行时动态绑定的,也就是指向调用者的作用域(上下文环境)

所以呢?

function Person() {  
  var self = this; 
  self.age = 0;

  setInterval(function growUp() {
    self.age++;
  }, 1000);
}

// 可以改成这么写,是不是简化了很多?
function Person() {  
  this.age = 0;
  setInterval(() => {
    this.age++; // 这个this指向的就是箭头函数外面的this
  }, 1000);
}

// 那如果这样呢?套嵌箭头函数呢?
function Person() {  
  this.age = 0;
  setInterval(() => {

     setTimeout(() => {
        this.age++; // 这个this呢?由于它会像父级作用域寻找,发现是箭头函数,没有this可以绑定,那继续往上找,找了person的作用域中的this,进行了绑定,所以这个this也是指向了person所在的作用域;
     }, 500);

  }, 1000);
}

此外注意两点:

  • 不能使用arguments对象,它在箭头函数中不存在
  • 由于this在箭头函数中被绑定了,不能使用call(),apply(),bind()等函数改变箭头函数的this指向
如果我的文章对您有帮助
欢迎打赏(。・ω・)

Zhang Xiao

Read more posts by this author.

beijing