如何给 Javascript 回调一个参数

Question

我是 Javascript 的初学者，我对如何为回调提供参数有疑问。目前我有两个代码块，它们与下面的基本相同。

let backArrow = document.createElement("INPUT")
backArrow.type = "image"
backArrow.src = "./images/noun_back_878298.png"
backArrow.alt = "Back"
backArrow.onclick = removeModuleMobile
backArrow.id = "back-arrow"
document.body.appendChild(backArrow)

它们之间的唯一区别是将 backArrow.onclick 设置为 removeModule 而不是 removeModuleMobile。相反，我想做一些事情，我向回调提供一个参数，但将它们发送到同一个回调，从而消除重复代码并拥有更合乎逻辑的工作流程。例如

backArrow.onclick = removeModule(notMobile)

或

backArrow.onclick = removeModule(mobile)

我认为这是不允许的，因为这是一个函数调用？我已经看到了很多东西，但我应该在这里使用 bind() 还是有一些其他的闭包技术。谢谢您的帮助。

Answer 1

您可以如下分配 button.onclick。

button.onclick = () => {removeModule(mobile)}

您的函数不会立即被调用，而是在单击按钮时被调用。

Answer 2

如果您多次使用相同的代码片段，请使用您要更改的参数创建一个函数，然后使用 'removeModuleMobile' 调用该函数，然后再使用 'removeModule' 调用该函数。

Answer 3

您可以使用 bind:

backArrow.onclick = removeModule.bind(backArrow, mobile)

arrow functions:

backArrow.onclick = () => removeModule(mobile);

或者只是常规函数：

backArrow.onclick = function() {
  removeModule(mobile);
}

有一些区别，主要是在值 this 将在 removeModule 中调用一次。第一个 bind 是最接近分配 backArrow.onclick = removeModule 的那个，因为我们强制（参见 bind 的第一个参数）上下文对象 this 为 backArrow .

在箭头函数的情况下，this 将在声明箭头函数时获得 this 的值，而对于常规函数（除非被 apply or call 强制）它会是全局对象（window 如果您在浏览器中）。

P.S。您可能希望使用 addEventListener 而不是设置 onclick：它可以让您更好地控制事件并且更灵活。

Answer 4

回答

function removeModule() {
  console.log("not mobile");
}

function removeModuleMobile() {
  console.log("mobile");
}

function addBackArrow(clickFn) {
  let backArrow = document.createElement("INPUT")
  backArrow.type = "image"
  backArrow.src = ".jpg"
  backArrow.alt = "Back"
  backArrow.onclick = clickFn;
  backArrow.id = "back-arrow"

  document.body.appendChild(backArrow)
}

addBackArrow(removeModule);
addBackArrow(removeModuleMobile);

解释：

要将代码行转换为 Function，您必须使用 函数声明 将这些行包装起来。您可以将其视为使用 let、var 或 const 声明变量，只是您使用的单词是 function。

一个函数声明包含三个部分

首先：一个变量名（如addBackArrow）

function addBackArrow

其次：任何可能传递到要使用的函数中的预期变量，如name、age ，或者在本例中是一个函数。

当一个变量被传递给函数时，我们给它起一个名字，这样我们就可以在函数中引用它。

这些变量被称为 arguments 我们的 function 并且它们写在我们的函数名之后的括号内。

在我们的例子中，我们将传递一个在单击元素时触发的函数。

我们可以称它为clickFn（fn是function的典型shorthand，因此"clickFn" 读作 "Click Function" )

function addBackArrow( clickFn )

最后：我们将代码行放在运行里面我们的函数。

线条位于 大括号（{ 和 }）

之间

function addBackArrow(clickFn) {
    ...

  backArrow.onclick = clickFn;
}

在上面您会注意到我们将 onclick 更改为 clickFn 的值。这是因为我们将传递给 addBackArrow 单击元素时我们希望调用的函数。

要调用 addBackArrow 并执行其中的代码两次，每个函数执行一次，您写下 函数的名称 并在括号中提供 arguments:

 addBackArrow( removeModule );
 addBackArrow( removeModuleMobile );

完整代码：

function addBackArrow(clickFn) {
  let backArrow = document.createElement("INPUT")
  backArrow.type = "image"
  backArrow.src = ".jpg"
  backArrow.alt = "Back"
  backArrow.onclick = clickFn;
  backArrow.id = "back-arrow"

  document.body.appendChild(backArrow)
}

addBackArrow(removeModule);
addBackArrow(removeModuleMobile);

如何给 Javascript 回调一个参数

How to give Javascript callback an argument

javascript

parameters

closures

callback

回答

解释：

完整代码：