javascript - 这个 JS 有什么问题？

Question

有什么有趣的article警告 JS 问题。

但是，请注意 #2:

<input type="button" value="Gotcha!" id="MyButton" >
<script>
var MyObject = function () {
    this.alertMessage = "Javascript rules";
    this.ClickHandler = function() {
          alert(this.alertMessage );
      }
}();

</script>

注意结尾处 () 的自执行函数。但是，我很确定在执行 new MyObject() 时使用了 this.xxx。他写道:

If you call MyObject.ClickHandler(); you will get a popup saying "Javascript rules".

并且他的示例不起作用。我试过 MyObject.ClickHandler() 并遇到错误...(无法调用未定义的方法“ClickHandler”)

如何使 MyObject.ClickHandler() 工作？

Answer 1

您缺少 new 关键字。目前，this 指的是 window，ClickHandler 可通过 window.ClickHandler 获得。

使用 new 时关键字，将创建一个新对象，this 关键字将引用该新创建的对象。这就是为什么将 ClickHandler 方法添加到下面的 MyObject 中的原因:

var MyObject = new (function () {
    this.alertMessage = "Javascript rules";
    this.ClickHandler = function () {
        alert(this.alertMessage);
    };
})();

做这样的事情时要小心:

document.getElementById("MyButton")
    .addEventListener("click", MyObject.ClickHandler, false);

addEventListener 使 this 指向事件监听器被分配到的对象。另见 bind用于更改 this 范围。