Javascript 如果函数不立即运行，如何将参数传递给函数？

我有一个奇怪的问题，试图拼凑出一个有点动态的谷歌地图显示。我在地图上有重叠，我想在单击时调用一个函数。最初，我对所有内容都进行了硬编码，因此我对每个覆盖都有一个函数，如下所示：

google.maps.event.addListener(southEast, 'click', showSouth);
function showSouth() {
   // do stuff
}

google.maps.event.addListener(southEast, 'click', showArea(1));
function showArea(id) {
   // do stuff based on that id
}

这没有问题，但后来我使整个页面更具动态性，因此我决定创建一个传递ID的函数，然后根据ID进行显示，这就是我最初认为应该设置的。我修改了代码，使其看起来更像这样：

google.maps.event.addListener(southEast, 'click', showSouth);
function showSouth() {
   // do stuff
}

google.maps.event.addListener(southEast, 'click', showArea(1));
function showArea(id) {
   // do stuff based on that id
}

该函数起作用了，但问题是它在页面加载时会立即被调用。经过研究，我了解到当你们用括号调用一个函数时，这个函数会立即被调用，然后它的返回值会被引用

---

所以现在我有点纠结于如何准确地将ID传递给函数，而不让它立即调用函数。我已经找到了一些可能有效的黑客方法，但我觉得这不应该是我必须一起破解的东西…

have

showArea

返回一个与id一起工作的函数

function showArea(id) {
   return function() {
       // do stuff with id
   };
}

返回的函数关闭

id

，因此它继续引用它，并被传递到

addListener

以用作处理程序

---

或者，您也可以直接内联调用

showArea（1）

的函数

google.maps.event.addListener(southEast, 'click', function() { showArea(1); });
function showArea(id) {
   // do stuff based on that id
}

这将起作用，因为您正在对

1

进行硬编码。如果它是一个可以更改的变量，比如在循环中，您可以使用第一个示例。

尝试使用

bind（）

。 您还可以使用

bind（）

来绑定函数，并允许您向该方法传递参数，而无需在初始化时运行该方法

google.maps.event.addListener( southEast, 'click', showArea.bind( this, 1 ) );

使用

bind（）

，第一个参数始终是上下文（例如

this

），任何其他参数都将传递给方法本身。所以

• 第一个方法参数作为第二个参数在

  bind

  中传递
• 您的第二个方法参数作为第三个参数在

  bind

  中传递
• 等等

---

注意，我不是Javascript专家，所以不确定这个策略是否有我忽略的任何含义。

谢谢@squint！返回函数解决了我在初始化阶段而不是在执行阶段执行函数的调用问题。@SlickShinobi:不客气。这是一个相当普遍的问题。很高兴你找到了解决办法！

myFunction(msg) {console.log(msg)} // example function

myFunction('hello world') // myFunction called "immediately"

() => myFunction('hello world') // myFunction not called here; returns myFunction

function() { return myFunction('hello world') } // myFunction not called here; returns myFunction