JavaScript новые объекты внутри объектов, дублирующих

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

Любая помощь была бы очень признательна!

Это мой полный класс Element

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.Text = function(string) 
{ 
    C.Object.call(this) 

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

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

Answer 2

С выглядит так, вы объявляете позицию как «статическую» переменную на объекте, а это значит, что она изменится. Для того, чтобы это изменить только на конкретном объекте вам нужно одно из следующих действий:

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

или внутри функции объекта

this.position = new JC.Vector(); 

Эти заявления для элементов, которые являются специфическими для объекта, где поскольку объявление C.Element.position предназначено для того, что будет одинаковым во всех экземплярах объекта.

Update

Вместо того, чтобы объявить C.Text.prototype = new C.Element(). Попробуйте использовать C.Text.prototype = C.Element.prototype. Надеюсь, это исправит вашу проблему. Вместо того, чтобы создавать новый объект для его основания, он основывается на прототипе C.Element