Question

我正在尝试创建一个用于显示消息的JavaScript对象。它需要一个名称，要显示的文本和一个按钮对象数组作为参数。数组可以有任意长度，因此消息可以有1个或多个按钮。每个按钮对象都有一个要显示的名称和一个单击它时要执行的功能。当创建实际的html时，按钮的onclick事件应该是一个销毁消息的函数，以及按钮对象本身的功能。
下面的代码工作得很好，但我不确定这是不是很好的做法，因为我还没有真正理解闭包。

function createMessage(name, body, buttons) {
    this.name = name;
    this.body = body; // text to show in message
    this.buttons = buttons; // an array of button objects (button name, function to call when clicked)
}

createMessage.prototype.display = function () { // display the message
    this.msgElement = document.createElement("div");
    this.msgElement.appendChild(document.createTextNode(this.body));

    var btndiv = document.createElement("div"); // a container for the buttons
    btndiv.style.margin = "6px auto 6px auto";
    for (var i = 0; i < this.buttons.length; i++) {
        var btn = document.createElement("button");
        btn.onclick = function(msgObj,i){ // this looks like bad coding ...
            return function () {
                msgObj.remove();
                msgObj.buttons[i].onclickfn();
            }
        }(this,i);
        console.log(btn.onclick);
        btn.appendChild(document.createTextNode(this.buttons[i].name));
        btndiv.appendChild(btn);
    }
    this.msgElement.appendChild(btndiv);
    document.body.appendChild(this.msgElement); // actually insert the message into the webpage

    var msgObj = this;
    setTimeout(function(){ // start showing the message after a delay of 200ms and fade in
        msgObj.msgElement.style.opacity = "1";
    },200);
};

createMessage.prototype.remove = function () {
    // remove the message from the screen
    if(this.msgElement) console.log(this.name+" deleted.");
};

function createButton(name, onclickfn) {
    this.name = name;
    this.onclickfn = onclickfn;
}

问题是将msgObj.remove（）函数与按钮对象的onclickfn（）函数结合起来。（在for-loop中）。
这个坏代码？如果是这样，我的替代方案是什么？ 2. console.log（btn.onclick）总是记录＆＃34; function（）{msgObj.remove（）; msgObj.buttons [i] .onclickfn（）;}＆＃34;，即使这打印相同对于每个按钮，每个按钮执行不同的功能。这是否意味着有不同的msgObj和x不同的i变量？ 3.要淡入消息，我使用setTimeout函数。因为＆＃39;这个＆＃39;在这个函数里面会引用函数本身而不是createMessage对象，我使用变量msgObj（在createMessage.prototype.display的末尾）。这是正确的方法吗？

您可以找到带有工作代码示例here的JSfiddle。

提前致谢，
彼得

结合对象内部的功能：闭包和＆＃39;这个＆＃39;

0 个答案: