Question

我试图通过使用新创建的div作为我的对象的原型来“扩展”DIV。

据我了解Javascript，在通过“new”创建我的Object的新实例时，原型对象被复制，分配给“this”，然后执行该函数（作为构造函数）。

一切似乎都有效，除了每当我创建另一个对象并将其添加到DOM时，它“替换”原始div。更确切地说：构造函数总是改变相同的div。

使用MyTest.prototype = document.createElement("div");给出了我描述的行为，在我的代码示例中的两个注释行是我也尝试过的，但无济于事。

我知道尝试扩展DOM是不受欢迎的，但我想了解这种行为，因为我认为我知道原型是如何工作的，这根本不符合我的想法。

这是我想要做的最小例子：

<!DOCTYPE html>
<html>
<head>
<title>Div-Prototype-Test</title>
<script type="text/javascript">

var height = 20;
var top = 0;

function MyTest() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);

    this.style.backgroundColor = "rgb("+ r +","+ g +","+ b +")";
    this.style.position        = "absolute";
    this.style.width           = "500px";
    this.style.height          = height + "px";
    this.style.top             = top + "px";

    top += height;

    document.getElementsByTagName("body")[0].appendChild(this);
}

MyTest.prototype = document.createElement("div");
// MyTest.prototype = document.createElement("div").cloneNode(true);
// MyTest.prototype = new Element();

window.addEventListener(
    "load", 
    function() {
        var a = new MyTest();
        var b = new MyTest();
        var c = new MyTest();
        var d = new MyTest();
    }
);

</script>
</head>
<body>
</body>
</html>

PS：由于某个Javascript-Framework我在Javascript中搜索任何改变原型的东西总是导致数百个与我的问题无关的结果 - 请告诉我是否错过了已经讨论过的问题。

编辑：

让我的问题更清楚：

以下是我使用对象作为原型的示例 - 其属性被复制。

function A() {
}

A.prototype = { property: 4 };

A.prototype.set = function(num) {
    this.property = num;
}

window.addEventListener(
    "load", 
    function() {
        var message = "";

        var x1 = new A();
        message += "A1 : "+ x1.property +"\n";

        x1.set(15);
        message += "A1 : "+ x1.property +"\n";

        var x2 = new A();
        message += "A2 : "+ x2.property +"\n";

        alert(message);
    }
);

然后警报说：

A1 : 4
A1 : 15
A2 : 4

然而，我的第一个例子中的Div似乎没有复制，它的行为类似于Singleton或Monostate。它不应该这样吗？

将Protype对象复制到新对象
将新对象分配给“this”
这是给构造函数
这是由构造函数返回的（如果没有指定return语句）

Answer 1

MyTest.prototype = document.createElement("div");

此行仅执行一次。它创建了一个MyTest.prototype对象，它也是一个DOM元素<div>。每个 MyTest对象都会收到这个相同的原型。因此，您创建的每个MyTest对象都将与您仅创建一次的<div>个关联。您必须为每个<div>创建新 MyTest。

尝试这种模式：

MyTest = function() {
    var myDiv = document.createElement("div");

    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);

    myDiv.style.backgroundColor = "rgb("+ r +","+ g +","+ b +")";
    myDiv.style.position        = "absolute";
    myDiv.style.width           = "500px";
    myDiv.style.height          = height + "px";
    myDiv.style.top             = top + "px";

    top += height;

    document.getElementsByTagName("body")[0].appendChild(myDiv);

    return myDiv;
}

此功能使用<div>调用创建新的createElement()。然后，它会在新<div>上设置所需的所有属性。最后，它会返回您的新<div>。因此，您可以将其称为

var myNewDiv = MyTest();
var myNewDiv = new MyTest();

两种选择都有效。在第二种情况下，new关键字创建一个虚拟新对象，但这并不重要，因为实际返回了在函数内创建的新<div>。

Answer 2

你正在混合各种各样的东西。首先，检查我对this SO question的回答。其次，可以完成Element对象的扩展，但并非所有浏览器都支持。检查this SO question。

在我看来，您计划以某种标准化方式向document添加元素。您的代码可以重写（我稍微修改了一下）：

function appendElement(content,id) {
    var rgb = 'rgb('+ [Math.floor(Math.random() * 256),
               Math.floor(Math.random() * 256),
               Math.floor(Math.random() * 256)].join(',') +')';
    var top  = Math.floor( Math.random() * 300 + 20 );
    var left = Math.floor( Math.random() * 100 + 10 );

    this.style.backgroundColor = rgb;
    this.style.position        = "absolute";
    this.style.width           = "500px";
    this.style.height          = "200px";
    this.style.left            = left+"px";
    this.style.top             = top+"px";
    this.innerHTML             = content || '';
    this.id                    = id || Math.Random*10000+1
    document.getElementsByTagName("body")[0].appendChild(this);
}

现在你可以使用它来使用`appendElement将任何元素附加到document，如下所示：

appendElement.call(document.createElement('div'),'empty div');
appendElement.call(document.createElement('span'),'new empty span','span1');

这会是你想要的目标吗？

Answer 3

我找到了一个解决方法，它基本上是相反的 - 原型是一个空白对象，我将新对象数据复制到构造函数中的div中：

var height = 20;
var top = 0;

function deepCopy(fromObject, toObject, depth) {
    if(typeof(fromObject) != "object" || typeof(toObject) != "object") {
        // throw "deepCopy only copies objects"
        return;
    }

    if (typeof(depth) == "undefined") {
        depth = 0;
    } else if (depth > 100) {
        // Recursion depth too high. Abort.
        // throw "deepCopy recursion depth cap hit"
        return;
    }

    for (var key in fromObject) {
        if (typeof(fromObject[key]) == "object" && fromObject[key] != null) {
            if (typeof(fromObject[key].nodeType) != "undefined") {
                toObject[key] = fromObject[key].cloneNode(true);
            } else {
                if (typeof(toObject[key]) != "object") {
                    toObject[key] = {};
                }
                deepCopy(fromObject[key], toObject[key], depth + 1);
            }           

        }
        toObject[key] = fromObject[key];
    }
}    

function MyTest() {
    // This is ugly...
    var self = document.createElement("div");
    deepCopy(MyTest.prototype, self);

    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);

    self.style.backgroundColor = "rgb("+ r +","+ g +","+ b +")";
    self.style.position        = "absolute";
    self.style.width           = "500px";
    self.style.height          = height + "px";
    self.style.top             = top + "px";

    top += height;

    document.getElementsByTagName("body")[0].appendChild(self);

    return self;
}

MyTest.prototype = {};
// MyTest.prototype = document.createElement("div").cloneNode(true);
// MyTest.prototype = new Element();

window.addEventListener(
    "load", 
    function() {
        var a = new MyTest();
        var b = new MyTest();
        var c = new MyTest();
        var d = new MyTest();
    }
);

虽然我觉得我的deepCopy函数是执行任务的一种相当不优雅（并且可能非常错误）的方式，但是使用cloneNode（）的另一种方式不起作用。

我的原始问题来自于：复制原型时，会复制所有标量值，而所有对象都被简单引用（如复制指针，指针值重复，但不是指向的数据）

希望这有助于某人。

扩展DIV元素时如何制作多个元素？

3 个答案: