Создание нового объекта в Javascript

Question

У меня есть этот класс / объект:

function Shape(){
    this.xArray = new Array();
    this.yArray = new Array();
    this.selectedColor;
}

В моем коде я продолжаю создавать объекты и добавлять их в другой массив. Как это:

var shapes = new Array();
var current = new Shape();
function onmousemove(e){
    current = new Shape(); // won't create a new ojbect!!
    current.xArray.push(e.pageX, e.pageY);
    ...... 
    shapes.push(current);
}

Проблема в том, что я продолжаю получать один и тот же объект, даже когда создаю новую форму. Я новичок в javascript, я не уверен, правильно ли я делаю.

UPDATE: вот мой код без редактирования:

function handleMouseDown(e)
{
currentshape = new Shape(); 
showMessage(currentShape.xArray.length);
currentShape.xArray.push(e.clientX- this.offsetLeft);       
currentShape.yArray.push(e.clientY- this.offsetTop);
shapes.push(currentShape);
draw();
mouseDownFlag = true;
}

function handleMouseMove(e)
{   
if(mouseDownFlag)
{
    currentShape.xArray.push(e.clientX- this.offsetLeft);
    currentShape.yArray.push(e.clientY- this.offsetTop);

    draw();
}
}

функция showMessage просто изменяет div, чтобы показать мне результат Я продолжаю получать совокупное число xArray из всех фигур.

Answer 1

Обновление

Ошибка в этой строке в handleMouseDown:

currentshape = new Shape();

Вы использовали currentshape, а не currentShape (скапитал S).Это создает отдельный и не связанный неявный глобальный вместо обновления currentShape, поскольку JavaScript чувствителен к регистру (s и S - две разные переменные).

Чтобы избежатьТакая проблема в будущем, вы можете рассмотреть возможность использования строгий режим , предлагаемый последней версией JavaScript, ECMAScript 5-е издание.В строгом режиме, между прочим, у вас больше не возникает ужас неявных глобалов .Присвоение неразрешимой ссылки приводит к ошибке.

Чтобы сделать это, вы должны использовать функцию определения объема вокруг всего вашего кода и поставить "use strict"; вверху, например:

(function() {
    "use strict";

    var currentShape = new Shape();

    function handleMouseDown() {
        // ...
    }

    function handleMouseMove() {
        // ...
    }

    // ...

})();

Это полностью обратно совместимый с движками JavaScript, которые еще не поддерживают новый строгий режим, так что это не вызывает проблем в старых браузерах (вы просто не получаетепреимущества строгого режима).

Это также имеет то преимущество, что вы не вводите любых глобальных переменных в уже переполненное пространство глобальных переменных.currentShape является общим для функций внутри вашей области видимости, но ни он, ни handleMouseDown, ни handleMouseMove не являются глобальными.

Одним из побочных эффектов этого является то, что функции, на которые ссылаются обработчики событий, созданные с помощью onXYZ атрибуты в вашей HTML-разметке должны быть глобальными, и поэтому, если ни одна из ваших функций не является глобальной, вы больше не сможете их использовать;вместо этого вы используете addEventListener / attachEvent для подключения обработчиков событий.В любом случае это обычно хорошая идея, но если вам абсолютно необходимо использовать обработчики onXYZ, вы можете сделать это, сделав выбранные функции глобальные переменные, назначив их свойствам на window, например window.handleMouseMove = handleMouseMove; ( живой пример ).В целом, однако, лучше вообще избегать глобальных значений и использовать обработчики событий addEventListener / attachEvent (он же "DOM2").

---

Старый ответ перед публикациейваш реальный код :

Если код действительно такой, как указано в кавычках, вы будете создавать новый объект Shape каждый раз, когда вызывается onmousemove.

Я подозреваю, что у вас может бытьудалил код, который фактически вызывал проблему при его упрощении, чтобы добавить его к вашему вопросу.Например:

var shapes = new Array();
var current = new Shape();
var foo = current;            // <<==== New code
function onmousemove(e){
    current = new Shape();
    current.xArray.push(e.pageX, e.pageY);
    ...... 
    shapes.push(current);
}

С этим кодом, хотя current будет установлен на новый Shape при каждом вызове onmousemove, foo всегда будет указывать на начальный Shape, поскольку между переменной foo и переменной current нет постоянной связи;current может получить новое значение, не влияя на значение, хранящееся в foo.

Так что, если в вашем реальном коде есть что-то подобное (передача current в функцию, присвоение ее другой переменной или любое другоенекоторых других вещей), это было бы проблемой.

Answer 2

прости меня, но ... почему такой подход?

ИМХО лучше иметь что-то вроде

function Shape(xx, yy, sc) {
 this.x = xx;
 this.y = yy;
 this.selectedColor = sc;
}

var shapes = [];

function onmousemove(e) {
  var cur = new Shape(e.pageX, e.pageY, "???");
  shapes.push(cur);
}

Однако в вашем коде (с использованием вашего объекта Shape) я думаю, что есть небольшая проблема (и хотя бы один ненужный массив):

   var shapes= new Shape(); 

    function onmousemove(e){
        shapes.xArray.push(e.pageX); // Push the X
        shapes.yArray.push(e.pageY); // push the Y
    }

Таким образом, у вас будет только массив фигур, который содержит 2 массива (один для X и один для Y)

Answer 3

current является глобальной переменной.просто попробуйте создать переменную стека внутри функции.

function onmousemove(e){
   var temp = new Shape(); // won't create a new ojbect!!
    temp.xArray.push(e.pageX, e.pageY);
    ...... 
    shapes.push(temp);
}