javascript - 未捕获的类型错误 : Object #<AbstractAjaxReq> has no method 'getAjaxResponse'

Question

我想以某种方式在我的 javascript 中实现一些好的 OOP 实践。正如您所看到的，我有一个 AbstractAjaxRequest ，然后给它一些定义其 getAjaxResponse 函数的子级。我在底部的这一行看到错误:self.getAjaxResponse()。有人看到我的方法有错误吗？

function soapReq() {
    var ajaxRequest = new SignInAjaxReq();
    ajaxRequest.init();
    var SOAPRequest = getSOAPHead();
    var bodyArgs = getLoginAttempt();
    SOAPRequest += getSOAPBody(bodyArgs[0], bodyArgs[1], bodyArgs[2]);
    SOAPRequest += getSOAPFoot();

    var url = 'xxx'
    ajaxRequest.ajaxRequest.open('POST', url, true);
    ajaxRequest.ajaxRequest.setRequestHeader( "Content-Type","text/xml; charset=utf-8");
    ajaxRequest.ajaxRequest.send(SOAPRequest);
}    

function AbstractAjaxReq() {
    var self = this;
    this.init = function() {
        self.ajaxRequest = new XMLHttpRequest();
        self.ajaxRequest.onreadystatechange = function() {
            if(self.ajaxRequest.readyState === 4){
                self.getAjaxResponse() // error here
            }
        };
        return self.ajaxRequest;
    };
};

function SignInAjaxReq() {
    var self = this;
    this.getAjaxResponse = function() {
        var xml = self.ajaxRequest.responseXML;
        var x=xml.getElementsByTagName("signInResult");
        for (i=0;i<x.length;i++) { 
            console.log(x[i].childNodes[0].nodeValue);
        }
    };
};
SignInAjaxReq.prototype = new AbstractAjaxReq();

Uncaught TypeError: Object #<AbstractAjaxReq> has no method 'getAjaxResponse' SoapRequest.js:42
    self.ajaxRequest.onreadystatechange

Answer 1

你的继承有缺陷。当你 create the prototype by new AbstractReq() ，那么 self 闭包变量将指向该原型(prototype)对象 - 它没有 getAjaxResponse 方法。

修复 #1:使用 correct inheritance :

function AbstractAjaxReq() {
    var self = this;
    this.init = function() {
        self.ajaxRequest = new XMLHttpRequest();
        self.ajaxRequest.onreadystatechange = function() {
            if(self.ajaxRequest.readyState === 4){
                self.getAjaxResponse() // no more error here
            }
        };
        return self.ajaxRequest;
    };
};

function SignInAjaxReq() {
    AbstractAjaxReq.call(this); // invoke the super constructor
    var self = this;
    this.getAjaxResponse = function() {
        var xml = self.ajaxRequest.responseXML;
        var x=xml.getElementsByTagName("signInResult");
        for (i=0;i<x.length;i++) { 
            console.log(x[i].childNodes[0].nodeValue);
        }
    };
};
SignInAjaxReq.prototype = Object.create(AbstractAjaxReq.prototype);

修复 #2:通过在 init 函数中创建变量，将实际实例分配给 self:

function AbstractAjaxReq() {
    this.init = function() {
        var self = this; // here!
        self.ajaxRequest = new XMLHttpRequest();
        self.ajaxRequest.onreadystatechange = function() {
            if(self.ajaxRequest.readyState === 4){
                self.getAjaxResponse() // no more error here
            }
        };
        return self.ajaxRequest;
    };
};

<小时/>

此外，use the prototype !示例:

var abstractAjaxPrototype = {
    init: function() {
        var self = this; // here!
        this.ajaxRequest = new XMLHttpRequest();
        this.ajaxRequest.onreadystatechange = function() {
            if (self.ajaxRequest.readyState === 4){
                self.getAjaxResponse() // no more error here
            }
        };
        return this.ajaxRequest;
    }
};
function SignInAjaxReq() { }
SignInAjaxReq.prototype = Object.create(abstractAjaxPrototype);
SignInAjaxReq.prototype.getAjaxResponse = function() {
    var xml = this.ajaxRequest.responseXML;
    var x = xml.getElementsByTagName("signInResult");
    for (i=0; i<x.length; i++) { 
        console.log(x[i].childNodes[0].nodeValue);
    }
};

并且:不要使用 init 方法，使用构造函数:

function AbstractAjaxReq() {
    var self = this; // here!
    self.ajaxRequest = new XMLHttpRequest();
    self.ajaxRequest.onreadystatechange = function() {
        if(self.ajaxRequest.readyState === 4){
            self.getAjaxResponse() // no more error here
        }
    };
};
function SignInAjaxReq() {
    AbstractAjaxReq.call(this); // invoke the super constructor
}
SignInAjaxReq.prototype = Object.create(abstractAjaxPrototype);
SignInAjaxReq.prototype.getAjaxResponse = function() {
    var xml = this.ajaxRequest.responseXML;
    var x = xml.getElementsByTagName("signInResult");
    for (i=0; i<x.length; i++) { 
        console.log(x[i].childNodes[0].nodeValue);
    }
};

// Usage:
var ajaxRequest = new SignInAjaxReq();
// no ajaxRequest.init()!