Question

我有这样的model.js：

export class Piece {
constructor(name, coordinate) {
    this.name = name;
    this.coordinate = coordinate;
    this.move = false;
  }
  init(){
    // some stuff
  }
  hasOne(){
    // some stuff
  }
}

export class Brick {
  constructor(name, level) {
    this.name = name;
    this.level = level;
  }
  getScore(level){
    // some stuff
  }
}

export class Dashboard {
  constructor(){
    this.start();
  }

  start(){
    this.firstPiece = new Piece('A', 5);
  }

}

...

我有我的组件仪表板

import * as Model from './model';
<Dashboard game={new Model.Dashboard()} />

And Piece

import React from 'react';
const Piece = (props) => {
  console.log(props)
  return(
    <div>
      {props.piece.init()}
    </div>
  );
};
export default Piece;

当我在console.log（道具）时，我只看到构造函数道具，我无法访问方法init（），只能使用 proto

{props.piece.__proto__.init()}

有没有办法在道具中访问方法而不经过 proto ？

Answer 1

JavaScript使用prototypal inheritance，ES6类是已建立的继承配方的语法糖。

对原型继承的理解对于有效的JavaScript开发至关重要。

piece原型继承init类Piece中的piece.__proto__ === Piece.prototype。 __proto__是非标准属性，在内部使用，不应直接使用。

由于继承有效，piece.init === piece.__proto__.init，除非它被遮蔽。预期该方法可以像{props.piece.init()}一样使用而没有问题。

反应组件中类的访问方法

1 个答案: