JavaScript，以对象属性方法为例，箭头函数访问this对象

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文还是说箭头函数与this的关系，不过举例从普通的箭头函数定义，升级为类(对象)的属性定义使用this。对箭头函数的this来源，做个更深层次的理解。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。本文测试环境：nodejs@20.18.0，chrome@132.0.6834.84。

前文回顾

定义个复杂对象的方式，有很多方式。参考：

• https://newsn.net/say/js-object.html

箭头函数的基本理解，和this、arguments的关系对比。参考：

• https://newsn.net/say/js-arrow-func.html

本篇文章是上述两篇文章的合并组合测试。在前两篇文章里面，苏南大叔提到：箭头函数和this的组合，尽量少用。因为可能有歧义。那么，本文再次测试这个组合。

箭头函数的this是在定义的时候，从父层对象里面得到的。后续运行的时候，不能够二次绑定。

函数类中的箭头函数

下面的代码中，只有定义在.prototype上的箭头函数，没有拿到this值。

function s() {
  this.hero = "sunan";
  this.need = () => console.log(this.hero); //sunan
  this.need2 = function () { console.log(this.hero); }; //sunan
}
s.prototype.need3 = () => console.log(this.hero); // undefined
s.prototype.need4 = function () { console.log(this.hero); }; // sunan
let n = new s();
n.need();
n.need2();
n.need3();
n.need4();

ES2015类中的箭头函数

这个ES2015类的写法，很常见，运行结果同上。参考代码：

class s {
  constructor() {
    this.hero = "sunan";
    this.need = () => { console.log(this.hero); }; //sunan
  }
  need2() { console.log(this.hero); } //sunan
}
s.prototype.need3 = () => console.log(this.hero); // undefined
s.prototype.need4 = function () { console.log(this.hero); }; // sunan
let n = new s();
n.need();
n.need2();
n.need3();
n.need4();

复杂对象中的箭头函数

const s = {
  hero: "sunan",
  need: () => console.log(this.hero), // undefined
  need2: function () { console.log(this.hero); }, // sunan
};
// s.prototype.need3 = () => console.log(this.hero);
// Cannot set properties of undefined (setting 'need3')
// s.prototype.need4 = function () { console.log(this.hero); };
// Cannot set properties of undefined (setting 'need4')
s.need();
s.need2();

和上面两个例子对比，在这个实验中，得出了不同的结论。

• 首先，.prototype是undefined，所以不能继续在原型上操作。
• 其次，在这个代码里面，箭头函数没能拿到this值。

结语

更多苏南大叔的JavaScript经验文章，请点击：

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。