如何在事件處理程序中包含一個函數（及其參數），而無需在頁面加載時調用該函數？

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

您想要做的是“咖喱”一個函數，或生成一個已經添加了一些參數的新函數。

首先，我們將使一個函數為每個點擊處理程序生成一個新函數：

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

然后，您可以像這樣使用它：

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

Answer 2

您需要的是稱為部分應用程序或currying的東西。 您可以使用高階函數針對您的情況手動執行此操作，如下所示：

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

但是，許多實用程序庫還提供了curry或partial函數，您可能可以使用它們來包裝函數。