jQuery函数范围内的类上的TypeScript调用方法答案

【问题标题】：TypeScript calling methods on class inside jquery function scopejQuery函数范围内的类上的TypeScript调用方法
【发布时间】：2013-09-08 05:26:33
【问题描述】：

我有下面的 TypeScript 类。

export class BrandViewModel {

        private _items = ko.observableArray();

        public Add(id: number, name: string, active: boolean) : void {
            this._items.push(new BrandItem(this, id, name, active));
        }

        public Get() : void  {
            $.get("/api/brand", function(items) {
                $.each(items, function (i, item) {
                        this.Add(item.Id, item.Name, item.Active);
                    });
            }, "json");
        }
}

Get 方法生成的 javascript 是：

    BrandViewModel.prototype.Get = function () {
        $.get("/api/brand", function (items) {
            $.each(items, function (i, item) {
                this.Add(item.Id, item.Name, item.Active);
            });
        }, "json");
    };

我在TypeScript 文档中看到我可以这样做：

    public Get() : void  {
        $.get("/api/brand", () => function(items) {
            $.each(items, function (i, item) {
                    this.Add(item.Id, item.Name, item.Active);
                });
        }, "json");
    }

结果如下，其中_this 现在是对BrandViewModel 实例的引用，但jquery .each 函数中的this 没有像我预期的那样更改为_this：

    BrandViewModel.prototype.Get = function () {
        var _this = this;
        $.get("/api/brand", function () {
            return function (items) {
                $.each(items, function (i, item) {
                    this.Add(item.Id, item.Name, item.Active);
                });
            };
        }, "json");
    };

相反，我在TypeScript 中完成了以下操作：

    public Get(): void {
        var _this = this;
        $.get("/api/brand", function(items) {
            $.each(items, function (i, item) {
                    _this.Add(item.Id, item.Name, item.Active);
                });
        }, "json");
    }

这给了我想要的结果：

    BrandViewModel.prototype.Get = function () {
        var _this = this;
        $.get("/api/brand", function (items) {
            $.each(items, function (i, item) {
                _this.Add(item.Id, item.Name, item.Active);
            });
        }, "json");
    };

有人知道更合适的方法吗？

【问题讨论】：

你能帮我看看我的演示吗。我不知道为什么它不能运行stackoverflow.com/questions/46834032/…

标签： javascript jquery scope typescript

【解决方案1】：

你可以这样做：

    public Get() : void  {
        $.get("/api/brand", (items) => {
            $.each(items, (i, item) => {
                    this.Add(item.Id, item.Name, item.Active);
                });
        }, "json");
    }

生成：

    BrandViewModel.prototype.Get = function () {
        var _this = this;
        $.get("/api/brand", function (items) {
            $.each(items, function (i, item) {
                _this.Add(item.Id, item.Name, item.Active);
            });
        }, "json");
    };

【讨论】：

非常好，谢谢。有没有机会解释一下它是如何工作的？即知道将_this 放在两个函数之外？
当你使用粗箭头符号时生成的，即()=>{}
@basarat 我要问的是，胖箭头符号被使用了两次并嵌套了.. _this 如何放在正确的位置。
@Pricey typescript 将在粗箭头链的顶部生成它。如果你在两者之间有一个function()，那么这条链就会中断。

【解决方案2】：

与ECMAScript 6 arrow functions 一致，TypeScript 在使用 => 时会在词法上绑定 this。

【讨论】：