Javascript OOP,一个不会起作用的简单计算器

Javascript OOP, a simple calculator that will not function

本文关键字:起作用 计算器 简单 一个 OOP Javascript      更新时间:2023-09-26

我正在构建一个简单的计算器,将其纳入一个简单的基于web的POS系统。我没有太多的经验与JS,但我在C编程,c++ &;Java广泛。

在firefox调试器中,我得到一个异常TypeError: "this。getValue不是一个函数"当它在updateDisplay()方法中被调用时

在JS中不支持这种结构吗?在一个对象的方法调用对象方法?

http://jsfiddle.net/uPaLS/33/

function KeyPad(divReference) {
    this.divDisplay = divReference;
    this.value = "0";
    this.comma = false;
}
KeyPad.prototype.getValue = function () {
    return parseFloat(this.value);
};
KeyPad.prototype.updateDisplay = function () {
    $(document).ready(function () {
        $(this.divDisplay).text(this.getValue());
    });
};
KeyPad.prototype.keyPressed = function (valueString) {
    if (valueString == '.' && this.comma === true) {
        return;
    }
    this.value = this.value + valueString;
    if (valueString == '.') {
        this.comma = true;
    }
    this.updateDisplay();
};
KeyPad.prototype.reset = function () {
    this.value = "0";
    this.comma = false;
    this.updateDisplay();
};

var keyPad = new KeyPad("#keypad_display");

在你的函数updateDisplay中,this不指向你的KeyPad对象:它指向$(document),因为你不在同一范围的函数是如何调用的。

KeyPad.prototype.updateDisplay = function () {
     //'this' is Keypad
     $(document).ready(function () {
         //'this' is $(document)
         $(this.divDisplay).text(this.getValue());
     });
 };

我不认为(也许我错了)使用$(document)。这里,在函数内部,是一个很好的实践。这应该可以简单地修复您的错误:

KeyPad.prototype.updateDisplay = function () {
         $(this.divDisplay).text(this.getValue());
 };

正如sroes在注释中所说,您应该使用$(document)。像这样准备好:

$(document).ready(function () {
    var keyPad = new KeyPad("#keypad_display");
 });