Javascript 原型方法中无法访问的变量

在类的任何原型方法中，我无法访问在我的

ImageLoaderClass

的构造函数方法中声明的变量：

<div id="progress" ></div>
<a href="javascript:start();">Test</a>
<script>
function ImageLoader (url,ziel){
    this.url = url;
    this.ziel=ziel;
    this.request = new XMLHttpRequest();
    this.request.onprogress = this.onProgress;
    this.request.onload = this.onComplete;
    this.request.onerror = this.onError;
    this.request.open('GET', this.url, true);
    this.request.overrideMimeType('text/plain; charset=x-user-defined');
    this.request.send(null);
}
ImageLoader.prototype.onProgress=function(event) {
  if (!event.lengthComputable) {
    return;
  }
  alert("url="+this.url);
  this.loaded = event.loaded;
  this.total = event.total;
  this.progress = (this.loaded / this.total).toFixed(2);
  document.querySelector('#progress').textContent = 'Loading... ' + parseInt(this.progress * 100) + ' %';
}
ImageLoader.prototype.onComplete=function(event) {
    alert(this.url);
    document.querySelector('#progress').setAttribute('src', this.url);
    console.log('complete', this.url);
}

ImageLoader.prototype.onError=function(event) {
  console.log('error');
}

function start(){
    //var request = new XMLHttpRequest();
    var Fab=new ImageLoader('https://placekitten.com/g/2000/2000','#progress');
}
</script>

函数ImageLoader（url，ziel）{
this.url=url；
this.ziel=ziel；
this.request=newXMLHttpRequest（）；
this.request.onprogress=this.onprogress；
this.request.onload=this.onComplete；
this.request.onerror=this.onerror；
this.request.open（'GET'，this.url，true）；
this.request.overrideMetype（'text/plain；charset=x-user-defined'）；
this.request.send（null）；
}
ImageLoader.prototype.onProgress=函数（事件）{
如果（！event.lengthComputeable）{
返回；
}
警报（“url=“+this.url”）；
this.loaded=event.loaded；
this.total=event.total；
this.progress=（this.loaded/this.total）.toFixed（2）；
document.querySelector（'#progress'）.textContent='Loading…'+parseInt（this.progress*100）+'%；
}
ImageLoader.prototype.onComplete=函数（事件）{
警报（this.url）；
document.querySelector（'#progress'）.setAttribute（'src'，this.url）；
console.log（'complete'，this.url）；
}
ImageLoader.prototype.onError=函数（事件）{
console.log（'error'）；
}
函数start（）{
//var request=new XMLHttpRequest（）；
var Fab=新图像加载器（'https://placekitten.com/g/2000/2000","进步",；
}

这是因为上下文。

这个

不是你想的那样

只需绑定正确的上下文，或包装函数绑定即可

this.request.onprogress = this.onProgress.bind(this);
this.request.onload = this.onComplete.bind(this);
this.request.onerror = this.onError.bind(this);

或

---

这一行正在改变您的上下文

this.request.onProgress = this.onProgress

---

本质上，这里发生的是this.request.onProgress被激发，并引用this.onProgress。onProgress函数中的“this”成为

this.request

对象。

javascript中的this

与其他语言中的工作方式不同。查看此答案，了解

此

在js中的工作原理：

this.request.onProgress = this.onProgress