我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

苏南大叔：JavaScript，以对象属性方法为例，箭头函数访问this对象 - 箭头函数访问this
JavaScript，以对象属性方法为例，箭头函数访问this对象（图4-1）

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

前文回顾

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

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

本篇文章是上述两篇文章的合并组合测试。在前两篇文章里面，苏南大叔提到：箭头函数和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();
JavaScript

苏南大叔：JavaScript，以对象属性方法为例，箭头函数访问this对象 - 函数类测试
JavaScript，以对象属性方法为例，箭头函数访问this对象（图4-2）

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();
JavaScript

苏南大叔：JavaScript，以对象属性方法为例，箭头函数访问this对象 - es2015类测试
JavaScript，以对象属性方法为例，箭头函数访问this对象（图4-3）

复杂对象中的箭头函数

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();
JavaScript

苏南大叔：JavaScript，以对象属性方法为例，箭头函数访问this对象 - 复杂对象测试
JavaScript，以对象属性方法为例，箭头函数访问this对象（图4-4）

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

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

结语

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

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

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   js