尝试定位内部方法时的JavaScript范围问题

Question

我有一个像这样的代码的js文件：

var myAnonFun = function (param1) {


function createHTML(){

.....
sHTML += "<select id=param1 onchange='makeCalculations(this)'  >";
}

var vText = document.getElementById("results");
vText.innerHTML = sHTML;


function makeCalculations(){
}

}

然后，在HTML文件中我有这样的事情：

var createAnonFun = myAnonFun (param1);

js文件中的代码将按预期工作。但是，只要在js文件中创建的select html对象中输入一个值，我就会收到一条错误，指出没有makeCalculations函数。

据我所知，问题是select对象试图从全局范围到达一个函数，当然也没有。

所以我的问题是：如何将select对象定位到myAnonFun var中的makeCalculations函数？

先感谢您！

Answer 1

makeCalculations在var myAnonFun = function (param1) {内宣布，因此它的范围是该函数的本地范围（它不会在全球范围内访问）。

您最好的选择是，使用事件监听器，而不是声明内联事件处理程序：

所以代替：

sHTML += "<select id=param1 onchange='makeCalculations(this)'  >";

做：

sHTML += "<select id=param1>";

vText.innerHTML = sHTML; // Without this the following event listener will not work

// and when you are sure the <select> above has been added to the DOM
document.getElementById('param1').addEventListener('change', function() {
    makeCalculations(document.getElementById('param1'));
});

---

Another option (not recommended, though), is to make makeCalculations available globally:

变化：

sHTML += "<select id=param1 onchange='makeCalculations(this)'  >";

至：

sHTML += "<select id=param1 onchange='createAnonFun.makeCalculations(this)'  >";

并且，最后：

    function makeCalculations(){
    ...
    }
}

至：

    function makeCalculations(){
    ...
    }
    return {makeCalculations};
}

请注意，要使其正常工作，您必须已在某处执行（在函数外部）：

var createAnonFun = myAnonFun (param1);

Answer 2

您可以在全球范围内提供makeCalculations：

this.makeCalculations = function() {
  // ....
}

// Outside:

myAnonFun.makeCalculations();

Answer 3

而不是sHTML += "<select id=param1 onchange='makeCalculations(this)' >";

你可以使用以下。

var selectElement = document.createElement("select");
selectElement.addEventListener("change", makeCalculations);
vText.appendChild(selectElement); //this or replace all contents of vText

此方法还删除了不必要的字符串连接混淆。