如何在 JavaScript 中编写正确的 OOP 代码？答案

【问题标题】：How to write proper OOP code in JavaScript?如何在 JavaScript 中编写正确的 OOP 代码？
【发布时间】：2012-01-22 13:23:54
【问题描述】：

我正在使用 HTML5 画布元素，使用 JS 在其上绘制一些矩形，然后移动它们，更改大小和颜色等。目前我主要使用原生 JS，jCanvas 插件使用 jQuery 来绘制形状在画布上。这一切都很好，但我认为代码可以改进。

目前我将所有矩形属性存储在常规变量中，例如：

block1Height = 50;
block1Width = 50;
block1Color = '#000000';
block1X = 200;
block1Y = 100;
block2Height = 50;
block2Width = 50;
etc..

我想知道是否可以只创建“块”对象的实例。所以我会有：一个名为“块”的对象，具有“高度”、“宽度”、“颜色”等属性。然后每次我创建该对象的实例时，它都有默认的块属性。

函数也是如此，我想做这样的事情：

$block1.moveX(-100);

这在 JS 中可能吗？这样做的正确方法是什么？

【问题讨论】：

标签： javascript oop html canvas

【解决方案1】：

是的，你可以在 javascript 中创建 json 对象 ex:-

var b={
    blockheight:100,
    blockwidth:100,
    moveX:function(posx){
    //code goes here
    }
}

【讨论】：

【解决方案2】：

您可以创建一个Block 构造函数，如下所示：

var Block = function(width, height) {
    this.width = width || 50; //50 is the default
    this.height = height || 50; //50 is the default
    this.moveX = function(x) {
        console.log("Moving by " + x);
    }
};

然后您可以使用 new 运算符创建 Block“类”的新实例：

var block1 = new Block();
block1.moveX(100); //Will print "Moving by 100"

上面将创建一个新的Block 实例，其中width 和height 为50（因为我们没有传入width 或height 参数）。要创建更大的Block，您可以这样做：

var block2 = new Block(100, 100);

请注意（如 cmets 中所述）使用this.moveX = function 效率不是很高。这意味着Block 的每个实例都必须在内存中拥有moveX 函数的副本。您可以通过将moveX 方法添加到prototype 来改进这一点：

Block.prototype.moveX = function(x) {
    console.log("Moving by " + x);
}

这样，Block 实例都没有该方法的副本。当您调用它时，会检查实例本身，但找不到名称为 moveX 的属性，因此会查看 prototype。所有实例之间共享该方法的一份副本。

【讨论】：

没问题，很高兴我能帮上忙 :)
@Raynos - 你能扩展一下吗？为什么效率低下？你会建议什么作为替代方案，Block.prototype.moveX？
是不是因为Block 的每个实例都必须在内存中拥有该方法的副本，而将其声明为prototype 的方法，所以它们都共享一个？跨度>
@JamesAllardice 正确。当您可以从原型继承方法时，应避免将方法作为自己的属性