Javascriptが、設計機能は

Question

が考える自身を参照するには？私はオブジェクト内のものを参照する必要があるので、スタンドアロンの外部関数を望んでいません。

たとえば、関数は、ganttChartオブジェクトの特定のインスタンスで定義されたvariable1/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フレームワークを使用しないことができるかどうかを確認しています。次に、あなたの新しいdiv要素（変数dを配置するdocument.appendChildを使用する必要があります

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

：

まず、あなたはこのような何か、のdocument.createElementを使用しての代わりにHTMLを注入し、あなたのdivを作成することになるでしょう）をあなたのページに表示します。 "難しい"部分：マウスダウンのイベントを聞き、それに応じて行動します。これを行うには、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点次に、オブジェクトのプロパティとしての機能を定義する場合：

するvar myObjectという= {FOO：真、バー：関数（）{{doStuff（（this.foo）場合）; }};

thisがオブジェクトを返すコンストラクタ関数で使用される場合、返される新しいオブジェクトにはthisがバインドされます。投稿したコードにthisを使用している場合、thisはJavaScriptの不良部分の1つであるグローバルスコープを指しています。

だから、ここで私はこれに近づくだろう方法は次のとおりです。

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>"; 

私はオブジェクトを返すコンストラクタ関数は大文字で、慣例によりなぜなら資産計上さガントチャート機能を変更しました。