這個JS怎么了？

Question

有任何有趣的文章警告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 。 他寫了 ：

如果調用MyObject.ClickHandler(); 您將看到一個彈出窗口，顯示“ Javascript規則”。

而且他的樣本無效。 我嘗試了MyObject.ClickHandler()並收到一個錯誤...（無法調用未定義的方法'ClickHandler'）

如何使MyObject.ClickHandler()工作？

Answer 1

您缺少new關鍵字。 當前， this是指window並且可以通過window.ClickHandler獲得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范圍。

Answer 2

編輯： Zoiks，Lekensteyn撞在了頭上。 我不完全了解您打算在這里完成的工作...

---

那不完全是“自我執行功能”。 如果您是這樣構建的：

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

然后，我將其稱為自執行功能。

完成此操作后，現在可以執行MyObject.ClickHandler()並獲取警報。