javascript - 如何在不调用的情况下传递带参数的函数

Question

我到处找，似乎找不到答案，或者至少在我非常有限的技能水平上我能理解的答案（我基本上是通过练习和谷歌自学html、css和js）。我正在尝试将其document.getElementById("button").onclick = buttonfunc;用作函数的一部分并buttonfunc用作参数。我已经能够很容易地用相当于的东西来调用这个函数Buttons(MyFunction);，因为如果我把括号像Buttons(MyFunction());我的理解一样，它将参数视为MyFunction()，即使它是一个 void 函数。这样做的问题是我不能用函数传递参数，这意味着我必须为我想要一个按钮做的每件新事情创建一个新函数，如果可以的话，我想避免这种情况，因为可能会很平凡或类似的功能。有没有办法通过函数传递一个参数，这样我就不必为每一分钟的差异创建一个新参数？提前致谢！

这是该函数的完整代码及其使用示例（我正在使用 8 个按钮进行文本冒险）。

function Buttons(b1, b2, b3, b4, b5, b6, b7, b8, b1func, b2func, b3func, b4func, b5func, b6func, b7func, b8func) {
    if (b1func == 0) {
        document.getElementById("b1").disabled = true;
        document.getElementById("b1").innerHTML = "";
    }
    else {
        document.getElementById("b1").disabled = false;
        document.getElementById("b1").innerHTML = b1;
        document.getElementById("b1").onclick = b1func;
    }
    if (b2func == 0) {
        document.getElementById("b2").disabled = true;
        document.getElementById("b2").innerHTML = "";
    }
    else {
        document.getElementById("b2").disabled = false;
        document.getElementById("b2").innerHTML = b2;
        document.getElementById("b2").onclick = b2func;
    }
    if (b3func == 0) {
        document.getElementById("b3").disabled = true;
        document.getElementById("b3").innerHTML = "";
    }
    else {
        document.getElementById("b3").disabled = false;
        document.getElementById("b3").innerHTML = b3;
        document.getElementById("b3").onclick = b3func;
    }
    if (b4func == 0) {
        document.getElementById("b4").disabled = true;
        document.getElementById("b4").innerHTML = "";
    }
    else {
        document.getElementById("b4").disabled = false;
        document.getElementById("b4").innerHTML = b4;
        document.getElementById("b4").onclick = b4func;
    }
    if (b5func == 0) {
        document.getElementById("b5").disabled = true;
        document.getElementById("b5").innerHTML = "";
    }
    else {
        document.getElementById("b5").disabled = false;
        document.getElementById("b5").innerHTML = b5;
        document.getElementById("b5").onclick = b5func;
    }
    if (b6func == 0) {
        document.getElementById("b6").disabled = true;
        document.getElementById("b6").innerHTML = "";
    }
    else {
        document.getElementById("b6").disabled = false;
        document.getElementById("b6").innerHTML = b6;
        document.getElementById("b6").onclick = b6func;
    }
    if (b7func == 0) {
        document.getElementById("b7").disabled = true;
        document.getElementById("b7").innerHTML = "";
    }
    else {
        document.getElementById("b7").disabled = false;
        document.getElementById("b7").innerHTML = b7;
        document.getElementById("b7").onclick = b7func;
    }
    if (b8func == 0) {
        document.getElementById("b8").disabled = true;
        document.getElementById("b8").innerHTML = "";
    }
    else {
        document.getElementById("b8").disabled = false;
        document.getElementById("b8").innerHTML = b8;
        document.getElementById("b8").onclick = b8func;
    }
}

Buttons("Male", "Female", "Neutral (it pronouns)", "Neutral (they pronouns)", "", "", "", "", He, She, It, They, 0, 0, 0, 0);

Buttons(
        "Citizen<span class=\"tooltip\">You are the winner of an essay-writing contest, earning a funded trip to the cosmos on the condition you keep a journal of your experience to be published at the conclusion of your journey. You will start at iDune, the Intragalactic Diplomatic post of the United Nations of Earth.</span>",
        "Diplomat<span class=\"tooltip\">You are a diplomat sent to Armistice, a city-planet and the political hub of the galaxy. You are representing the United Nations of Earth, playing a very minor role in increasing the human population at Armistice and creating positive first impressions among its citizens.</span>",
        "Explorer<span class=\"tooltip\">You are an opportunist, ready to explore planetary systems that have yet to be mapped, and hopefully find valuable resources or phenomena to be claimed, patented, or profited from. You will start at Tenkets, a commercial hub and massive market satellite established by the shelish.</span>",
        "Merchant<span class=\"tooltip\">You are a vendor of goods from Earth, ready to spread new commodities to the alien races for a price. What goods you sell, and their legality, is up to you. You will start in Menagerie, a cultural hub planet and allegedly the most diverse place in the galaxy.</span>",
        "Spacer<span class=\"tooltip\">You are a member of the United Nations of Earth's Interstellar Defense Force, the servicemen and women of which are known as \"spacers\". You are currently on a survey ship, working with a small squad to protect its crew as they investigate UNE interests.</span>",
        "Stowaway<span class=\"tooltip\">You are a criminal stowed away on a ship leaving Earth. You have little to your name and no idea where the ship you are in is headed, nor do you know whether you will be able to safely disembark without getting caught.</span>",
        "", "", Citizen, Diplomat, Explorer, Merchant, Spacer, Stowaway, 0, 0);

Buttons("Yes<span class=\"tooltip\">Continue with the selected start.</span>", "No<span class=\"tooltip\">Restart character creation.</span>", "", "", "", "", "", "", Start, CharacterCreation, 0, 0, 0, 0, 0, 0);

标签： javascriptfunctionbuttonparametersonclick

Answer 1

使用.bind方法。

const myFunctionWithParameters = myFunction.bind(null, myParameter, myOtherParameter);

myFunctionWithParameters();
// the above line is equivalent to the below line (unless myFunction uses the this variable)
myFunction(myParameter, myOtherParameter);

例如：

const sayHello = console.log.bind(null, 'hello');

sayHello();

// this is the same as:

console.log('hello');