ES6中对类的引用丢失了[重复]答案

【问题标题】：The reference to the class in ES6 is lost [duplicate]ES6中对类的引用丢失了[重复]
【发布时间】：2017-08-23 16:35:50
【问题描述】：

我有以下结构 Javacript es5-es6 并且控制器类在 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()

【问题讨论】：

obj.test() 将 test 作为方法调用，语法为 context dot method。传递 obj.test 通过 test 作为对该 函数的引用， 没有上下文，并且不再作为方法。您必须将函数绑定到正确的上下文，因为它们不知道this，或者总是调用obj.test

标签： javascript ecmascript-6 class-reference

【解决方案1】：

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

{
    controller: referenceController.test
}

然后，当您将其作为该对象的方法调用时 (method().controller())，this 引用该对象，并从该对象中读取 name 属性。

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

referenceController.test.bind(referenceController)

【讨论】：

现在可以工作了，非常感谢！！

【解决方案2】：

您的method 函数返回一个带有键controller 的对象，其值不是对Controller 类实例的引用，而是一个引用的函数 this。

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

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

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

{
  controller: referenceController.test
}

因此它注销undefined

如下修改您的 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
        }
    }
}

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

上述方法有效，因为new Get().method().controller 解析为Controller 类实例referenceController，确实具有定义name 的属性值。

【讨论】：