javascript原型

这个原型代码的等效javascript代码是什么

var Confirm = Class.create();
Confirm.prototype = {
        initialize: function(element, message) {
                this.message = message;
                Event.observe($(element), 'click', this.doConfirm.bindAsEventListener(this));
        },

        doConfirm: function(e) {
                if(! confirm(this.message))
                        e.stop();
        }
}

---

这取决于你希望它有多抽象。在最简单的情况下：

<button onclick="return confirm('Are you sure?')">something</button>

什么 粗略地说：

var Confirm = (function()
    function Confirm(element, message) {
        var self = this;
        this.message = message;
        hookEvent(element, "click", function(event) {
            self.doConfirm(event);
        });
    }
    Confirm.prototype.doConfirm = Confirm$doConfirm;
    function Confirm$doConfirm(e) {
        if (!confirm(this.message)) {
            if (e.stopPropagation) {
                e.stopPropagation();
            }
            else {
                e.cancelBubble = true;
            }
            if (e.preventDefault) {
                e.preventDefault();
            }
            else {
                e.returnValue = false;
            }
        }
    }

    return Confirm;
})();

（如果您不介意使用匿名函数，可以稍微缩短它；我更喜欢通过给函数命名来缩短它。）

在上文中，

hookEvent

是一个实用函数，您必须提供调用

addEventListener

或

attachEvent

（以支持IE8及更早版本）的功能，如下所示：

function hookEvent(element, eventName, handler) {
    // Very quick-and-dirty, recommend using a proper library,
    // this is just for the purposes of the example.
    if (typeof element.addEventListener !== "undefined") {
        element.addEventListener(eventName, handler, false);
    }
    else if (typeof element.attachEvent !== "undefined") {
        element.attachEvent("on" + eventName, function(event) {
            return handler(event || window.event);
        });
    }
    else {
        throw "Browser not supported.";
    }
}

请注意，要实现跨浏览器兼容性，还需要做多少工作。您不必使用Prototype，但我强烈建议您使用另一个像样的库，即使不是Prototype，如、或。通过利用其他人在该领域所做的重要工作，您将节省大量精力来解决跨浏览器差异和处理边缘案例

如果您的目标是脱离原型，而不是完全脱离库，那么使用jQuery也是一样的：

var Confirm = (function()
    function Confirm(element, message) {
        this.message = message;
        $(element).click($.proxy(this.doConfirm, this));
    }
    Confirm.prototype.doConfirm = Confirm$doConfirm;
    function Confirm$doConfirm(e) {
        if (!confirm(this.message)) {
            return false;
        }
    }

    return Confirm;
})();

使用

$（）。单击
hookEvent
，
$.proxy
以避免创建显式闭包（仍然创建一个，只是在幕后为您执行），并且在jQuery事件处理程序中，
返回false
与停止传播和防止默认操作相同（就像Prototype的
stop
）。您也可以使用
stopPropagation
和
preventDefault
，而不用担心浏览器的差异；jQuery会为您处理它。大多数库都会这样做

如果你离开了Prototype，但仍然想要类似于它的
类
功能的东西，你可以加入你的代码。我在那篇博文中的目标不是替换Prototype的
类
（在我使用Prototype时），而是为了修复Prototype处理超级调用的效率极低的问题。但在这样做的过程中，创建了一个可以替换
Class
的完整实现。我真的需要更新其中的术语，因为它当然与类无关（JavaScript没有类），这只是JavaScript原型继承的一些方便的管道糖。
（Inb4 Raynos带着他的
pd
疯狂来到这里。）

原型是JavaScript。@FelixKling。这一个在我最喜欢的栏中排在第一位。@Downvoter:请阅读以理解为什么评论你的否决票很重要。我没有否决你，但我认为你错过了很多代码。
Class.create（）；
比您的示例做的要多得多。然后是整个标记和代码的混合，建议有人从漂亮的解耦DOM2代码移回DOM0。@T.J.Crowder:如果OP想要“现代”不引人注目的javascript，他们应该使用框架。现在没有框架的纯javascript几乎没有意义-你自己的答案是一个完美的例子。@thg435：我同意（正如你从我的答案中可以看出的那样）但这并不意味着如果他们不想使用Prototype，他们就不想使用任何框架，也不想回到1997年的事件处理程序。：-“Prototype的
stop
既能
preventDefault
又能
stopPropagation
。当然，大约三分之一的网络用户（比中国的用户还多）正在使用IE8或更低版本，它们没有
addEventListener
和相关的
preventDefault
/
stopPropagation
@t.J.Crowder感谢原型提示。他要求使用JavaScript，而不是向后兼容的JavaScript，因此我将避免用IE8 iCkines玷污自己，让其他人来回答……#多米尼克：当然是你的要求，但忽略当前现实中如此巨大的一部分是一个相当大的遗漏。“JavaScript没有类，也永远不会。”---小心最后那部分！es讨论的某些部分正在努力推动它们，尽管从我所看到的来看，我认为它们不会进入es Harmony。@Domenic:我是根据Brendan Eich在他的声明中所说的——但我记错了声明！（包、名称空间和早期绑定永远都不存在；可以在该列表中列出已宣誓的类，但它显然不在该列表中。）因此从上面删除了它。：-）
function Confirm(element, message) {
    this.message = message;

    element.addEventListener("click", this.doConfirm.bind(this), false);
}

Confirm.prototype.doConfirm = function (e) {
    if (!confirm(this.message)) {
        e.preventDefault();
        e.stopPropagation();
    }
};