原型上不能用箭头函数，因其无独立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 捕获错误
