Question

我正在使用angular2构建一个简单的文件上传。我有以下代码。在代码中，回调被分配给onload。之后，上下文变为读者而不是其所在的类。我无法访问概述类中的其他对象

    export class overview {
       change() {
          var reader = new FileReader();
          reader.onload = this.uploadFile;
          reader.readAsDataURL($("input[name='image']")[0].files[0]);
        }
       uploadFile() {
        console.log(this); //"this" refers to reader obj,how can i get the overview object
       this.api('upload'); //this does not work because api is undefined
       }
   }

Answer 1

关键字this根据它的调用者获取新的上下文。您可以使用类的构造函数覆盖此默认行为，并为所有方法显式绑定此上下文。

constructor() {
    for (var name in this) {
        if ($.isFunction(this[name])) {
            this[name] = this[name].bind(this);
        }
    }
}

此函数循环遍历类的所有属性，并使用jQuery检查属性是否为方法。然后它将此上下文绑定为类级别。请注意，这对匿名函数没有任何影响，在这种情况下，您可以使用变量来跟踪它。如

public Test(): void {
    var self = this;
    something.callback = function() {
        console.log(this);
        console.log(self); //will be your class level
    }
}

reader.onload与typescript的回调问题

1 个答案: