TypeScript 和无服务器：从公共方法调用私有方法时，`this` 未定义答案

【问题标题】：TypeScript And Serverless: `this` Undefined When Calling Private Methods from Public MethodsTypeScript 和无服务器：从公共方法调用私有方法时，`this` 未定义
【发布时间】：2018-02-02 22:43:29
【问题描述】：

我正在尝试在 TypeScript 中构建 AWS Serverless(https://serverless.com/) 函数。

具体来说，我定义了一个抽象类，它有一个调用一些私有方法的公共方法。

这是我简化的 TypeScript 类：

export abstract class AbstractPayloadProcessor {

    private preHandlePayload(payload) {
        console.log('arrived in prehandle method')
    }

    private postHandlePayload(payload) {
        console.log('arrived in posthandle method')
    }

    protected handleException(error) {
        console.log('Exception has occurred:', error)
    }

    public processPayload(event) {

        // this is the problematic line
        this.preHandlePayload(event.payload)
        .
        .
        .
    }
}

我使用 webpack 将其转译为 ES5，生成以下 JavaScript：

var AbstractPayloadProcessor = /** @class */ (function () {
    AbstractPayloadProcessor.prototype.preHandlePayload = function (payload) {
        console.log('arrived in prehandle method');
    };
    AbstractPayloadProcessor.prototype.postHandlePayload = function (payload) {
        console.log('arrived in posthandle method');
    };
    AbstractPayloadProcessor.prototype.handleException = function (error) {
        console.log('Exception has occurred:', error);
    };
    AbstractPayloadProcessor.prototype.processPayload = function (event) {
        // this line throws the exception
        this.preHandlePayload(event.payload);
        .
        .
        .
}());

确切的例外是：

TypeError: Cannot read property 'preHandlePayload' of undefined

到目前为止，我已经尝试将 webpack 配置设置为使用 ES6，并尝试使用箭头函数在 typescript 中声明函数。两者都产生相同的异常。

processPayload 函数在 Serverless 框架内被调用somewhere，但我不知道实现细节。如果有人对该框架有经验并能对此有所了解，我将不胜感激。

感谢阅读。

【问题讨论】：

如何调用processPayload 函数？这就是决定this的原因。
啊，不错。我实际上是在使用无服务器框架来定义 AWS 函数。我将更新问题以包含该详细信息，但我不太确定无服务器实际上如何调用您定义的逻辑。我得看看我能找到什么
我可以肯定的告诉你，这与abstract、public或private的使用无关。
如果您显示实现抽象类的类以及调用函数的位置会有所帮助。
我可以告诉你，这与无服务器框架无关。

标签： javascript typescript webpack serverless-framework

【解决方案1】：

胡思乱想

我猜你正在做的是使用someObject.processPayload 并将其作为回调传递给某个函数，或者将其作为事件处理程序保存在某处。这个函数依次调用this.preHandlePayload()，但它不能，因为没有被正确调用，它的this未定义。

更多信息

很少有可能导致this 在方法内部未定义，并且它是私有的还是公共的并不重要 - 因为您可以看到它们在转换后最终都是公共的。

一种可能的方法是，例如在method1 内部，如果您调用method2() 而不是this.method2()，那么您将在this 中未定义method2。

另一个常见的错误是将方法保存为事件处理程序或将其用作回调，例如：

x.onSomething = object.method;

或

functionThatTakesCallback(object.method);

要使这些情况起作用，您需要传递一个匿名函数，例如：

x.onSomething = (...args) => object.method(...args);

或将方法绑定到该对象：

x.onSomething = object.method.bind(object);

当然，很难说出你的情况真正的问题是什么，因为你没有告诉我们你是如何实际调用你的方法的，而这调用不是通常将undefined 放入this 的方法的定义。

【讨论】：