會留里

弹指间,心无间

箭头函数与普通函数

一直没有深入地了解箭头函数,以为其只是一种function的语法糖。 但用着用着的时候总些出现些迷之错误,例如整件里面使用了箭头函数,this指向不是触发对象什么的,很影响开发。

今天抽空看了一下文章,总结就是箭头函数不受调用对象的影响,this总是指向执行环境里面最顶层的this,例如运行在浏览器的话,this === window

更正:箭头函数的this不受调用函数对象本身的影响,指向箭头函数执行时的环境对象。

例子:

// 例子1

this.a = 1;
const obj = {
  a: 2,
  b: function() {
    console.log(this.a);
  },
  c: () => {
    console.log(this.a);
  }
}

obj.b(); // 2, 指向函数调用对象本身
obj.c(); // 1, 非指向函数调用对象本身,而函数调用时对象的环境,即windows || {}。


// 例子2

this.a = 0;

const F = function() {
  this.a = 2;

  const obj = {
    a: 1,
    b: function() {
      console.log(this.a);
    },
    c: () => {
      console.log(this.a);
    }
  }

  obj.b(); // 1, 指向函数调用对象本身
  obj.c(); // 2, c在F内部执行, 指向函数F内部。
}

F();

--- end ---

参考资料: