的Javascript，設計功能引用自身

Question

考慮：

myChart = new ganttChart("chart1"); 

function ganttChart(gContainerID) { 

    this.variable1 = "lol"; 
    this.variable2 = "hai dere"; 
    this.variable3 = "cometishian"; 

.... 
    this.gContainer = document.getElementById(gContainerID); 
    this.gContainer.innerHTML += "<div id=\"gBar" + i + 
      "\" class=\"gBar\" onmousedown=\"gInitBarDrag(this)\">Hello</div>"; 
.... 
} 

我將如何讓甘特圖類中定義的函數gInitBarDrag（）？我不想要一個外部獨立函數，因爲它需要引用對象內部的東西。

因此，例如，該函數將能夠引用在ganttChart對象的特定實例（您可以有多個圖表對象）中定義的變量1/2/3。

希望有道理！ EG：

function ganttChart(gContainerID) { 

    this.variable1 = "lol"; 
    this.variable2 = "hai dere"; 
    this.variable3 = "cometishian"; 

.... 
    this.gContainer.innerHTML += "<div id=\"gBar" + i + 
      "\" class=\"gBar\" onmousedown=\"gInitBarDrag(this)\">Hello</div>"; 
.... 

    gInitBarDrag = function(thisGanttObject) 
    { 
     alert(thisGanttObject.variable2); 
     // This line wont work because it doesn't know what ganttChart to reference! 
    } 

} 

Answer 1

function gnattChart(gContainerID) { 
    var div = document.createElement('div'); 
    div.id = 'gBar'; 
    div.className = 'gBar'; 

    //If you want to reference properties from the gnattChart object... 
    //Use `self` where you'd normally use `this` in the handler function 
    var self = this; 

    div.onmousedown = function() { 
    //contents of gInitBarDrag here... 
    }; 

    //If you want the container to be emptied... 
    this.gContainer.innerHTML = ''; 

    this.gContainer.appendChild(div); 
} 

Answer 2

this.gContainer.innerHTML += "<div id=\"gBar" + i + "\" class=\"gBar\" onmousedown=\"function(){ alert('here'); }\">Hello</div>"; 

雖然，內聯函數通常皺眉。

Answer 3

var gInitBarDrag = function(){ 
    ///function body here 
}; 

function ganttChart(gContainerID) { 
.... 

    this.gContainer.innerHTML += "<div id=\"gBar" + i + "\" class=\"gBar\" onmousedown=\"gInitBarDrag(this)\">Hello</div>"; 
.... 


} 

Answer 4

OK，我會回答沒有測試它，並使用prototypejs，但我敢肯定，你可以鍛鍊自己的功能，如果你不希望使用JS框架。

首先，你會想用使用document.createElement而不是HTML注入，像這樣來創建你的div：

var d = document.createElement("div"); 
// Set your div properly. 

然後，你將不得不使用document.appendChild把你的新的div（可變d ）在你的頁面。 現在，「困難」的部分：聽取mousedown事件並採取相應行動。您可以通過使用Event.observe（prototypejs）和bind（prototypejs）將您的對象綁定到偵聽器來完成此操作，以便您可以使用它的變量（this.variable1，variable2等）。

這將一定程度上給予這樣的代碼：

function ganttChart(gContainerID) { 

this.variable1 = "lol"; 
this.variable2 = "hai dere"; 
this.variable3 = "cometishian"; 

// Create Element part (createElement, appendChild, etc). 
var d = document.createElement("div"); 
// continue from here. 


this.gInitBarDrag = function() 
{ 
    alert(this.variable2); 
}; 

$(d).observe("mousedown", this.gInitBarDrag.bind(this)); 

} 

一些注意事項：綁定並觀察可以不用JS框架有點容易實現。 此代碼未經測試。

Answer 5

如果定義一個函數作爲一個對象的屬性，然後this指向的對象：

變種myObject的= {FOO：真，巴：函數（）{如果（this.foo）{doStuff（ ）; }};

如果this用於返回對象的構造函數，則this綁定到返回的新對象。您在發佈的代碼中使用this的方式，this指向全局範圍，這是Javascript的一個不好的部分。

所以，這裏是我會怎麼處理這：

function GanttChart(gContainerID) { 
    var chart = { 
    variable1: "lol", 
    variable2: "hai dere", 
    variable3: "cometishian", 
    containerId: gContainerID, 
    gInitBarDrag: function(){ 
     alert(this.variable2); 
     } 
    } 
    return chart; 
} 
myChart = new GanttChart("chart1"); 
document.getElementById(myChart.containerId).innerHTML += "<div id=\"gBar" + i + "\" class=\"gBar\" onmousedown=\"myChart.gInitBarDrag();\">Hello</div>"; 

我改變了甘特圖功能，因爲按照慣例予以資本化，返回一個對象的構造函數都大寫。