Question

我正在冒险进入JavaScript的深处，并遇到了一个我无法理解的小问题。

我所知道的关于编程的一切都是自学的，这个问题可能有一些我从未听说过的术语，所以我不知道它会被称为什么。

我将解释我遇到的问题。

我一直在为HTML5画布编写一个用于显示2D和3D图形的框架。

正如您所料，我设计了一个元素类，这些元素在画布上的位置是从我放在一起的矢量类构建的。

我遇到的问题是，如果我制作了两个“文本”对象，然后在其位置对象内调用一个函数，“文本”对象的所有位置都会更改为该值：

    var usernameLabel = new C.Text('Username:');
    usernameLabel.position.set(30,30)

    var username = new C.Text('Hello World');
    username.position.set(0,70)

    console.log(usernameLabel.position.x) // 0 when it should be 30

我确信我错过了一些东西，我只是无法弄清楚是什么。

    C.Text.prototype = new C.Element();

    C.Element.position = new JC.Vector();

非常感谢任何帮助！

这是我的完整元素类

C.elements = 0;

C.Element = function()
{
    this.id = C.elements ++;

    this.position = new C.Vector();
    this.rotation = new C.Vector();
    this.style = new C.Style();

    this.children = [];
}

C.Element.prototype = {

    constructor : C.Element,

    addChildObject : function( o )
    {
        return this.children.push(o);
    },

    removeChildObject : function( o )
    {
        this.children.splice(o,1);
    }

}

文字课

C.Text = function(string)
{
    this.string = string || '';
}

C.Text.prototype = new C.Element();
C.Text.prototype.constructor = C.Text();

我还有更多从C.Element构建的类，例如：

C.Rectangle = function(width, height)
{
    this.style.setSize(width,height);
}

C.Rectangle.prototype = new C.Element();
C.Rectangle.prototype.constructor = new C.Rectangle();



var usernameLabel = new C.Text('Username:');
usernameLabel.position.set(30,30) // 0,70?

var username = new C.Text('');
username.position.set(0,70) // 0,70

var rect = new C.Rectangle(20,0);
rect.position.set(30,80) // 90,80?

var rect2 = new C.Rectangle(20,0);
rect2.position.set(90,80) // 90,80

Answer 1

从它的外观来看，你在对象上声明位置是一个'静态'变量，这意味着它会改变。要使其仅在特定对象上进行更改，您需要执行以下操作之一：

C.Element.prototype.position = new JC.Vector();

或在对象内的函数内

this.position = new JC.Vector();

这些声明适用于特定于对象的项目，其中C.Element.position声明适用于在对象的所有实例中都相同的内容。

<强>更新

而不是声明C.Text.prototype = new C.Element()。尝试使用C.Text.prototype = C.Element.prototype。希望这能解决你的问题。它不是创建一个基于它的新对象，而是直接将其基于C.Element

的原型

Answer 2

我找到了答案！谢谢您的帮助！解决方案是让父对象进行调用

因为我不完全理解的原因。

C.Text = function(string)
{
    C.Object.call(this)

    this.string = string || '';
    return this;
}

C.Text.prototype = new C.Object();
C.Text.prototype.constructor = C.Text;

对象内的JavaScript新对象重复

2 个答案: