如何將對象傳遞給在對象/類中定義的回調？

以下是一個簡單的類定義。 this.bounds在控制檯中是未定義的，所以我想知道如何訪問和修改回調中的邊界。目標是在圖像加載後，邊界將被設置爲bounds.width = image.width等。謝謝！如何將對象傳遞給在對象/類中定義的回調？

 function Car() { 
      this.image = new Image();    
      this.bounds = new Rectangle(0, 0, 0, 0);     
      this.setImage = function(ii){ 

       this.image.src = ii; 

       this.image.onload = function() { 

        console.log("image was loaded " + this.bounds); 

       } 


      }; 

     }

來源

2017-02-06 kofhearts

你能嘗試做結合的this例如：（「圖像加載」 + this.bounds）this.image.onload =函數（）{ 的console.log; } .bind（this） – binariedMe

沒問題。你能否加一點解釋綁定的用途。我會接受答案。謝謝！ – kofhearts

你可以考慮這個。圖像「到」var「，然後使用'varName.bounds'，所以'this'不再綁定到當前對象。您也可以創建另一個構造函數，然後在其他構造函數中定義的方法內返回一個新實例。 – PHPglue

你能嘗試做：

this.image.onload = function() { console.log("image was loaded " + this.bounds); }.bind(this)

「綁定」來的這個當前範圍綁定到任何功能。每當您將來調用該函數時，都會使用該函數的綁定引用。

請參考以下鏈接：what is bind in javascript

來源

2017-02-06 08:28:50 binariedMe

-1

「這個」內部功能image.onload（）是根據功能setImage實際作用域（），這絕對沒有this.bounds定義的，因此你得到了它不確定的。

一種解決方案可能是這只是前行分配給任何變量：this.image.onload = function() {

所以它會變爲：

var that = this; 
this.image.onload = function() { 
    console.log("image was loaded " + that.bounds); 
}

來源

2017-02-06 08:34:59 user3895143

內onload回調this不再指向Car實例，但圖像因爲在加載圖像時它被image對象調用。要訪問此回調，你可以在裏面Car方法：返回其內部this被設置爲參數值傳遞給bind

this.image.onload = function() { 

    console.log("image was loaded " + this.bounds); 

}.bind(this)

新功能

使用bind方法
你可以閱讀更多關於bindhere

在ES2015中，您可以使用箭頭功能，其中也保留this值：

function Car() { 
    this.image = new Image();    
    this.bounds = new Rectangle(0, 0, 0, 0); 
    this.setImage = function(ii){ 

     this.image.src = ii; 

     this.image.onload =() => { 

      console.log("image was loaded " + this.bounds); 

     } 

    }; 

}

你可以閱讀更多關於箭頭功能here

，你也可以定義一個變量，將持有的this

function Car() { 
    this.image = new Image();    
    this.bounds = new Rectangle(0, 0, 0, 0); 
    var self = this; 
    this.setImage = function(ii){ 

     this.image.src = ii; 

     this.image.onload = function() { 

      console.log("image was loaded " + self.bounds); 

     } 

    }; 

}

來源

2017-02-06 08:40:29

你寫的箭頭功能部分不正確。只是在構造函數中使用不是'this'屬性的函數時，'this'通常是指全局對象，但是使用箭頭函數'this'指向對象實例。 – PHPglue

'this.image.onload'會將'this'綁定到構造函數實例，甚至不會創建圖像'onload'事件，所以這種技術是毫無意義的。 – PHPglue

帶箭頭功能的示例按預期工作。請記住使用'new'關鍵字創建Car類的實例，例如'var car = new Car（）;' –

-1

值我認爲你應該看到這一點：

var doc, bod, htm, Img, C, E; // for reuse on other loads 
addEventListener('load', function(){ 
doc = document; bod = doc.body; htm = doc.documentElement; 

C = function(tag){ 
    return doc.createElement(tag); 
} 
E = function(id){ 
    return doc.getElementById(id); 
} 
Img = function(src, complete, context){ 
    this.image = C('img'); 
    var img = this.image; 
    var cx = context || this; 
    img.addEventListener('load', function(eventObj){ 
    complete.call(cx, eventObj); 
    }); 
    img.src = src; 
    this.imgMethod = fuction(){ 
    this.newProp = 'this in here refers to instance of Img'; 
    } 
} 
Car = function(){ 
    this.setImg = function(src, complete){ 
    return new Img(src, complete); 
    } 
} 
var what = new Car; // no args it's okay to not use() with new 
var someImg = what.setImg('yourImgSrc.png', function(){ 
    this.imgMethod(); console.log(this.newProp); 
}); 
someImg.image.addEventListener('click', function(ev){ 
    var bc = this.getBoundingClientRect(); 
    var xy = {x:ev.clientX-bc.left, y:ev.clientY-bc.top}; 
    console.log(xy); 
}); 

});

注意：這僅僅是一個使用call

來源

2017-02-06 08:46:03 PHPglue

如何將對象傳遞給在對象/類中定義的回調？

回答

相關問題