无法从 TypeScript 中的构造函数调用私有函数

Question

我有一个简单的 TypeScript 类，它有一个私有函数，当用户单击一个按钮时应该调用它。点击事件通过构造函数中的jQueryclick()事件绑定

HTML

<div id="foobar">
  <h2>Foo</h2>
  <button type="button">Bar</button>
</div>

TS

$(() => {
    var foo = new Bar($("#foobar"));
})

class Bar {
    private view: JQuery;
    private button: JQuery;

    constructor(view: JQuery) {
            // Fields
        this.view = view;
        this.button = view.find("button");

        // Events
        this.button.click(() => { this.buttonClick() });
    }

    private buttonClick() {
        this.view.find("h2").css("background-color", "red");
    }
}

https://jsfiddle.net/z4vo5u5d/18781/

但是不知何故，在执行脚本时，控制台抱怨buttonClick 不是一个函数。我在这里错过了什么？

我想这是"this" in TypeScript 的问题。但我不知道为什么。

已编辑： 正如@Amadan 提到的：

this.button.click(() => { this.buttonClick() });

将incorrectly by jsfiddle翻译成

this.button.click(function () { this.buttonClick(); });

同时，typescriptlang.org/play 上的编译器将其正确翻译为：

var _this = this;
...
this.button.click(function () { _this.buttonClick(); });

Answer 1

我认为这里的问题是我喜欢称之为范围界定问题。

在旧版本的 TypeScript 中，就像 JSFiddle 使用的那样，this 的范围在您使用它的任何地方都不相同。它是一个动态变量，根据调用位置而变化。按钮事件函数中的this.buttonClick() 计算为按钮本身的buttonClick() 函数，它没有，因为它属于Bar。

尝试在您的constructor(view: JQuery) { 下方分配一个const self = this; 值，并在您的构造函数中将所有出现的this 替换为self。

这确保self 评估的对象始终是对象本身，而不是当前上下文，这可能不是您的目标。

class Bar {
    private view: JQuery;
    private button: JQuery;

    constructor(view: JQuery) {
        const self = this;

        // Fields
        self.view = view;
        self.button = view.find("button");

        // Events
        self.button.click(() => { self.buttonClick() });
    }

    private buttonClick() {
        this.view.find("h2").css("background-color", "red");
    }
}

That 应该可以完美运行。我以前多次遇到过这个问题。我已经习惯在我编写的每个函数中声明const self = this;。

已编辑： 正如@Amadan 提到的：

this.button.click(() => { this.buttonClick() });

将incorrectly by jsfiddle翻译成

this.button.click(function () { this.buttonClick(); });

同时，typescriptlang.org/play 上的编译器将其正确翻译为：

var _this = this;
...
this.button.click(function () { _this.buttonClick(); });