javascript - 如何在事件处理程序中包含一个函数(及其参数)，而不在页面加载时调用该函数？

Question

我正在重构这段代码

$("#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 函数在页面加载时被调用。我知道发生这种情况是因为我放了括号，从而调用了该函数。但是我不知道如何在不这样做的情况下将参数传递给函数。

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

Answer 1

您想做的是“柯里化(Currying)”一个函数，或者生成一个已经添加了一些参数的新函数。

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

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

然后，你可以像这样使用它:

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