内部调用XMLHttpRequest的javascript类,然后处理onreadystatechange

这东西几乎可以工作：

function myClass(url) {

this.source = url;
this.rq = null;
this.someOtherProperty = "hello";

// open connection to the ajax server
this.start = function() {
    if (window.XMLHttpRequest) {
        this.rq = new XMLHttpRequest();
        if (this.rq.overrideMimeType)
        this.rq.overrideMimeType("text/xml"); 
    } else
        this.rq = new ActiveXObject("Microsoft.XMLHTTP");

    try {
        this.rq.onreadystatechange = connectionEvent;
        this.rq.open("GET", this.source, true);
        this.rq.send(null);
        this.state = 1;
    } catch (err) {
        // some error handler here
    }

}

function connectionEvent() {
    alert("i'm here");
    alert("this doesnt work: " + this.someOtherProperty);
}

} // 我的课

因此,无非就是将XMLHttpRequest对象作为类的成员,而不是全局定义并以传统方式调用它.但是,在我的connectionEvent回调函数中,即使函数本身在myClass范围内,“ this”的含义也会丢失.我还确保从myClass实例化的对象保持足够长的生命(在脚本中声明为全局).

在我看到的所有使用javascript类的示例中,“ this”在内部函数中仍然可用.对我来说,即使我将函数带到外面并使其成为myClass.prototype.connectionEvent,也不是.我究竟做错了什么？谢谢.

解决方法:

它不起作用的原因是在Javascript中,这完全是由调用函数的方式定义的,而不是在定义位置定义的.这与某些其他语言不同.

要具有您所期望的含义,您必须通过“绑定”它来明确确保：

this.start = function() {
    var self = this; // Set up something that survives into the closure

    /* ...lots of stuff omitted... */

    this.rq.onreadystatechange = function() {
        // Call `connectionEvent`, setting `self` as `this` within the call
        connnectionEvent.call(self);
    };

在this blog post中有关于此管理的更多信息,但是基本上：当调用某个函数而无需进行任何特殊设置时,该函数中的该对象将始终是全局对象(在浏览器中为窗口).拨打电话时,有两种设置方法：

>像我上面那样使用Function#call(或Function#apply),传入对象引用以用作第一个参数.那将调用该函数并将其设置为您传入的任何内容.#call和#apply之间的区别在于,您如何提供进一步的参数以传递给该函数.使用#call时,可以将它们作为进一步调用的参数提供给#call调用(例如func.call(thisArg,arg0,arg1,arg2)),而使用#apply时,可以将它们作为数组提供给第二个参数(func.apply(thisArg ,[arg0,arg1,arg2]).
>使用点分表示法：如果您的对象具有为其分配了功能的属性(例如start属性),请使用对象实例,点和属性名称(this.start()或foo)进行调用.start()等)将调用该函数并将其设置为调用内的对象实例.因此,点分符号做两件事完全不同：查找属性并找到一个函数作为其值,然后调用该函数,以便在调用过程中将其设置为对象.从字面上看是这样的：var f = obj.func; f.call(obj).

有点偏离主题,但是：除非有很好的理由,否则我不会重新发明这个轮子.有很多库可以简单地进行XHR调用. jQuery、Prototype、Closure,以及几乎所有其他内容.

标签：onreadystatechange,properties,xmlhttprequest,javascript,class
来源： https://codeday.me/bug/20191024/1917737.html