Javascript 如何在事件处理程序中包含函数（及其参数），而不在页面加载时调用该函数？

我正在重构这段代码

$("#one").on("click", function() {
        if(operator === undefined) {
            firstArray.push("1");
        }
        else {
            secondArray.push("1");
        }
    });
    $("#two").on("click", function() {
        if(operator === undefined) {
            firstArray.push("2");
        }
        else {
            secondArray.push("2");
        }
    });
    $("#three").on("click", function() {
        if(operator === undefined) {
            firstArray.push("3");
        }
        else {
            secondArray.push("3");
        }
    });
    $("#four").on("click", function() {
        console.log("4");
        if(operator === undefined) {
            firstArray.push("4");
        }
        else {
            secondArray.push("4");
        }
    });
    $("#five").on("click", function() {
        console.log("5");
        if(operator === undefined) {
            firstArray.push("5");
        }
        else {
            secondArray.push("5");
        }
    });
    $("#six").on("click", function() {
        console.log("6");
        if(operator === undefined) {
            firstArray.push("6");
        }
        else {
            secondArray.push("6");
        }
    });
    $("#seven").on("click", function() {
        console.log("7");
        if(operator === undefined) {
            firstArray.push("7");
        }
        else {
            secondArray.push("7");
        }
    });
    $("#eight").on("click", function() {
        console.log("8");
        if(operator === undefined) {
            firstArray.push("8");
        }
        else {
            secondArray.push("8");
        }
    });
    $("#nine").on("click", function() {
        console.log("9");
        if(operator === undefined) {
            firstArray.push("9");
        }
        else {
            secondArray.push("9");
        }
    });
    $("#zero").on("click", function() {
        console.log("0");
        if(operator === undefined) {
            firstArray.push("0");
        }
        else {
            secondArray.push("0");
        }
    });

进入这个

function pushNumber(numberToPush) {
        if(operator === undefined) {
            firstArray.push(numberToPush);
        }
        else {
            secondArray.push(numberToPush);
        }
    }

    $("#one").on("click", pushNumber("1"));
    $("#two").on("click", pushNumber("2"));
    $("#three").on("click", pushNumber("3"));
    $("#four").on("click", pushNumber("4"));
    $("#five").on("click", pushNumber("5"));
    $("#six").on("click", pushNumber("6"));
    $("#seven").on("click", pushNumber("7"));
    $("#eight").on("click", pushNumber("8"));
    $("#nine").on("click", pushNumber("9"));
    $("#zero").on("click", pushNumber("0"));

当我尝试上面的代码时，pushNumber函数在页面加载时被调用。我知道这是因为我放了括号，从而调用了函数。但是，我不知道如果不这样做，如何将参数传递给函数

非常感谢您的帮助，谢谢。

您要做的是“curry”一个函数，或者生成一个已经添加了一些参数的新函数

首先，我们将创建一个函数，为每个单击处理程序生成一个新函数：

function generateHandler(argument) {
    return function() {
        pushNumber(argument);
    };
}

然后，您可以这样使用它：

$("#one").on("click", generateHandler("1"));

function pushNumber(numberToPush) 
    return function() {
        if(operator === undefined) {
            firstArray.push(numberToPush);
        } else {
            secondArray.push(numberToPush);
        }
    };
}

---

你想要的是一种叫做局部涂抹或咖喱的东西。您可以使用高阶函数为您的案例手动执行此操作，如下所示：

$("#one").on("click", generateHandler("1"));

function pushNumber(numberToPush) 
    return function() {
        if(operator === undefined) {
            firstArray.push(numberToPush);
        } else {
            secondArray.push(numberToPush);
        }
    };
}

---

但是许多实用性库也提供了一个

curry

或

partial

函数，您可以使用它来包装您的函数。

谢谢您的支持。这似乎是一个非常有用的概念，尽管它可能是我最喜欢的一个，因为它的名字；）。请注意，您现在可以在此基础上进一步进行重构：

[“零”、“一”、“九”].forEach（函数（名称，nbr）{$（“#”+name）.on（“click”）.generateHandler（“+nbr）；}）

为元素添加一个data-*属性，然后执行类似于：

$（“某些选择器”）.单击（函数（）{pushNumber（$（this）.attr（“数据值”）；}）；