JavaScript原型与箭头函数问题：fatArrayGetName返回空字符串原因咨询

我明白你遇到的问题了——用箭头函数当原型方法时，拿不到实例的name属性，返回空字符串对吧？这其实是箭头函数最核心的特性导致的：箭头函数没有自己独立的this上下文。

咱们先还原一下你大概率写的代码，大概是这样的：

function FatArray(name) {
  this.name = name;
}

FatArray.prototype.fatArrayGetName = () => {
  return this.name;
};

const myArray = new FatArray("My Custom Array");
console.log(myArray.fatArrayGetName()); // 输出空字符串

为什么会出现这个现象？因为箭头函数的this不是在调用时绑定的，而是定义时就直接继承了外层作用域的this。在这个例子里，箭头函数fatArrayGetName是在全局作用域下定义的（FatArray本身在全局作用域声明），所以它的this指向全局对象（浏览器里是window，Node.js里是globalThis），而全局对象的name属性默认就是空字符串，所以调用后自然返回空。要是在严格模式下，外层作用域的this会是undefined，这时候调用还会直接抛出错误。

那怎么解决这个问题？把箭头函数换成普通的函数声明或者表达式就行——普通函数作为原型方法时，this会在调用时自动绑定到实例对象：

// 写法1：普通函数表达式
FatArray.prototype.fatArrayGetName = function() {
  return this.name;
};

// 写法2：ES6方法简写（本质还是普通函数）
FatArray.prototype = {
  fatArrayGetName() {
    return this.name;
  }
};

这样再调用myArray.fatArrayGetName()，this就会指向myArray实例，就能正确拿到name属性的值了。

最后再划个重点：箭头函数适合需要捕获外层this的场景（比如回调函数里不想改变this指向），但绝对不适合作为依赖实例this的原型方法，因为它根本不会绑定到实例上。

内容的提问来源于stack exchange，提问作者Pankaj Badukale