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, которая определена в конкретном экземпляреОбъект ganttChart (вы можете иметь несколько объектов диаграммы).

Надеюсь, что это имеет смысл!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 указывает на объект:

var myObject = {foo: true, bar: function () {if (this.foo){doStuff ();}};

Если в функции конструктора, возвращающей объект, используется this, то this привязывается к возвращаемому новому объекту.То, как вы используете this в опубликованном коде, this указывает на глобальную область, которая является одной из плохих частей Javascript.

Итак, вот как я бы подошел к этому:1012 *

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 3

Хорошо, я отвечу, не тестируя его и не используя prototypejs, но я уверен, что вы можете сами отработать функции, если не хотите использовать инфраструктуру JS.

Сначала выВы хотите создать свой div, используя document.createElement вместо внедрения HTML, что-то вроде этого:

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

Затем вам нужно будет использовать document.appendChild, чтобы разместить новый div (переменная d) на вашей странице.Теперь самое сложное: слушайте громкие события и действуйте соответственно.Вы можете сделать это, используя 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

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

function ganttChart(gContainerID) {
....

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


}

Answer 5

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

Хотя встроенные функции обычно не одобряются.