React组件中如何不通过__proto__访问类实例方法？

这个问题我之前也碰到过，大概率是你的类实例在传递过程中被转换成了普通JavaScript对象，导致原型链上的方法丢失了。咱们一步步来解决这个问题：

先确认问题根源 #

当你把类实例作为React props传递时，如果这个实例被意外序列化（比如某些状态管理库自动做了序列化、或者你自己用JSON.stringify/JSON.parse处理过），就会变成没有原型链的普通对象。这时候原型上的init()方法自然没法直接访问，只能通过__proto__去绕，但这绝对不是规范的做法。

解决方案 #

1. 确保传递的是完整的类实例 #

先检查你的组件传值链路，确保没有把实例转换成普通对象的操作。比如在Dashboard组件内部，你需要把game.firstPiece这个原始实例直接传给Piece组件：

// 假设这是Dashboard组件的核心代码
import Piece from './Piece';

function Dashboard(props) {
  return (
    <div>
      {/* 直接传递原始的Piece实例 */}
      <Piece piece={props.game.firstPiece} />
    </div>
  );
}

如果中间有类似Object.assign({}, props.game.firstPiece)或者把实例存到localStorage再取出的操作，就会丢失原型方法，一定要避免这种情况。

2. 若必须处理序列化对象，手动恢复原型链 #

如果因为业务需求（比如持久化存储）不得不序列化实例，那可以在拿到序列化后的普通对象后，手动恢复它的原型链：

import { Piece } from './model';

// 假设plainObj是序列化后的普通对象
const restoredPiece = Object.create(Piece.prototype);
Object.assign(restoredPiece, plainObj);

// 现在restoredPiece就能正常调用init()了
restoredPiece.init();

或者用更简洁的方式：

Object.setPrototypeOf(plainObj, Piece.prototype);

注意：Object.setPrototypeOf的性能略低，如果是高频操作不推荐，但普通场景下完全可用。

3. 检查类定义是否存在错误 #

再确认下你的Piece类定义，用class语法写的原型方法会自动挂载到原型上，你的代码看起来没问题：

export class Piece {
  constructor(name, coordinate) {
    this.name = name;
    this.coordinate = coordinate;
    this.move = false;
  }
  init(){ /* 你的初始化逻辑 */ }
  hasOne(){ /* 你的方法逻辑 */ }
}

只要你没有在构造函数里手动覆盖这些方法（比如写了this.init = function(){...}），实例就应该能直接调用init()。

4. 优化React组件中的方法调用逻辑 #

另外提个小建议：你现在在Piece组件的render函数里直接调用props.piece.init()，这不符合React的渲染规范——render应该是纯函数，不应该包含副作用操作。如果init()是用来初始化实例状态的，建议在useEffect中调用：

import React, { useEffect } from 'react';
const Piece = (props) => {
  useEffect(() => {
    // 在这里调用初始化方法，避免render时重复执行
    props.piece.init();
  }, [props.piece]); // 依赖项设为piece，确保实例变化时重新初始化

  console.log(props.piece); // 现在应该能正常看到原型方法了

  return(
    <div>
      {/* 这里放置你的渲染内容 */}
    </div>
  );
};
export default Piece;

总结 #

最常见的问题就是实例被转换成了普通对象，只要确保传递的是原始的类实例，就能直接调用原型上的方法，完全不需要用到__proto__。

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