无法获取未定义或空引用的属性 - Windows 8 JS/CSS应用程序

Question

下面是我的代码片段.我得到的错误是,当我执行搜索并调用该方法时_searchData,它成功调用该方法_lookUpSuccess,但然后返回以下错误:

JavaScript运行时错误:无法获取未定义或空引用的属性"_displayResult"

当它试图调用该_displayResult方法时.

为什么会这样？

(function () {

    // make this an object property/method eventually
    var displayResult = function (queryResult) {
        for (var i = 0; i < holder.length; i++) {
            //document.querySelector(".item-content .title").textContent = "FilmApp";
            document.querySelector(holder[i]).textContent = queryResult[i];
       }};

    // Creates a new page control with members
    ui.Pages.define(searchPageURI, {
       //...
        _searchData: function (queryText) {
            searchBase          = 'http://www.example.com/web-service2.php?termID=';
            searchFormat        = 'JSON';
            searchFormatPiece   = '&format=' + searchFormat;

            if (!window.Data) {  
                var searchUrl = searchBase + queryText + searchFormatPiece;
                WinJS.xhr({ url: searchUrl }).done(this._lookUpSuccess, this._lookUpFail, this._lookUpProgress);
            }else{
                document.querySelector(".titlearea .pagetitle").textContent = "There has been a computer malfunction - sort it the **** out!";
            }
        },

        _lookUpSuccess: function xhrSucceed(Result) {
            var response = JSON.parse(Result.responseText);
                if (response.response[0].Message === "Found") {
                    for (var x in response.response[1].term) {
                        content.push(response.response[1].term[x]);
                    };
                    this._displayResult(content);
                    //displayResult(content);
                    return content;
                } else {
                    content.push("Not Found", "Not Found");
                    return content;
                }
         },

        _lookUpFail: function xhrFail(Result) { document.querySelector(".titlearea .pagetitle").textContent = "Got Error"; },
        _lookUpProgress: function xhrProgress(Result) { document.querySelector(".titlearea .pagetitle").textContent = "No Result 2"; },

        _displayResult: function (queryResult) {
            var holder;
            holder = [DefDiv, DescDiv];

            for (var i = 0; i < holder.length; i++) {
                //document.querySelector(".item-content .title").textContent = "FilmApp";
                document.querySelector(holder[i]).textContent = queryResult[i];
            };
        },

    });

    // End of UI.page.define    

    // #2 This method is run on application load
    WinJS.Application.addEventListener("activated", function (args) {
        if (args.detail.kind === appModel.Activation.ActivationKind.search) {
            args.setPromise(ui.processAll().then(function () {
                if (!nav.location) {
                    nav.history.current = { location: Application.navigator.home, initialState: {} };
                }
            return nav.navigate(searchPageURI, { queryText: args.detail.queryText });
            }));
        }
    });

    // #3 
    appModel.Search.SearchPane.getForCurrentView().onquerysubmitted = function (args) { nav.navigate(searchPageURI, args); };

})();

Answer 1

在这行代码中:

WinJS.xhr({ url: searchUrl }).done(this._lookUpSuccess, this._lookUpFail, this._lookUpProgress);

你_lookupSuccess作为done处理函数传递,但是当它被调用时,它的值this不再是你想要它的值,因为它将由任何调用done处理程序的内部设置.传递this._lookUpSuccess函数只是通过函数.它没有通过的价值this.因此,当this._lookUpSuccess使用错误调用时this,对其this内部的任何引用都不会在其上找到预期的属性(因此您看到的错误).

您可以像这样修复它,将this值保存在局部变量中,然后在调用时使用它_lookUpSuccess():

var self = this;
WinJS.xhr({ url: searchUrl }).done(function(result) {self._lookUpSuccess(result)}, this._lookUpFail, this._lookUpProgress);

这是this在回调中重新附加适当值的非常常见的解决方法.