typescript - 无法从 TypeScript 中的构造函数调用私有(private)函数

Question

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

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() 函数，它没有，因为它属于 栏。

尝试在 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(); });