手寫體嵌套這不是調用定義函數

Question

我正在使用Ionic 2 Beta和Typescript的應用程序。在嵌套在Typescript中時，我碰到了this相互作用的錯誤，但我無法完全理解它。這裏是我的代碼：

constructor(public navCtrl: NavController, params: NavParams, platform: Platform) { 
    platform.ready().then((readySource) => { 
     try { 
      this.num = params.get("num"); 
      this.unprocData = params.get("data"); 
      var image = <HTMLImageElement>document.getElementById('unprocImg'); 
      image.src = this.unprocData; 
      image.onload = function() { console.log("images loaded"); this.proc(this.num); } 
      //some stuff 
     } catch (err) { 
      console.log("Problem Starting Render // " + err); 
      this.navCtrl.push(IndexPage); 
     } 
    }); 
} 

proc(num) { 
    try { 
     console.log("starting render..."); 
     switch(num) { 
      case 0: 
       this.procImg1(function() { //process the image for default vintage greyscale 
        this.load(this.procData, this.descriptionPoster1, "assets/img/Poster1.png", 250, 310, .6, .6); 
       }); break; 
      .. 
     } 
    } catch (err) { 
     console.log("Problem Starting Render // " + err); 
     this.navCtrl.push(IndexPage); 
    } 
} 

test() { 
    this.proc(0); 
} 

有趣的是，該功能test()作品如預期，但是從image.onload(..)內部調用this.proc(..)，當我得到的錯誤this.proc is not a function。我該如何解決這個問題？謝謝。

Answer 1

的問題是，當這個this是不同的：

image.onload = function() { console.log("images loaded"); this.proc(this.num); } 

被執行，那是因爲您正在使用不保存在執行時用於this範圍內的常規功能（它是異步的）。

你可以這樣做：

image.onload =() => { console.log("images loaded"); this.proc(this.num); } 

（2）使用bind：

（1）將具有高於使用箭頭功能

image.onload = function() { console.log("images loaded"); this.proc(this.num); }.bind(this)