如何解决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对象并执行。