如何通過下面的示例正確訪問javascript對象屬性？

我想創建以下JavaScript對象：如何通過下面的示例正確訪問javascript對象屬性？

function Thumbnail(thumbnailUrl) { 
    this.thumbnailUrl = thumbnailUrl; 
    this.width = 200; 
    this.height = 150; 
    this.element = init(this.width, this.height, this.thumbnailUrl); 
    this.element.addEventListener("mouseover",this.onmouseover); 

    function init(width, height, thumbnailUrl) { 
     var thumbViewHTML = "<div class='container shadow' style='width:"+width+"px; height:"+height+"px; background: green;'>"; 
     thumbViewHTML += "<div class='container' style='width:100%; height:80%; background: yellow'>"; 
     thumbViewHTML += "<img class='centered' src='"+thumbnailUrl+"' style = 'max-width: 100%; max-height: 100%;'/>"; 
     thumbViewHTML += "</div>"; 
     thumbViewHTML += "<div class='container' style='width: 100%; height:20%; background: black'>"; 
     thumbViewHTML += "<div class='textStyle centeredVertically' style='margin-left:5px; color: white'>Landscape</div>"; 
     thumbViewHTML += "</div>"; 
     thumbViewHTML += "</div>"; 

     return DOMElementFromHtml(thumbViewHTML); 
    } 

    return this; 
} 

Thumbnail.prototype.onmouseover = function() { 
    console.log(this.width); //undefined with this pointing to this.element property on the Thumbnail object 
} 

function DOMElementFromHtml(htmlString) { 
    var tempDiv = document.createElement('div'); 
    tempDiv.innerHTML = htmlString; 
    return tempDiv.firstChild; 
}

當我在onmouseover處理程序訪問this.width我得到未定義因爲這指向Thumbnail對象的this.element成員。有沒有辦法在該方法內獲得this指向Thumbnail實例而不是this.element實例。

我認爲我可以在Thumbnail構造函數的局部範圍內實施onmouseover和可能的工作，但如果我想onmouseover是可以向外進行修改的公共方法是什麼？

我真的很陌生，對我來說這麼裸露的JavaScript。

來源

2017-03-29 Horatiu Paraschiv

主題你叫'''新的縮略圖（）'''？ –

綁定功能this像這樣：

this.element.addEventListener("mouseover",this.onmouseover.bind(this));

雖然你有this.onmouseover，只要你不把它在那裏，但（需要）傳遞一個函數參考，實際調用（當事件觸發器）不是由this.前綴創建的，因此它將在沒有特定上下文的情況下被調用。根據您是處於非嚴格模式還是嚴格模式，this將引用全局對象或undefined。

您可以使用bind覆蓋此行爲，該行爲會創建一個新函數，但會確保將其作爲上下文傳遞給它。

你可以閱讀更多關於"How does the this keyword work?"

來源

2017-03-29 23:23:55 trincot

偉大的工作，謝謝。我是一個非常有經驗的OOP開發人員，但JavaScript在這方面是一種不同的野獸:)。 –

是的，它很混亂。有些人建議在不使用'this'關鍵字的情況下進行編程，因爲它經常導致不期望的「驚喜」，而其他人則接受它。 – trincot

如何通過下面的示例正確訪問javascript對象屬性？

回答

相關問題