Question

我正在尝试在单击按钮时执行对象内部的方法，但显然，它不会运行。我究竟做错了什么？我在Chrome的控制台上看到了变量“price”，在按下按钮之前和之后都显示“未定义”。

Javascript代码：

function Upgrade () {
    this.buy = function(){
        this.price = 40;
    };
}

var upg = new Upgrade();

var button = document.getElementById("button");

button.onclick = upg.buy;

HTML code：

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div>TODO write content</div>
        <button id="button" type="button">Upgrade 1</button>
    <script src='newjavascript.js'></script>
    </body>
</html>

Answer 1

这是因为当您将方法直接分配给onclick属性时，将使用this作为DOM元素触发它。

您可以将其包装到匿名函数中，因此this关键字将指向您自己的对象。

button.onclick = function() {
    upg.buy();
}

另外，我建议您将方法移动到函数的原型中。

function Upgrade () {
    this.price = 0;
}

Upgrade.prototype.buy = function() {
    this.price = 40;
}

将其分配给prototype将使此方法在函数的所有对象之间共享，而不是为每个对象创建一个新副本。

小提琴：http://jsfiddle.net/prVD9/

您可以在此问题中详细了解this关键字行为：How does "this" keyword work within a function?

Answer 2

为对象属性分配函数时，this引用新对象（示例中为button）。

请改用此代码：

function Upgrade () {
    var that = this;
    this.buy = function(){
        that.price = 40;
    };
}

或：

button.onclick = upg.buy.bind(upg);

我建议您阅读MDN - this keyword。

来自对象实例的方法不会执行

2 个答案: