使用 OOP 将“this”绑定到上层类答案

【问题标题】：Binding 'this' to the upper class using OOP使用 OOP 将“this”绑定到上层类
【发布时间】：2018-03-08 09:26:51
【问题描述】：

我正在尝试使用 Classes 制作游戏，以使我的代码更简洁、更具可读性，但有些东西不起作用。

在我的Canvas 类的“创建”函数中，我定义了this.ctx，并在另一个名为Tile 的类中再次调用它。我想在所有班级的任何地方都使用this.ctx。但是在那个类中，我在Canvas 类中定义的this 不再存在于Tile 类中，它们也不存在于App 类中。我尝试返回 this 对象，但这似乎不起作用。

谁能帮我解决这个问题。提前致谢！

class App {
    constructor() {
        this.gridX      = 4;
        this.gridY      = 4;
        this.blockSize  = 100;
        this.width      = this.gridX * this.blockSize;
        this.height     = this.gridY * this.blockSize;
        this.grid       = new Array(this.gridX).fill(new Array(this.gridY));

        document.addEventListener("DOMContentLoaded", () => {
            const canvas = new Canvas();
            canvas.create(this.width, this.height);
            this.makeGrid();
        });
    }

    makeGrid() {
        this.grid.forEach((value, i) => {
            this.grid.forEach((value, j) => {
                new Tile().createTile(i, j);
            });
        });
    }
}

class Canvas extends App {
    create(width, height) {
        this.canvas = document.createElement('canvas');
        this.canvas.setAttribute('width', width);
        this.canvas.setAttribute('height', height);
        document.body.appendChild(this.canvas);
        this.ctx = this.canvas.getContext('2d');
    }
}

class Tile extends App {
    createTile(x, y) {
        this.ctx.fillStyle = 'white';
        this.ctx.strokeStyle = "red";
        this.ctx.fillRect(j + 1, i + 1, this.blockSize - 2, this.blockSize - 2);
    }
}

new App();

【问题讨论】：

您似乎对继承感到困惑。

标签： javascript class oop this

【解决方案1】：

由于您的Tile 课程几乎什么都不做，我不确定createTile 是否有太多理由使用Tile 而不是App。无论如何：Tile 没有理由继承自 App，因此请从其声明中删除 extends App。（与Canvas 相同。）

但是，如果您希望Tile 能够访问画布，通常的做法是在其构造函数中将对画布的引用传递给它：

// In Tile
constructor(ctx) {
    this.ctx = ctx;
}

那么当使用它时：

new Tile(this.ctx).createTile(i, j);

【讨论】：

我现在更了解它了，但是我想在 Tile 类中声明一个 this 变量，然后能够在它上面的类中调用它，因为我确实想使用 extends 并工作继承。
@YounessArsalane：这种情况下的继承毫无意义，也没有正确使用。继承可能很有用，但前提是子类和超类之间存在“是”关系。例如，Car extends Vehicle 因为 Car “是”车辆。瓷砖不是应用程序。画布不是应用程序。 App有 Tiles，还有一个Canvas，不是继承关系（是包含关系）。
这是有道理的。谢谢！

【解决方案2】：

class App {
    constructor() {
        this.gridX      = 4;
        this.gridY      = 4;
        this.blockSize  = 100;
        this.width      = this.gridX * this.blockSize;
        this.height     = this.gridY * this.blockSize;
        this.grid       = new Array(this.gridX).fill(new Array(this.gridY));

        document.addEventListener("DOMContentLoaded", () => {
            const canvas = new Canvas();
            canvas.create(this.width, this.height);
            this.makeGrid();
        });
    }

    makeGrid() {
        this.grid.forEach((value, i) => {
            this.grid.forEach((value, j) => {
                new Tile().createTile(i, j);
            });
        });
    }
}

class Canvas {
    constructor(){}
    create(width, height) {
        this.canvas = document.createElement('canvas');
        this.canvas.setAttribute('width', width);
        this.canvas.setAttribute('height', height);
        document.body.appendChild(this.canvas);
        this.ctx = this.canvas.getContext('2d');
    }
}

class Tile extends Canvas {
    constructor(){
        super();
    }
    createTile(x, y) {
        this.ctx.fillStyle = 'white';
        this.ctx.strokeStyle = "red";
        this.ctx.fillRect(j + 1, i + 1, this.blockSize - 2, this.blockSize - 2);
    }
}

new App();

为什么不这样尝试

【讨论】：

【解决方案3】：

看起来您是从App 扩展Tile 而不是Canvas。

【讨论】：