如何解决js在innerHTML之后找不到对象？

Question

varobj=function(){
this.hello=function(){
alert("hello");
}
}
varaPage=function(){
vartest=document.getElementById("test");
varobj=newobj();
test.innerHTML="hello";
}
aPage();
//这样的代码，在点击hello时，会找不到obj对象。
//请问有什么方法可以将obj对象传给已经被innerHTML的对象？

Answer 1

你的问题涉及到变量作用域的问题。我们来各个击破。首先看这段代码：varaPage=function(){vartest=document.getElementById("test");varobj=newobj();test.innerHTML="hello";}你的目的是想new一个obj对象的实例。由于变量的声明会被提前到函数执行前。你这段代码实际上是varaPage=function(){varobj,test;test=document.getElementById("test");obj=newobj();test.innerHTML="hello";}当你尝试new的时候，obj实际上是undefined。当你尝试对undefined进行new操作的时候，会出错。这个是第一个错误。假设你修复了第一个错误，aPage函数里面的obj是你想要的那个对象的实例之后，我们继续看。test.innerHTML="hello";这段代码会把一段html文本塞到DOMtree里面。onclick这种调用方式属于0级DOM事件。这种事件句柄中，查找变量的作用域链是从本节点至其父节点一直延伸到window。而你的aPage函数并不在该作用域链上。但同时，你的window下有一个变量obj，此时会查找到该变量。此时，onclick后的obj对象是window下的obj，而非你在aPage函数中new的对象。但是window下的obj在实例化之前是不包含hello方法的。所以你调用obj.hello()的时候会报错。这个是第二个错误。为了解决这个问题，推荐使用2级DOM事件。例如varOBJ=function(){this.hello=function(){alert("hello");}}varaPage=function(){vartest=document.getElementById('test');varobj=newOBJ();test.addEventListener('click',function(){obj.hello()});}此时当点击时，事件函数可以在作用域链中找到正确的obj对象并执行。