Javascript 什么'；onclick设置的函数的参数范围是多少？

我有一个只接受html字符串的函数，它将显示一个信息窗口（弹出窗口），其中html作为其内容：

function createInfoWindow(info_html){
    // show a popup with info_html as its content
}  

现在我想创建一个带有按钮的信息窗口：

function createMyInfoWindow(o){
    var info_html = "<input type='button' value='click me' onclick='foo(o)'>"
    createInfoWindow(info_html);
}    

function foo(o){
    console.log(o);
}
createMyInfoWindow({ name: "test", age: 21);

函数createMyInfoWindow（o）{
var info_html=“”
创建信息窗口（信息和html）；
}    
函数foo（o）{
控制台日志（o）；
}
createMyInfoWindow（{姓名：“测试”，年龄：21岁）；

但是，当我单击按钮时，它显示找不到

o

。

请尝试以下代码

var info_html = "<input type='button' value='click me' onclick='foo(\""+o+"\")'>"

---

在分配给输入的innerHTML的HTML中，处理程序被包装在函数中，因此作用域是处理程序，然后是全局的（作用域链上可能有其他对象）

---

在您的代码中，名称是createMyInfoWindow的本地名称，处理程序（或任何其他函数）可以访问该变量。有关如何使用该变量，请参阅Molecular的答案。

您现在使用的方法是一种

eval

的形式，通常不赞成。如果您想知道所有原因，请仔细阅读

但是，有一种非常好的方法可以完成同样的任务，而不存在您所面临的范围问题（更不用说尝试将对象以字符串形式传递给函数了——yikes！），正确地执行此操作需要对函数进行一些重构，但我相信您会发现这是值得的

function createMyInfoWindow(o){
  // creating window first so we can access it from the DOM
  createInfoWindow(info_html);
  // we can select the window from the DOM now, but it would be even better if
  // createInfoWindow returned that object so we could just pick up where we left off
  var myInfoWindow = document.getElementById("myInfoWindow");

  // The button you are putting into the window
  var myButton = document.createElement("input");
  myButton.type = "button";
  myButton.value = "click me";
  // because of javascript closures, we can call foo(o) from within an anonymous function
  myButton.onclick = function () { foo(o) };
}

我更喜欢以这种方式创建HTML元素，原因有很多：1）避免隐式使用

eval

，2）在javascript为您生成HTML时更容易调试HTML，3）事件函数不再存在范围问题

---

现在只需按相反的顺序创建窗口，因为窗口元素必须先存在才能向其添加按钮，并且按钮元素必须存在，然后才能向其添加

onclick

处理程序。

如果这样做，可能需要对

name

进行编码；否则，

createMyInfoWindow（“在乔家吃饭”)

会中断。对不起，我给出了一个不是真实情况的示例。foo的参数不像字符串那么简单。请参阅我的更新示例question@wong2，你能从

createInfoWindow

function发布代码吗？@molecular抱歉，我不能。这是一个地图函数api@wong2，所以

info\u html

必须是一个字符串？如果我t可能是DOM元素。刚才从@molecular答案中的注释中看到html必须是字符串。因此，我的答案不起作用。无论如何，我将留给后代：）

function createMyInfoWindow(o){
  // creating window first so we can access it from the DOM
  createInfoWindow(info_html);
  // we can select the window from the DOM now, but it would be even better if
  // createInfoWindow returned that object so we could just pick up where we left off
  var myInfoWindow = document.getElementById("myInfoWindow");

  // The button you are putting into the window
  var myButton = document.createElement("input");
  myButton.type = "button";
  myButton.value = "click me";
  // because of javascript closures, we can call foo(o) from within an anonymous function
  myButton.onclick = function () { foo(o) };
}