如何在 JavaScript 中管理 super() 构造函数参数答案

【问题标题】：how to manage super() constructor parameters in javascript如何在 JavaScript 中管理 super() 构造函数参数
【发布时间】：2020-10-23 18:36:06
【问题描述】：

这是来自 mazeContainer.js 的一小段代码，只有必要的部分-

import Cell from "./cell.js";
import Player from "./player.js";

export default class Maze {
  ....
  setup(){
    for (let rowNum = 0; rowNum < this.rows; rowNum++) {
            let row = [];

            for (let colNum = 0; colNum < this.columns; colNum++) {
                let cell = new Cell(this.ctx, rowNum, colNum, this.cellWidth, this.cellHeight);
                row.push(cell);
            }
            this.grid.push(row);
  }
  
  drawMap(){
    ....
    let player = new Player(this.goal, this.lastRow, this.lastColumn);
    ....
  }
}

还有 player.js-

import Cell from "./cell.js";

export default 
class Player extends Cell {
    constructor(goal, lastRow, lastColumn) {
        super();                                    // need to manage this statement
        this.goal = goal;
        this.lastRow = lastRow;
        this.lastColumn = lastColumn;
    }
    ....
}

这就是我遇到的问题。

我刚刚遇到了super 关键字，到目前为止我必须知道的是，在使用this 之前，我需要调用super 方法。这不是问题。但是这里我还需要为Cell的构造函数提供所有参数。

如您所见，Cell 类的构造函数中有很多参数，那么如何将它们交给new Player(....)？

有没有更好的方法来实现这一点？

【问题讨论】：

Player为什么要扩展Cell？玩家是细胞吗？根据我在这里看到的内容，在定义 Player 类时，我不会扩展 Cell 。如果玩家需要访问或“拥有”一个单元格，请使用组合而不是继承。
您无法在Player 类中访问rowNum 和colNum，因为您没有将它们传递给Player 构造函数。因为Player 扩展Cell 你必须将所有cell 参数传递给Player
要避免传递这么多参数，只需对Cell 类使用options 对象，然后在您的Player 类中将options 传递给super()，您就可以在Player 类中访问它，就像this.options.rowNum
@HassanAzzam 我说我无法在drawMap 方法中访问rowNum 和colNum，以便传递给Player 构造函数。这就是我要找的。有什么解决办法？
看看代码你有一个Cell对象的gid，每个Cell对象都有rowNum和colNum，在drawMap方法中你创建了一个用户仅，因此即使您可以访问colNum 和rowNum，您也将传递给Player。你需要重新考虑你的代码结构，Player 类不需要扩展Cell。

标签： javascript class super javascript-inheritance

【解决方案1】：

• extends 关键字使动物类的方法在猫类中可用。
• 当您创建新的 Cat 对象时调用的构造函数接受两个参数，name 和 usesLitter。
• super 关键字调用父类的构造函数。在这种情况下，super(name) 将 Cat 类的 name 参数传递给 Animal 类的构造函数。当 Animal 构造函数运行时，它设置 this._name = name;用于新的 Cat 实例。
• _usesLitter 是 Cat 类独有的新属性，因此我们在 Cat 构造函数中设置它。

class Animal {                            
  constructor(name) {           
    this._name = name;
  }
  get name() {
    return this._name;
  }
} 


class Cat extends Animal {           
  constructor(name, usesLitter) {
    super(name);                    // The super keyword calls the constructor of the parent class.
    this._usesLitter = usesLitter;
  }
    get usesLitter() {
    return this._usesLitter;
  }
}


const bryceCat = new Cat('Bryce', true);
console.log(bryceCat.name);               //Output: Bryce
console.log(bryceCat.usesLitter);       //Output: true

【讨论】：