ES6 中对 class 的引用丢失

Question

我有以下结构 Javacript es5-es6 并且控制器 class 在 class Get 中丢失了引用，我已经在调查但我找不到如何避免丢失引用。

class Controller {
    constructor() {
        this.name = 'Test';
    }
    test() {
        console.log(1, this.name);
    }
}

referenceController = new Controller();
// working reference: console.log(1, 'Test');
referenceController.test();


class Get {
    method() {
        return {
            controller: referenceController.test
        }
    }
}

// Lost self reference: console.log(1, undefined)
new Get().method().controller()

Answer 1

在本节中，您将测试函数添加为返回对象的属性。

{
    controller: referenceController.test
}

然后，当你调用它作为那个对象的方法时(method().controller()) this引用这个对象，而name 属性是从对象。

您可以绑定上下文以保留引用：

referenceController.test.bind(referenceController)

Answer 2

您的 method 函数 returns 具有键 controller 的对象，其值为 不是对 Controller class 但是函数引用了 this.

方法的 this 上下文将被分配给它附加到的对象 当它被调用时 .

所以new Get().method().controller()

调用方法 test，其中 this 是 new Get().method() 解析为的值：

{
  controller: referenceController.test
}

因此注销 undefined

修改你的Getclass如下：

class Controller {
    constructor() {
        this.name = 'Test';
    }
    test() {
        console.log(1, this.name);
    }
}

referenceController = new Controller();
// working reference: console.log(1, 'Test');
referenceController.test();

class Get {
    method() {
        return {
            controller: referenceController
        }
    }
}

// this logs out correctly
new Get().method().controller.test();

上面的工作是因为 new Get().method().controller 解析为 Controller class 实例 referenceController 有一个属性定义 name 有一个值。

ES6 中对 class 的引用丢失

The reference to the class in ES6 is lost

javascript

class-reference

ecmascript-6

修改你的Getclass如下：