时间戳

首页 > 解决方案 > 如何在类方法中使用函数？

javascript - 如何在类方法中使用函数？

问题描述

我有一calculator堂课。这有以下方法，getInputFields和sum。

const addBtn: HTMLButtonElement = document.getElementById("add") as HTMLButtonElement;;
const subBtn: HTMLButtonElement = document.getElementById("subtract") as HTMLButtonElement;
const multiplyBtn: HTMLButtonElement = document.getElementById("multiply") as HTMLButtonElement;
const divideBtn: HTMLButtonElement = document.getElementById("divide") as HTMLButtonElement;

class Calculator {

    result: HTMLSpanElement;
    inputOne: HTMLInputElement;
    inputTwo: HTMLInputElement;
    numOne:number;
    numTwo:number;

    constructor() {
        this.result = document.getElementById("result") as HTMLSpanElement;
        this.inputOne = document.getElementById("num1") as HTMLInputElement;
        this.inputTwo = document.getElementById("num2") as HTMLInputElement;
    }

    getInputFields() {
        this.inputOne = document.getElementById("num1") as HTMLInputElement;
        this.inputTwo = document.getElementById("num2") as HTMLInputElement;
        this.numOne = parseInt(this.inputOne.value);
        this.numTwo = parseInt(this.inputTwo.value);
    }

    sum() {
        this.getInputFields();
        if (!isNaN(this.numOne) && !isNaN(this.numTwo)) {
            this.result.textContent = (this.numOne + this.numTwo).toString();
        }
    }

在上面的代码下面，我使用 addEventListener 来运行 sum 方法。

const calculator = new Calculator();
addBtn.addEventListener('click', calculator.sum);

你可以看到this.getInputFields是 insidesum()方法。为什么我有那个里面的 sum 方法？因为我想做减法、乘法、除法的方法。但我不想document.getElmentById("num1") as HTMLInputElement在每种方法中重复分配相同的代码。

这就是为什么我将该代码放入getInputFields. 但这在类方法中不起作用..

这是我得到的错误，

main.js:20 Uncaught TypeError: this.getInputFields is not a function
    at HTMLButtonElement.Calculator.sum (main.js:20)

标签： javascripttypescriptoop

解决方案

您的代码中的问题在于this关键字的使用。在其他语言中，如 C#，传递一个类方法将保持它“链接”到它的原始组件。不在 JavaScript 中（以及，通过扩展，TypeScript）。

在 JavaScript 中，this关键字是在执行时绑定的。因此，如果您调用将绑定到calculator.sum() this，但如果您这样做：sumcalculator

const func = calculator.sum;
func(); // <- inside this call, this is the global object (window)

基本上，当前面没有object.调用时， this 会隐式绑定到全局对象（窗口，如果是浏览器）。

在您的情况下，您可以简单地替换该行：

addBtn.addEventListener('click', calculator.sum);

和：

addBtn.addEventListener('click', (_clickEvent) => calculator.sum());
// or
addBtn.addEventListener('click', calculator.sum.bind(calculator));

请参阅@Thomas 在“this”关键字如何工作？有关您的问题的更多示例。

推荐阅读