Javascript，设计引用自身的函数_Javascript_Function_Object

Javascript，设计引用自身的函数

javascript function object

Javascript，设计引用自身的函数,javascript,function,object,Javascript,Function,Object,鉴于： myChart=新甘特图（“图表1”）；功能甘特图（GCContainerID）{ this.variable1=“lol”； this.variable2=“hai dere”； this.variable3=“cometishian”； .... this.gContainer=document.getElementById（gContainerID）； this.gContainer.innerHTML+=“你好”； .... } 如何使函数gInitBarDrag（）在Gan

鉴于：

myChart=新甘特图（“图表1”）；
功能甘特图（GCContainerID）{
this.variable1=“lol”；
this.variable2=“hai dere”；
this.variable3=“cometishian”；
....
this.gContainer=document.getElementById（gContainerID）；
this.gContainer.innerHTML+=“你好”；
....
}

如何使函数gInitBarDrag（）在GantChart类中定义？我不想要外部独立函数，因为它需要引用对象内部的东西

例如，该函数可以引用甘特图对象的特定实例中定义的变量1/2/3（可以有多个图表对象）

希望这有意义！例如：

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

功能甘特图（gContainerID）{
this.variable1=“lol”；
this.variable2=“hai dere”；
this.variable3=“cometishian”；
....
this.gContainer.innerHTML+=“你好”；
....
gInitBarDrag=函数（thisGanttObject）
{
警报（thisGanttObject.variable2）；
//这行行不通，因为它不知道要引用什么甘特图！
}
}

this.gContainer.innerHTML+=“你好”；

尽管如此，内联函数通常不受欢迎。

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

尽管如此，内联函数通常是不受欢迎的。

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

///这里的函数体
};
功能甘特图（GCContainerID）{
....
this.gContainer.innerHTML+=“你好”；
....
}

var gInitBarDrag=function（）{
///这里的函数体
};
功能甘特图（GCContainerID）{
....
this.gContainer.innerHTML+=“你好”；
....
}

好的，我不需要测试它，也不需要使用prototypejs就可以回答，但是如果你不想使用JS框架，我相信你可以自己编写函数

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

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);
}

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

然后必须使用document.appendChild将新的div（变量d）放入页面中。现在是“困难”部分：倾听mousedown事件并相应地采取行动。您可以使用Event.observe（prototypejs）和bind（prototypejs）将对象绑定到侦听器，这样您就可以使用它的变量（this.variable1、variable2等）

这将产生类似以下代码：

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);
}

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

注意：没有JS框架，bind和observe可以轻松实现。

这段代码未经测试。

好的，我不需要测试它，也不需要使用prototypejs就可以回答，但是如果你不想使用JS框架，我相信你可以自己编写函数

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

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);
}

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

这将产生类似以下代码：

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);
}

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

注意：没有JS框架，bind和observe可以轻松实现。

此代码未经测试。

如果将函数定义为对象的属性，则

此

指向对象：

var myObject={foo:true，bar:function（）{if（this.foo）{doStuff（）；}}

如果在返回对象的构造函数中使用了

this

，则

this

将绑定到返回的新对象。您在发布的代码中使用

this

的方式，

this

指向全局范围，这是Javascript的一个不好的部分

因此，以下是我将如何处理这个问题：

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

}

功能甘特图（gContainerID）{
var图表={
变量1：“lol”，
变量2：“海德尔”，
变量3：“cometishian”，
集装箱运输：gContainerID，
gInitBarDrag:function（）{
警报（此变量为2）；
}
}
收益表；
}
myChart=新甘特图（“图表1”）；
document.getElementById（myChart.containerId）.innerHTML+=“Hello”；

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