Fatal编程技术网
  • javascript/
  • Javascript 来自对象的方法'；s实例不'；不执行

Javascript 来自对象的方法'；s实例不'；不执行

javascript

Javascript 来自对象的方法'；s实例不'；不执行,javascript,Javascript,我试图在单击按钮时执行对象内部的一个方法，但显然，它没有运行。我做错了什么？我在Chrome的控制台上看到了变量“price”，在按下按钮前后都显示为“undefined” Javascript代码： function Upgrade () { this.buy = function(){ this.price = 40; }; } var upg = new Upgrade(); var button = document.getElementById("b

我试图在单击按钮时执行对象内部的一个方法，但显然，它没有运行。我做错了什么？我在Chrome的控制台上看到了变量“price”，在按下按钮前后都显示为“undefined”

Javascript代码：

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

var upg = new Upgrade();

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

button.onclick = upg.buy;
HTML代码：

<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>


提供头衔
TODO写入内容
升级1
当您将函数分配给对象属性时，
此
引用新对象（
按钮，在您的示例中为
）

请改用此代码：


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


或：


我建议阅读MDN-。
这种情况发生的原因是，当您将方法直接分配给
onclick
属性时，它将被激发，而
This
是DOM元素

您可以将它包装成一个匿名函数，这样
this
关键字将指向您自己的对象


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


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


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

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


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

小提琴：

您可以在此问题中了解有关
此
关键字行为的更多信息：


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

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