Question

我有这段代码：

var initChannelEvents = () =>
    $("#channels a").click(
        (eventObject: JQueryEventObject) => setActiveChannel(this)
    );

而且：

var initChannelEvents2 = () =>
    $("#channels a").click(
        function (eventObject: JQueryEventObject) {
            setActiveChannel(this);
        });

输出结果为：

var _this = this;
var initChannelEvents = function () {
    return $("#channels a").click(function (eventObject) { 
        return setActiveChannel(_this); });
    };

和此：

var initChannelEvents2 = function () {
    return $("#channels a").click(function (eventObject) {
        setActiveChannel(this);
    });
};

更新

TS：

var initChannelEvents2 = () =>
    $("#channels a").click(
        (eventObject: JQueryEventObject) => {
            setActiveChannel(this);
        }
    );

JS：

var _this = this;
var initChannelEvents2 = function () {
    return $("#channels a").click(function (eventObject) {
        setActiveChannel(_this);
    });
};

我理解第二个片段的输出，这就是我的预期。我不明白第一个的输出。我希望它们是一样的。

为什么他们不一样？我在这里不理解什么？

Answer 1

TypeScript（Lambda/arrow functions）中的

and in JavaScript ES6（() => ...）除标准函数表达式外还有一些其他行为，在编译为JavaScript ES3 / ES5时需要一些额外的代码。

var _this = this;

lambda中this的值自动绑定/保存到lambda之外的this值。正常函数将根据其调用方式获得this的值。

return setActiveChannel(_this);

如果lambda函数的主体是单个表达式（不是块{ ... }），则将自动返回该表达式的值，而不显示明确的return语句。

TypeScript输出与lambda函数和普通函数的区别

1 个答案: