具有父相关参数的 Onclick 函数

Question

我有这个对象：

Tr.Competence = function()  {
    var thisCount = //variableNumber;
    this.name = "comp" + thisCount;
    var newRow = parentTable.insertRow(-1);
    var cell1 = newRow.insertCell(0);

    var element1 = document.createElement('input');
    element1.type = "button";
    element1.value = "+";
    element1.onclick = function() {
        makeSpecialisation(thisCount, this.name)
    };

    cell1.appendChild(element1);
}

还有这个功能：

function makeSpecialisation(parentCount, parentEl)  {
    window[parentEl + "SpecialisationCount"]++;
    var specialisationName = parentEl + "Spe" + window[parentEl + "SpecialisationCount"] ;
    //testing variables with an alert
    alert(
       "parentCount=" + parentCount +
       " & parentEl=" + parentEl + 
       " & specialisationName=" + specialisationName + 
       " comXSpecialisationCount=" + window[parentEl + "SpecialisationCount"]
    );
}

如果 element1.onclick 直接调用 makeSpecialisation(thisCount, this.nom) （没有匿名函数），那么变量没问题，但在评估后我不能使用它（在每个新的 Tr.Competence 实例调用上） . => 见：http://jsfiddle.net/hq8U3/2/

如果 element1.onclick 使用匿名函数包装器调用 makeSpe[...]，我可以随时调用它，但变量是 NaN 或未定义（或 JSFiddle 上的空白）。 => 见：http://jsfiddle.net/hq8U3/3/

我该怎么做才能使我的变量正常工作并且我可以在 onClick 事件中调用它们？

Answer 1

第一：

因为你有一个改变this范围的annon函数，所以代替：

element1.onclick = function() {
    makeSpecialisation(thisCount, this.name)
};

你需要这样做：

var self = this;
element1.onclick = function() {
    makeSpecialisation(thisCount, self.name);
};

第二：再次因为它是 annon 函数，您需要将其包装并调用它以使其调用您的其他函数，所以上面变成了这样：

var self = this;
element1.onclick = (function() {
   makeSpecialisation(thisCount, self.name);
})();

第三：我认为你真的想这样做：

element1.setAttribute('onclick', makeSpecialisation(thisCount, this.name));

在这种情况下，上述两件事很高兴知道但无关紧要。

最后，您应该使用console.log() 而不是alert() 进行调试。如果您忘记进行调试，console.log() 不会像alert() 那样惹恼您的用户或破坏您的程序。

jsfiddle here