$ .ajax()中“this”关键字的TypeScript解释

时间:2012-10-31 13:32:51

标签: intellisense typescript

我意识到TypeScript编译器试图保持对普通旧JavaScript的忠诚,因为TypeScript确实是JavaScript。然而,Intellisense解释为“this”关键字与它在运行时实际解析的内容之间存在脱节。例如,请考虑以下TypeScript ajax调用:

 getAgencies() {
            var self = this;          
            $.ajax(liveString + "/Home/GetSupportedAgencies",
            {
                type: "GET",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                error: Utilities.Logger.displayAjaxError,
                success: this.onGetAgenciesComplete
            });

        }

及其相应的回调:

   onGetAgenciesComplete(agencies) {
                var self = this;
                    if (agencies == null)
                        Utilities.Logger.displayErrorOnLogConsole("There was an error retrieving supported agencies.  Refresh site and try again.");
                    else {
                        $.each(agencies, function (i, a) {
                            self._indexViewModel.agencies.push({ name: a.Name, fullName: a.FullName, shortName: a.ShortName, bbox: a.BBox, countryCode: a.CountryCode });
                        });

                        if (Modernizr.geolocation) {
                            navigator.geolocation.getCurrentPosition(
                                function (position) {
                                    self.initMapPage(position, self);
                                },
                                function (error) {
                                    Utilities.Logger.displayErrorOnLogConsole("Oops, we could not get your location at his time. Please try later.");
                                });
                        }
                        else {
                            Utilities.Logger.displayErrorOnLogConsole("Sorry, your browser does not return location information.");
                            self.getBusRoutes(self.agencyName);
                        }


                        // end of initialization
                    }
                }

现在,当我将鼠标悬停在TypeScript源文件中onGetAgenciesComplete上的“var self = this”行时,变量“self”的Intellisense定义表明它是HomePageViewModelBase类型,其中HomePageViewModelBase是包含上述方法的类。

上述生成的Javascript如下:

HomePageViewModelBase.prototype.getAgencies = function () {
            var self = this;
            $.ajax(liveString + "/Home/GetSupportedAgencies", {
                type: "GET",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                error: Utilities.Logger.displayAjaxError,
                success: this.onGetAgenciesComplete
            });
        };
        HomePageViewModelBase.prototype.onGetAgenciesComplete = function (agencies) {
            var self = this;
            if(agencies == null) {
                Utilities.Logger.displayErrorOnLogConsole("There was an error retrieving supported agencies.  Refresh site and try again.");
            } else {
                $.each(agencies, function (i, a) {
                    self._indexViewModel.agencies.push({
                        name: a.Name,
                        fullName: a.FullName,
                        shortName: a.ShortName,
                        bbox: a.BBox,
                        countryCode: a.CountryCode
                    });
                });
                if(Modernizr.geolocation) {
                    navigator.geolocation.getCurrentPosition(function (position) {
                        self.initMapPage(position, self);
                    }, function (error) {
                        Utilities.Logger.displayErrorOnLogConsole("Oops, we could not get your location at his time. Please try later.");
                    });
                } else {
                    Utilities.Logger.displayErrorOnLogConsole("Sorry, your browser does not return location information.");
                    self.getBusRoutes(self.agencyName);
                }
            }
        };

当在HomePageViewModelBase.prototype.onGetAgenciesComplete中执行变量“self”时,将解析为看起来像AjaxContext而不是HomePageViewModelBase的实例。这是预期的行为,还是应该将此报告为错误?

2 个答案:

答案 0 :(得分:6)

是的,你应该把它作为一个错误报告给他们,因为this中的$.ajax()意味着引用$.ajax()对象本身。

如果您想绕过它以使其有效,请将您的成功功能更改为:

success: self.onGetAgenciesComplete

或者,如果您希望 this代表您的课程,只需使用$ .ajax的上下文方法

$.ajax({ 
    context: this,
    // now *this* will come from the previous scope,
    // which in your case, is your class "HomePageViewModelBase"

    // now that we know for certain what -this- refers to
    success: this.onGetAgenciesComplete
});

答案 1 :(得分:3)

就任何(包括智能感知)静态分析而言,onGetAgenciesComplete 的上下文是 HomePageViewModelBase并且始终是;除了在运行时,通过显式内部jQuery.ajax上下文绑定动态设置上下文。 Intellisense确定上下文将动态变化的唯一方法是实际执行该代码路径,但即使这样也会导致歧义:哪个上下文是正确的上下文?

如果您在其他地方“借用”某种方法进行一次性通话怎么办? Intellisense应该使用该呼叫站点来确定上下文吗?可能不是......

HomePage.prototype.onGetAgencies.call({ some other context }, ...);

(为了便于阅读而缩短。)