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) AND 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>";
....


}