javascript - 如何使用回调函数在 TypeScript 中保留词法范围

Question

我有一个 TypeScript 类，其中包含一个我打算用作回调的函数:

removeRow(_this:MyClass): void {
    ...
    // 'this' is now the window object
    // I must use '_this' to get the class itself
    ...
}

我将它传递给另一个函数

this.deleteRow(this.removeRow);

它依次调用 jQuery Ajax 方法，如果成功，它会像这样调用回调:

deleteItem(removeRowCallback: (_this:MyClass) => void ): void {
    $.ajax(action, {
        data: { "id": id },
        type: "POST"
    })
    .done(() => {
        removeRowCallback(this);
    })
    .fail(() => {
        alert("There was an error!");
    });
}

我可以保留对我的类的“this”引用的唯一方法是将其传递给回调，如上所示。它有效，但它是裤子代码。如果我没有像这样连接“this”(抱歉)，那么回调方法中对 this 的任何引用都将恢复为 Window 对象。因为我一直在使用箭头函数，所以我希望“this”是类本身，就像它在我类(class)的其他地方一样。

有人知道如何在 TypeScript 中传递回调，保留词法作用域吗？

Answer 1

编辑 2014-01-28:

新读者，一定要看看Zac's answer below .

他有一个更简洁的解决方案，可以让您使用粗箭头语法在类定义中定义和实例化作用域函数。

我唯一要补充的是，关于 Zac 的回答中的选项 5，可以使用以下语法指定方法签名和返回类型而无需任何重复:

public myMethod = (prop1: number): string => {
    return 'asdf';
}

编辑 2013-05-28:

定义函数属性类型的语法已更改(自 TypeScript 版本 0.8 起)。

以前你会像这样定义一个函数类型:

class Test {
   removeRow: (): void;
}

现在已更改为:

class Test {
   removeRow: () => void;
}

我已在下面更新了我的答案以包含此新更改。

此外:如果您需要为相同的函数名称定义多个函数签名(例如运行时函数重载)，那么您可以使用对象映射表示法(这在 jQuery 中广泛使用描述 rune 件):

class Test {
    removeRow: {
        (): void;
        (param: string): string;
    };
}

---

您需要将 removeRow() 的签名定义为类的属性，但在构造函数中分配实现。

有几种不同的方法可以做到这一点。

选项1

class Test {

    // Define the method signature here.
    removeRow: () => void;

    constructor (){
        // Implement the method using the fat arrow syntax.
        this.removeRow = () => {
            // Perform your logic to remove the row.
            // Reference `this` as needed.
        }
    }

}

如果你想让你的构造函数最小化，那么你可以在类定义中保留 removeRow 方法，并在构造函数中分配一个代理函数:

选项 2

class Test {

    // Again, define the method signature here.
    removeRowProxy: () => void;

    constructor (){
        // Assign the method implementation here.
        this.removeRowProxy = () => {
            this.removeRow.apply(this, arguments);
        }
    }

    removeRow(): void {
        // ... removeRow logic here.
    }

}

选项3

最后，如果您使用像 underscore 或 jQuery 这样的库，那么您可以使用它们的实用方法来创建代理:

class Test {

    // Define the method signature here.
    removeRowProxy: () => void;

    constructor (){
        // Use jQuery to bind removeRow to this instance.
        this.removeRowProxy = $.proxy(this.removeRow, this);
    }

    removeRow(): void {
        // ... removeRow logic here.
    }

}

---

然后你可以稍微整理一下你的deleteItem方法:

// Specify `Function` as the callback type.
// NOTE: You can define a specific signature if needed.
deleteItem(removeRowCallback: Function ): void {
    $.ajax(action, {
        data: { "id": id },
        type: "POST"
    })

    // Pass the callback here.
    // 
    // You don't need the fat arrow syntax here
    // because the callback has already been bound
    // to the correct scope.
    .done(removeRowCallback)

    .fail(() => {
        alert("There was an error!");
    });
}