如何用JavaScript编写正确的OOP代码？

我正在使用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中，您可以创建json对象，例如：

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

---

您可以创建一个

块

构造函数，如下所示：

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

操作符创建块“类”的新实例：

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

上面将创建一个新的

块

实例，其

宽度

和

高度

为50（因为我们没有传入

宽度

或

高度

参数）。要创建更大的

块

，可以执行以下操作：

var block2 = new Block(100, 100);

请注意（如注释中所述），使用

this.moveX=function

效率不高。这意味着

块

的每个实例都必须在内存中具有

moveX

函数的副本。您可以通过将

moveX

方法添加到

prototype

中来改进这一点：

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

---

这样，所有

块

实例都没有该方法的副本。调用它时，会检查实例本身，但找不到名为

moveX

的属性，因此会查看

prototype

。所有实例之间共享一个方法副本。

没问题，很高兴我能提供帮助：）@Raynos-您能详细介绍一下吗？为什么效率不高？作为替代方案，

Block.prototype.moveX

，您会提出什么建议？它是否效率低下，因为

Block

的每个实例都必须在内存中有一个方法副本，而通过将其声明为

prototype

的一个方法，它们都共享一个？@jamesalardice correct。当您可以从原型继承方法时，应该避免将方法作为自己的属性