修复JavaScript计算器中操作数未显示问题：构造函数初始化最佳实践-html教程-PHP中文网

修复javascript计算器中操作数未显示问题：构造函数初始化最佳实践

本教程旨在解决一个常见的JavaScript计算器开发问题：点击按钮后数值无法正常显示。核心问题在于`this.currentOperand`在`appendNumber`函数中未被正确初始化。文章将深入分析问题根源，提供详细的解决方案，即在`Calculator`类的构造函数中调用`this.clear()`方法，确保操作数的初始状态正确，并提供完整的代码示例和最佳实践建议，帮助开发者构建更健壮的Web计算器应用。

深入理解JavaScript计算器中的显示问题

在构建基于JavaScript的计算器应用时，开发者可能会遇到一个常见的问题：当用户点击数字按钮时，期望的数值并未显示在屏幕上。经过调试，通常会发现错误信息指向appendNumber函数中对this.currentOperand的操作，例如Cannot read properties of undefined (reading 'toString')。这表明在尝试将数字追加到当前操作数之前，this.currentOperand的值为undefined。

问题的根本原因在于Calculator类的实例被创建时，其内部状态变量如currentOperand和previousOperand并未被初始化。虽然代码中定义了clear()方法来设置这些变量的初始值（空字符串和undefined），但在Calculator的构造函数中并未调用此方法，导致在首次调用appendNumber时，this.currentOperand处于未定义状态。

具体来说，当执行以下代码行时：

立即学习“Java免费学习笔记（深入）”；

this.currentOperand = this.currentOperand.toString() + number.toString()

登录后复制

如果this.currentOperand是undefined，尝试调用undefined.toString()将导致运行时错误，从而中断程序的执行，使得数字无法显示。

解决方案：构造函数中的状态初始化

解决此问题的最直接且推荐的方法是在Calculator类的构造函数中显式地调用this.clear()方法。clear()方法负责将计算器的所有内部状态变量重置为它们的初始值，包括currentOperand、previousOperand和operation。通过在构造函数中调用它，我们可以确保Calculator类的任何新实例在创建时都处于一个已知的、干净的初始状态。

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

修改后的Calculator类构造函数应如下所示：

class Calculator {
    constructor(previousOperandTextElement, currentOperandTextElement) {
        this.previousOperandTextElement = previousOperandTextElement;
        this.currentOperandTextElement = currentOperandTextElement;
        this.clear(); // 关键的修复：在构造函数中初始化状态
    }

    // ... 其他方法保持不变
}

登录后复制

通过添加this.clear()这一行，当const calculator = new Calculator(...)被执行时，currentOperand将被设置为一个空字符串（''），而不是undefined。这样，后续对appendNumber的调用将能够安全地执行字符串拼接操作，从而正确显示数字。

完整代码示例

为了提供一个完整的上下文，以下是修正后的JavaScript代码，以及配套的HTML和CSS代码。

JavaScript (script.js)

class Calculator {
    constructor(previousOperandTextElement, currentOperandTextElement) {
        this.previousOperandTextElement = previousOperandTextElement;
        this.currentOperandTextElement = currentOperandTextElement;
        this.clear(); // 确保在实例化时初始化计算器状态
    }

    clear() {
        this.currentOperand = '';
        this.previousOperand = '';
        this.operation = undefined;
    }

    delete() {
        this.currentOperand = this.currentOperand.toString().slice(0, -1);
    }

    appendNumber(number) {
        if (number === '.' && this.currentOperand.includes('.')) return;
        this.currentOperand = this.currentOperand.toString() + number.toString();
    }

    chooseOperation(operation) {
        if (this.currentOperand === '') return;
        if (this.previousOperand !== '') {
            this.compute();
        }
        this.operation = operation;
        this.previousOperand = this.currentOperand;
        this.currentOperand = '';
    }

    compute() {
        let computation;
        const prev = parseFloat(this.previousOperand);
        const current = parseFloat(this.currentOperand);
        if (isNaN(prev) || isNaN(current)) return;
        switch (this.operation) {
            case '+':
                computation = prev + current;
                break;
            case '-':
                computation = prev - current; // 修正：原代码为prev + current
                break;
            case '*':
                computation = prev * current; // 修正：原代码为prev + current
                break;
            case '÷':
                computation = prev / current; // 修正：原代码为prev + current
                break;
            default:
                return;
        }
        this.currentOperand = computation;
        this.operation = undefined;
        this.previousOperand = '';
    }

    getDisplayNumber(number) {
        const stringNumber = number.toString();
        const integerDigits = parseFloat(stringNumber.split('.')[0]);
        const decimalDigits = stringNumber.split('.')[1];
        let integerDisplay;
        if (isNaN(integerDigits)) {
            integerDisplay = '';
        } else {
            integerDisplay = integerDigits.toLocaleString('en', {
                maximumFractionDigits: 0
            });
        }
        if (decimalDigits != null) {
            return `${integerDisplay}.${decimalDigits}`;
        } else {
            return integerDisplay;
        }
    }

    updateDisplay() {
        // 修正：确保getDisplayNumber的结果被赋值给innerText
        this.currentOperandTextElement.innerText = this.getDisplayNumber(this.currentOperand);
        if (this.operation != null) {
            // 修正：确保previousOperandTextElement显示完整表达式
            this.previousOperandTextElement.innerText = `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`;
        } else {
            this.previousOperandTextElement.innerText = '';
        }
    }
}

const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');
const equalsButton = document.querySelector('[data-equals]');
const deleteButton = document.querySelector('[data-delete]');
const allClearButton = document.querySelector('[data-all-clear]');
const previousOperandTextElement = document.querySelector('[data-previous-operand]');
const currentOperandTextElement = document.querySelector('[data-current-operand]');

const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement);

numberButtons.forEach(button => {
    button.addEventListener('click', () => {
        calculator.appendNumber(button.innerText);
        calculator.updateDisplay();
    });
});

operationButtons.forEach(button => {
    button.addEventListener('click', () => {
        calculator.chooseOperation(button.innerText);
        calculator.updateDisplay();
    });
});

equalsButton.addEventListener('click', button => {
    calculator.compute();
    calculator.updateDisplay();
});

allClearButton.addEventListener('click', button => {
    calculator.clear();
    calculator.updateDisplay();
});

deleteButton.addEventListener('click', button => {
    calculator.delete();
    calculator.updateDisplay();
});

登录后复制

注意： 在上述compute()方法中，原代码的减法、乘法和除法操作都错误地使用了加法 (prev + current)。在提供的修正代码中已将其更正为正确的运算符。同时，updateDisplay()方法也进行了优化，确保getDisplayNumber的返回值被正确应用到显示元素上。

CSS (styles.css)

*, *::before, *::after {
    box-sizing: border-box;
    font-family: Arial Black, sans-serif;
    font-weight: normal;
}

body {
    padding: 0;
    margin: 0;
    background: linear-gradient(to right, #00AAFF, #99e016);
}

.calculator-grid {
    display: grid;
    justify-content: center;
    align-content: center;
    min-height: 100vh;
    grid-template-columns: repeat(4,100px);
    grid-template-rows: minmax(120px,auto) repeat(5,100px);
}

.calculator-grid > button {
    cursor: pointer;
    font-size: 2rem;
    border: 1px solid white;
    outline: none;
    background-color: rgba(255,255,255,.75);
}

.calculator-grid > button:hover {
    cursor: pointer;
    font-size: 2rem;
    border: 1px solid white;
    outline: none;
    background-color: rgba(255, 255, 255, 0.95);
}

.span-two {
    grid-column: span 2;
}

.output {
    grid-column: 1/-1;
    background-color: rgba(0,0,0,.75);
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    flex-direction: column;
    padding: 10px;
    word-wrap: break-word;
    word-break: break-all;
}

.output .previous-operand {
    color: rgba(255,255,255,.75);
    font-size: 1.5rem;
}

.output .current-operand {
    color: white;
    font-size: 2.5rem;
}

登录后复制

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link href="styles.css" rel="stylesheet">
    <script src="script.js" defer></script>
</head>
<body>
    <div class = "calculator-grid">
        <div class="output">
            <div data-previous-operand class="previous-operand"></div>
            <div data-current-operand class="current-operand"></div>
        </div>
        <button data-all-clear class="span-two">AC</button>
        <button data-delete>DEL</button>
        <button data-operation> ÷ </button>
        <button data-number> 1 </button>
        <button data-number> 2 </button>
        <button data-number> 3 </button>
        <button data-operation> * </button>
        <button data-number> 4 </button>
        <button data-number> 5 </button>
        <button data-number> 6 </button>
        <button data-operation> + </button>
        <button data-number> 7 </button>
        <button data-number> 8 </button>
        <button data-number> 9 </button>
        <button data-operation> - </button>
        <button data-number> . </button>
        <button data-number> 0 </button>
        <button data-equals class="span-two">=</button>
    </div>
</body>
</html>

登录后复制

注意事项与总结

构造函数初始化是关键： 在面向对象编程中，确保类的实例在创建时处于一个有效且定义良好的状态至关重要。将初始化逻辑（如clear()方法）放在构造函数中，可以避免因未定义状态而导致的运行时错误。
避免隐式undefined： 尽管JavaScript允许变量在声明后不赋值而默认为undefined，但在进行字符串拼接、数学运算等操作前，最好显式地将其初始化为预期的类型（如空字符串''或数字0），以增强代码的健壮性。
代码审查与测试： 定期审查代码，尤其是在复制或改编他人代码时，是发现这类初始化问题的有效方法。结合单元测试和集成测试，可以更早地捕获和修复潜在的错误。
操作符逻辑检查： 在本案例中，除了初始化问题，还发现compute方法中的减、乘、除操作符逻辑错误。这提醒我们，即使是看似简单的逻辑也需要仔细检查，确保其正确性。

通过在Calculator类的构造函数中调用this.clear()，我们不仅解决了数字无法显示的问题，还提升了代码的质量和可靠性。这是一个在JavaScript类设计中值得遵循的良好实践。

以上就是修复JavaScript计算器中操作数未显示问题：构造函数初始化最佳实践的详细内容，更多请关注php中文网其它相关文章！