Javascript OOP：如何引用對象

我有以下JavaScript對象。當窗口調整大小時，我希望它調用它自己的resize()方法。但是，在window.onresize函數中，this指的是window - 不是Canvas對象。我如何調用Canvas對象？Javascript OOP：如何引用對象

function Canvas(element) { 
    this.element = element; 
    this.canvas = element.getContext("2d"); 
    this.width = element.width; 
    this.height = element.height; 

    this.resize = function() { 
     this.width = window.innerWidth; 
     this.height = window.innerHeight; 

     this.element.width = this.width; 
     this.element.height = this.height; 
    }; 

    window.onresize = function() { 
     this.resize(); 
      ^- error 
    }; 
}

在此先感謝您。

來源

2012-02-01 Patrickdev

嘗試過任何關於'this'的搜索/教程來查看*它的真正含義*？這裏的關鍵詞是「關閉」或「綁定」，並且有一百萬個變體（答案和SO問題）。 – 2012-02-01 23:30:59

window.onresize = this.resize.bind(this);

如果需要支持舊的瀏覽器，包括用於the MDN compatibility patchFunction.prototype.bind()。

來源

2012-02-01 23:31:07

完美，正是我在尋找的東西，謝謝！ – Patrickdev 2012-02-01 23:35:03

@Patrickdev請注意'bind'沒有實現在IE8和Safari中，所以你可能想要填充它。 – 2012-02-01 23:38:10

將值'this'保存在onresize處理函數結束中的構造函數的作用域中。

var _this = this; 
window.onresize = function() { 
    _this.resize(); 
};

來源

2012-02-01 23:29:17 millimoose

謝謝你的回答。我確實想要什麼，但看起來不那麼幹淨，「我不是我的解決方案。 – Patrickdev 2012-02-01 23:36:06

保存這個，一個整潔的想法。 +1 – 2012-02-01 23:37:34

@Patrickdev我真的希望我記得他的解決方案，它很整潔。我知道它，但從來沒有使用它，因爲我傾向於'var $ this = $（this）'往往這麼經常。 – millimoose 2012-02-01 23:39:21

Javascript OOP：如何引用對象

回答

相關問題