javascript - 在 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 新手，不确定我这样做是否正确。

更新: 这是我未经编辑的代码:

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)。这会创建一个单独且不相关的 implicit global而不是更新 currentShape，因为 JavaScript 区分大小写(s 和 S 是两个不同的变量)。

为了避免将来出现此类问题，您可以考虑使用 strict mode由最新版本的 JavaScript，ECMAScript 第五版提供。在严格模式下，除其他外，您不再拥有 horror of implicit globals 。分配给无法解析的引用会导致错误。

为此，您需要在所有代码周围使用作用域函数，并将 "use strict"; 放在其顶部，如下所示:

(function() {
    "use strict";

    var currentShape = new Shape();

    function handleMouseDown() {
        // ...
    }

    function handleMouseMove() {
        // ...
    }

    // ...

})();

这与尚不支持新的严格模式的 JavaScript 引擎完全向后兼容，因此它不会在旧浏览器上造成麻烦(您只是无法获得以下好处)严格模式)。

这还有一个优点，即您不会将任何全局变量引入到已经拥挤的全局变量空间中。 currentShape 由作用域函数内的函数共享，但它、handleMouseDown 或 handleMouseMove 都不是全局的。

这样做的一个副作用是，通过 HTML 标记中的 onXYZ 属性创建的事件处理程序引用的函数需要是全局的，因此，如果您的函数都不是全局的，则可以'不再使用它们；您可以使用 addEventListener/attachEvent 来连接事件处理程序。无论如何，这通常是个好主意，但如果您绝对必须使用 onXYZ 处理程序，则可以通过将选定的函数分配给 window< 上的属性来使它们成为全局变量。/，例如window.handleMouseMove = handleMouseMove; (live example)。不过，一般来说，最好完全避免任何全局变量，并使用事件处理程序的 addEventListener/attachEvent (又名“DOM2”样式)。

<小时/>

发布真实代码之前的旧答案:

如果代码确实如引用的那样，则每次调用 onmousemove 时都会创建一个新的 Shape 对象。

我怀疑您在简化代码以将其添加到您的问题时可能已删除了实际导致问题的代码。例如:

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

使用该代码，尽管每次调用 onmousemove 时 current 都会设置为新的 Shape，但 foo > 将始终指向 initial Shape，因为变量 foo 和变量 current 之间没有持久的连接>; current 可以获取新值，而不会影响 foo 所持有的值。

因此，如果您的真实代码有类似的内容(将 current 传递到函数中，将其分配给另一个变量，或任何其他变量)，那就是问题所在。