如何在不立即运行的情况下将参数传递给函数？

Question

我在尝试拼凑一个有点动态的 Google 地图显示时遇到了一些奇怪的问题。我在地图上有叠加层，我想在单击时调用一个函数。最初我对所有东西都进行了硬编码，所以我为每个叠加层都有一个函数，如下所示：

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

这没有问题，但后来我使整个页面更加动态，所以我决定制作一个可以传递 ID 的函数，然后根据它显示，这就是我觉得它本来应该设置的方式.我修改了代码，看起来更像这样：

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

该函数有效，但问题是它在页面加载时立即被调用。经过研究，我了解到，当您使用括号调用函数时，会立即调用该函数，然后引用它的返回值。 source

所以现在我对于如何将 ID 传递给函数而不让它立即调用函数有点困惑。我发现了一些可行的方法，但我觉得这不应该是我必须一起破解的东西......

Answer 1

让 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。如果它是一个可以改变的变量，比如在循环中，你会使用第一个例子。

Answer 2

尝试使用bind()。

您还可以使用 bind() 绑定函数并允许您将参数传递给该方法，而无需在初始化时运行该方法。

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

使用bind()，第一个参数始终是上下文（例如this），任何其他参数都将传递给方法本身。所以，

• 您的first方法参数作为bind中的second参数传递，
• 您的second 方法参数作为bind 中的第三个​​ 参数传递，
• 等

请注意，我不是 Javascript 专家，因此不确定我忽略的此策略是否有任何影响。

Answer 3

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