鏈接到按鈕的原型功能不起作用

Question

我有一個類（我認為這被稱為），並在我的代碼中創建了一個名為peter的對象。 我現在想按以下方式升級Peter ：

// Define the class
function character(name, level){
   this.name = name;
   this.level = level;
}

// Create Peter at level 1
var peter = new character("Peter", 1);

// This will display the name of the character, level and a button to level him up
character.prototype.display = function() {
    document.getElementById("name").innerHTML += this.name;
    document.getElementById("level").innerHTML += this.level;

    // This line calls `levelup()` on load which is not what I want
    // and clicking the button no more calls `levelup`!
    document.getElementById("levelupbutton").onclick = this.levelup();

    // This line would call the function on click, but it looks like `this`
    // is not being passed down to the function `levelup` so I get NaN on
    // this.level down below?
    //document.getElementById("levelupbutton").onclick = this.levelup;
};


character.prototype.levelup = function() {
    alert("Level up in progress!");
    this.level++;
    alert(this.level);
}

peter.display();

jsfilldle

我可能錯誤地調用了該函數，但似乎無法弄清楚如何正確執行該函數。 誰能給我一些指導？ 我是OOP的新手，因此，如果解決方案涉及OOP，請嘗試解釋一下嗎？

Answer 1

您需要將此bind到levelup而不是直接調用它以獲得所需的行為。 用正確的答案更新了小提琴 。

levelupbutton.onclick = this.levelup.bind(this);

 function character(name, level){ this.name = name; this.level = level; } var peter = new character("Peter", 1); // Instantiate new objects with 'new' character.prototype.display = function(){ document.getElementById("name").innerHTML += this.name; document.getElementById("level").innerHTML += this.level; document.getElementById("levelupbutton").onclick = this.levelup.bind(this); }; character.prototype.levelup = function(){ alert("Level up in progress!"); this.level++; alert(this.level); } peter.display(); 

 <span>Character Name:</span> <span id="name"></span><br /> <span>Character Level:</span> <span id="level"></span><br /> <button id="levelupbutton">Level Up!</button> 

Answer 2

將處理程序函數附加到元素時，該處理程序內部的this的值是對該元素的引用。 它與傳遞給處理程序的事件參數的e.target屬性的值相同。

參考： https : //developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener#The_value_of_this_within_the_handler

你可以使用Function.prototype.bind()這將創建一個擁有它的一個新的函數方法this組所提供的價值。

只需添加click處理程序，如下所示：

document.getElementById("levelupbutton").addEventListener('click', 
    this.levelup.bind(this)
);

為什么要使用addEventListener？

addEventListener是注冊W3C DOM中指定的事件偵聽器的方法。

小提琴： http : //jsfiddle.net/abhitalks/sjfxorxz/6/

片段：

 function character(name, level) { this.name = name; this.level = level; } character.prototype.levelup = function() { this.level++; document.getElementById("level").innerHTML += this.level; } character.prototype.display = function() { document.getElementById("name").innerHTML += this.name; document.getElementById("level").innerHTML += this.level; document.getElementById("levelupbutton").addEventListener('click', this.levelup.bind(this) ); } var peter = new character("Peter", 1); peter.display(); 

 <span>Character Name:</span> <span id="name"></span><br /> <span>Character Level:</span> <span id="level"></span><br /> <button id="levelupbutton">Level Up!</button> 

---

或者，您也可以保存引用，並在匿名函數調用中使用該引用，而不是對其進行內聯。

例如：

character.prototype.display = function() {
    var self = this;
    document.getElementById("levelupbutton").addEventListener('click', 
        function () {
            self.levelup();
    });
}

小提琴2： http ： //jsfiddle.net/abhitalks/sjfxorxz/9/

片段2：

 function character(name, level) { this.name = name; this.level = level; } character.prototype.levelup = function() { this.level++; document.getElementById("level").innerHTML += this.level; } character.prototype.display = function() { var self = this; document.getElementById("name").innerHTML += this.name; document.getElementById("level").innerHTML += this.level; document.getElementById("levelupbutton").addEventListener('click', function () { self.levelup(); }); } var peter = new character("Peter", 1); peter.display(); 

 <span>Character Name:</span> <span id="name"></span><br /> <span>Character Level:</span> <span id="level"></span><br /> <button id="levelupbutton">Level Up!</button>