javascript - 无法从委托(delegate)函数访问类属性

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 3 年前。

长期 .Net 开发人员，负责将一堆旧的 JS 代码转换为新的 ES6 JS 模块。我正在尝试运行下面的(您会认为的)简单代码，但是当调用 JumpToVideoNew 时，委托(delegate)函数中的 this.allowVidJump 无权访问类属性allowVidJump。我正在尝试设置一个简单的定时延迟，以便调用代码无法重复调用 JumpToVideoNew 函数。我理解变量失去作用域的概念，但我尝试设置 _this = this;并在委托(delegate)中使用 _this 也没有成功。还尝试将对变量的引用传递给函数并以这种方式访问​​它，但也没有成功。在这么简单的事情上花费 2 个小时提醒我为什么我尽可能避开 JavaScript。

export class WebUtility {
    constructor() {
        this.allowVideoJump = true;
        this.delay = function () { this.allowVidJump = true; };
    }

    jumpToVideoNew() {
        if (this.allowVideoJump) {
            this.allowVideoJump = false;
            setTimeout(this.delay, 1000);
        }
    }
}

Answer 1

使用匿名箭头函数JS 中的 function 关键字创建了一个新的作用域以及一个新的 this (您刚刚定义的 function === this)，因此 this.allowVidJump 本质上是该范围内的 (function() {}).allowVidJump

尝试这样的事情:

export class WebUtility {
    constructor() {
        this.allowVideoJump = true;
        this.delay = () => { this.allowVidJump = true; }; // anonymous lambda
    }

    jumpToVideoNew() {
        if (this.allowVideoJump) {
            this.allowVideoJump = false;
            setTimeout(this.delay, 1000);
        }
    }
}