JavaScript новые объекты внутри объектов дублируются

Question

Я провожу приключение в глубине JavaScript и столкнулся с небольшой проблемой, с которой не могу разобраться.

Все, что я знаю о программировании, самоучка, эта проблема может иметьЗа этой терминологией я никогда не слышал, поэтому не знаю, как она будет называться.

Я объясню проблему, с которой я столкнулся.

Я писалфреймворк для HTML5 canvas для отображения 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;