XmlHttpRequest onload ` `this`‘属性

Question

给定下面的代码，_onChunkComplete方法中的_onChunkComplete是XHR请求。这很有道理。有办法让它成为实际的Uploader对象吗？

   function Uploader(file, options) {    
        // ... code here ....
        this.upload_request = new XMLHttpRequest();
        this.upload_request.onload =  this._onChunkComplete;
    }

    Uploader.prototype = {
        // ... code here ...
        _onChunkComplete: function() {
            if (this.range_end === this.file_size) {
                console.log('done');
                return;
            }
            this.range_start = this.range_end;
            this.range_end = this.range_start + this.chunk_size;
            if (!this.is_paused) {
                this._upload();
            }
        }
        // ... mode code here...
    };

    var test = new Uploader(formFile, {});
    test.start();

Answer 1

使用bind

this.upload_request.onload = this._onChunkComplete.bind(Uploader)

bind()方法创建一个新函数，当调用该函数时，它的this关键字设置为提供的值，在调用新函数时，在任何提供的参数之前都有给定的参数序列。

Answer 2

只需通过参数将Uploader对象传递给函数：

Uploader.prototype = {
    // ... code here ...

    var uploader = this;

    _onChunkComplete: function(uploader) {

        // you can use uploader now

        if (this.range_end === this.file_size) {
            console.log('done');
            return;
        }
        this.range_start = this.range_end;
        this.range_end = this.range_start + this.chunk_size;
        if (!this.is_paused) {
            this._upload();
        }
    }
    // ... mode code here...
};

但是，如果您想要通过this对象重写uploader，那么Martriay的答案就是正确的。