javascript - 为什么我的函数运行不正常？

Question

抱歉没有给出明确的标题，因为我不知道为什么我的脚本不起作用。

var all=[]; 
function People(name){
    this.name=name;
    this.func=function(){alert(this.name)}; 
    all.push(this);
};
var person1=new People('Peter');
for(i=0;i<all.length;i++){
    var newBtn=document.createElement('input');
    document.body.appendChild(newBtn);
    newBtn.type='button';
    newBtn.value=all[i].name;

    newBtn.onclick=all[i].func; // why doesn't is say "Peter" when I click the button ?
};

顺便说一句，有没有更好的方法来实现我的目标:创建一些对象；对于每个对象，创建一个按钮；单击按钮时，执行一些功能。

Answer 1

当您单击按钮时，事件处理程序的上下文(this 变量)将成为按钮本身。您只需将 console.log(this) 放入 func 中即可检查它。
我推荐以下代码:

for(i=0;i<all.length;i++){
    var newBtn=document.createElement('input');
    document.body.appendChild(newBtn);
    newBtn.type='button';
    newBtn.value=all[i].name;

    newBtn.onclick=all[i].func.bind(all[i]);
};

使用bind()，您可以将所需的上下文显式插入函数中。
More on bind.