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

我如何在 ganttChart 类中定义函数 gInitBarDrag() ？我不需要外部独立函数，因为它需要引用对象内部的东西。

例如，该函数将能够引用在 ganttChart 对象的特定实例中定义的变量 1/2/3（您可以有多个图表对象）。

希望这是有道理的！例如：

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

好吧，我会回答不测试它，并使用prototypejs，但我相信如果你不想使用JS框架，你可以自己练习这些功能。

首先，您需要使用 document.createElement 创建 div，而不是注入 HTML，如下所示：

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 4

如果将函数定义为对象的属性，则 this 指向该对象：

var myObject = { foo: true, bar: function(){ if(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>";

我将 ganttChart 函数更改为大写，因为按照惯例，返回对象的构造函数是大写的。

Answer 5

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

function ganttChart(gContainerID) {
....

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


}