js中函数地址问题
第一个函数:
for(var i=0;i<100;i++)
{
var btn=document.createElement('button');
btn.innerHTML="btn"+(i+1);
btn.onclick=function (){
alert(this.innerHTML);
}
document.body.appendChild(btn);
}
第二个函数:
for(var i=0;i<100;i++)
{
var btn=document.createElement('button');
btn.innerHTML="btn"+(i+1);
btn.onclick=function (){
alert(btn.innerHTML);
}
document.body.appendChild(btn);
}
这两个函数执行结果为什么不一样?在第一个函数中
function (){
alert(this.innerHTML);
}
这个函数被存储了几份?在第二个函数中
function (){
alert(btn.innerHTML);
}
又有几个副本?我以前接触的教程里的说法,应该是只存储了一份吧。因为函数貌似是字符串形式存储的,因为生成每个btn.onclick时,因为内容不变,所以后面的99的btn.onclick都指向第一个btn.onclick生成的
function (){
alert(this.innerHTML);
}
。是这样的吗?
**************************************************************************
我们进行第二轮分析:
for(var i=0;i<100;i++)
{
var btn=document.createElement('button');
btn.innerHTML="btn"+(i+1);
btn.onclick=function (){
alert(this.innerHTML);
}
document.body.appendChild(btn);
}
和
function btnClick(){
alert(this.innerHTML);
}
for(var i=0;i<100;i++)
{
var btn=document.createElement('button');
btn.innerHTML="btn"+(i+1);
btn.onclick=btnClick;
document.body.appendChild(btn);
}
这两种写法,性能上有差别吗?有没有必要把
function btnClick(){
alert(this.innerHTML);
}
提取到循环外面呀?反正是我可以保证第二种写法btn.onclick都共用一个函数副本。真心不懂,求大神赐教。
function
js
函数地址
------解决方案--------------------JS里只有函数作用域没有块级作用域。
你每次循环里var btn的时候,其实看起来是每次循环才var,其实预编译的时候已经将var提取到函数最顶端了。
所以第二个函数预编译以后就可以理解为
var btn;
for(var i=0;i<100;i++){
btn=document.createElement('button');
btn.innerHTML="btn"+(i+1);
btn.onclick=function (){
alert(btn.innerHTML);
}
document.body.appendChild(btn);
}
当for循环完毕以后btn指向的是最后那次create出来的button。
所以弹出来的东西不是你想要的。
至于第一个函数里用的是this.innerHTML,这个this始终指向的是每次新创建的btn。
至于第二个问题,如果放在里面可以理解为每个btn都有自己的一个onclick事件,指向单独的一个匿名函数,放在外面的话,指向的同一个函数。性能上的差距什么的其实倒没有太大的影响。