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

我有一个

计算器
课。这有以下方法，
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);

您可以看到
这个。getInputFields
在
sum（）方法中。为什么我要用内和法？
因为我想做减法，乘法，除法。
但是我不想在每个方法中重复相同的代码来分配
document.getElmentById（“num1”）作为HTMLInputElement

这就是我将代码放入
getInputFields
的原因。
但这在类方法内部不起作用

这是我的错误

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

代码中的问题在于
this
关键字的使用。
在其他语言中，如C#，传递类方法将使其与原始组件“链接”。不在JavaScript中（扩展为TypeScript）

在JavaScript中，
这个
关键字在执行时绑定。
因此，如果调用
calculator.sum（）
，则
sum
中的
将绑定到
calculator
，但如果您这样做：

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

与：

有关您的问题的更多示例，请参阅中@Thomas链接的优秀答案。
事件侦听器回调中“this”的值会发生变化。将类方法绑定到构造函数中的“this”
addBtn.addEventListener('click', calculator.sum);

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