Question

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

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

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

我想知道是否可以只创建一个'block'对象的实例。所以我会：一个名为'block'的对象，具有属性'height'，'width'，'color'等。然后每当我创建该对象的实例时，它都具有默认的块属性。

功能也一样，我想做的事情如下：

$block1.moveX(-100);

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

Answer 1

你可以创建一个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运算符创建阻止“类”的新实例：

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);

请注意（使用this.moveX = function时（如评论中所述）并不是非常有效。这意味着Block的每个实例都必须在内存中包含moveX函数的副本。您可以通过将moveX方法添加到prototype：

来改善这一点

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

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

Answer 2

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

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

如何在JavaScript中编写适当的OOP代码？

2 个答案: