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

I am playing with the HTML5 canvas element, using JS to draw some rectangles on it and then move them around, changing size and colors, etc. Currently I use mostly native JS, with jQuery for the jCanvas plugin to draw the shapes on the canvas. This is all working nicely, but I think the code could be improved.

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

Currently I store all rectangle properties in regular variables, like:

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

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

I am wondering whether it would be possible to just create instances of a 'block'-object. So I would have: an object called 'block', with properties 'height', 'width', 'color', etc. And then every time I create an instance of that object it has the default block properties.

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

The same goes for functions, I would like to do something like:

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

$block1.moveX(-100);

Is this possible in JS? What would be the correct way to do this?

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

2 个解决方案

#1

You could create a Block constructor function, something like this:

您可以创建一个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);
    }
};

You can then create new instances of the Block "class" with the new operator:

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

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

The above would create a new Block instance with a width and height of 50 (because we didn't pass in a width or height argument). To create a bigger Block you could do:

上面将创建一个宽度和高度为50的新Block实例（因为我们没有传入width或height参数）。要创建更大的块，您可以执行以下操作：

var block2 = new Block(100, 100);

Note that (as stated in the comments) using this.moveX = function is not hugely efficient. It means every instance of Block has to have a copy of the moveX function in memory. You could improve this by adding the moveX method to the prototype:

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

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

This way, none of the Block instances have a copy of the method. When you call it, the instance itself is examined but no property with the name moveX is found, so the prototype is looked at instead. There is one copy of the method shared between all instances.

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

2 个解决方案

#1

更多相关文章

随机推荐