原型上不能用箭头函数，因其无独立this，会捕获外层词法作用域的this（非调用实例），导致this.xxx访问失败；应改用普通函数或在实例层面绑定。

在原型对象上误用箭头函数，会导致方法内部的 this 指向外层词法作用域（比如全局、模块顶层或类定义时的作用域），而非调用它的实例。结果就是访问 this.xxx 时得到 undefined 或错误值——这不是语法报错，而是逻辑静默失效。

为什么原型上不能写箭头函数？

因为箭头函数没有自己的 this，它会沿作用域链向上找，直到找到最近的非箭头函数的 this。而原型方法（如 MyClass.prototype.method = () => {...}）是在类定义阶段执行的，此时外层 this 往往是 undefined（严格模式）或模块顶层对象，**绝不是将来调用它的实例**。

普通函数则不同：当以 obj.method() 形式调用时，JavaScript 引擎自动把 this 绑定为 obj——这是原型继承机制能工作的基础。

常见错误写法及对应修正

• ❌ 错误：直接赋值箭头函数到 prototype
  MyClass.prototype.handleClick = () => { console.log(this.state); };
  → this 永远不是实例，无法读取 state
• ✅ 修正：改用普通函数声明
  MyClass.prototype.handleClick = function() { console.log(this.state); };
• ❌ 错误：在类外部用箭头函数重写原型方法
  

  const original = MyClass.prototype.render;<br>MyClass.prototype.render = () => original.call(this); // this 还是错的

• ✅ 修正：用普通函数 + 显式 call/apply
  MyClass.prototype.render = function(...args) { return original.apply(this, args); };

更安全的替代路径

如果你真需要“自动绑定”行为，别动原型，换到实例层面做：

• 在构造函数中绑定：this.handleClick = this.handleClick.bind(this);
• 用类字段语法（推荐）：handleClick = () => { console.log(this.state); }; —— 此时箭头函数属于实例属性，this 在实例创建时已确定为当前对象
• React 中 JSX 直接使用：onClick={this.handleClick}（前提是该方法已正确绑定）

如何快速排查原型上的 this 问题？

遇到方法里 this 不对，先确认它是否挂在 Constructor.prototype 上，再检查定义方式：

• 打开控制台，输入 MyClass.prototype.handleClick.toString()，看开头是不是 () =>
• 在方法第一行加 console.log('this:', this);，点击触发后观察输出
• 若输出是 Window、undefined 或一个陌生对象，基本可判定是原型+箭头函数导致的 this 捕获错误