js中函数地址问题

Question

第一个函数：
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都共用一个函数副本。真心不懂，求大神赐教。
functionjs函数地址

Answer 1

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事件，指向单独的一个匿名函数，放在外面的话，指向的同一个函数。性能上的差距什么的其实倒没有太大的影响。