在ES6函数中声明事件和参数

Question

正如标题所示，我有点无法找出这个函数的正确语法。

目前，我在地图上有一个事件监听器，当地图被点击时触发一个函数，如下所示:

map.on("click",(event)=>addMarker(event,parameter))

这很好，但是我想把这个函数合并成一个完整的函数。我知道它可以这样做，我不需要在addMarker函数之外定义事件。相反，我想在addMarker函数中定义事件，这样我就只有一个函数，一旦单击映射就会触发。

下面是我想要实现的(这不是正确的语法):

map.on("click",addMarker(map))

和addMarker函数是:

const addMarker = (event) => (parameter) =>{
new mapboxgl.addMarker({}).setLngLat(coords).addTo(parameter)
}

任何人都可以帮助与建议的addMarker函数的正确语法?当我这样做时，我得到错误"Cannot read properties of undefined (reading:"lng")"

Answer 1

代码:

const addMarker = (event) => (parameter) =>{
new mapboxgl.addMarker({}).setLngLat(coords).addTo(parameter)
}

(大部分)等价于:

function addMarker(event) {
return function (parameter) {
new mapboxgl.addMarker({}).setLngLat(coords).addTo(parameter)
}
}

要使curry正常工作，您需要这样设置:

function addMarker(parameter) {
return function (event) {
new mapboxgl.addMarker({}).setLngLat(coords).addTo(parameter)
}
}

(绑定parameter的函数必须是外部函数)将其转换回箭头函数的结果是:

const addMarker = (parameter) => (event) =>{
new mapboxgl.addMarker({}).setLngLat(coords).addTo(parameter)
}

Answer 2

您需要将Function作为回调传递给事件处理程序。因此，您可以按如下方式交换addMarker中的参数。这样，您将定义一个函数，该函数返回一个函数，其中parameter变量将固定为该实例的map:

const addMarker = (parameter) => (event) =>{
new mapboxgl.addMarker({}).setLngLat(coords).addTo(parameter)
}