Question

像往常一样，我会在这个问题前面说明我非常处于学习阶段。我正在尝试自学JavaScript，我正在读一本书。当我完成时，我可能会继续阅读另一个，但现在我需要帮助理解一些东西。关于这个问题......

我首先要包括那些让我困扰的[Callback]功能：

function doMath(number1, number2, callback) {
    var result = callback(number1, number2);
    document.getElementById("theResult").innerHTML += ("The result is: " + result + "<br>");
}

document.addEventListener(’DOMContentLoaded’, function() {
    doMath(5, 2, function(number1, number2) {
        var calculation = number1 * number2;
        return calculation;
    });
}, false);

对于我的问题，我会在这里尝试尽可能多的意义，我只是不明白如何将参数传递给函数。

例如，当我们调用doMath时，它看起来像包含参数5,2，然后是函数。该函数似乎有两个参数number1和number2。我可以看到这两个参数的值将用于计算，但我没有看到它们是如何实现的。我认为5和2会传递给上面的doMath函数，而不会在该参数函数中使用。

这些数字然后返回doMath函数，再次，数字用于那里的参数。

显然它确实如此，对吗？我遇到的问题是，我正在阅读的这本书并没有完全解释这一点。像许多其他东西一样，它掩盖了我认为必须真正理解的一些更精细的细节。最重要的是，当他提供完整的示例时，我发现了一些错误实例。我只能发现这个因为我知道HTML。从一个全新的角度来看，如果我不完全理解一个函数是如何工作的，我怎么能正确地写一个呢？如果我不明白数据的位置和原因，我怎么能期望数据正常流动呢。

如果答案为“是”，那些参数将传递给回调函数，这就足够了。如果有人愿意进一步打破这种流动，我会很感激。

Answer 1

这是逻辑流程的快速编号细分：

function doMath(number1, number2, callback) {
    // 4. doMath() is called from point 3.
    // number1 = 5
    // number2 = 2
    // callback = the function containing 'var calculation = ...'

    // 5. the callback function is executed.
    var result = callback(number1, number2);

    // 7. The result of the callback function (10) is set to the innerHTML 
    // of the below element.
    document.getElementById("theResult").innerHTML += ("The result is: " + result + "<br>");
}

// 1. The DOMContentLoaded event handler is defined
document.addEventListener(’DOMContentLoaded’, function() {
    // 2. The DOMContentLoaded event has fired, so this function handler is executed.

    // 3. doMath is called, with the number 5 & 2, and the below function handler.
    doMath(5, 2, function(number1, number2) {
        // 6. The function is executed in doMath() from point 5
        // number1 = 5 (as per the variable in doMath())
        // number2 = 2 (as per the variable in doMath())
        // note that the variables in this function are entirely separate from those in doMath(). 
        // Despite having the same name, they are in entirely different scopes.

        var calculation = number1 * number2;
        return calculation; // the value of 10 is returned to the call in doMath()
    });
}, false);

Answer 2

如果您将回调分解为自己的功能，我认为更容易看到发生了什么。

// doMath has two arguments, 5 and 2
// The result is what is returned from our function
// which used to be `callback` and is now `calculate`
function doMath(number1, number2) {
    var result = calculate(number1, number2);
    ...
}

// This was `callback`. All it does is return the result
// of multiplying 5 and 2
function calculate(number1, number2) {
    var calculation = number1 * number2;
    return calculation;
}

// call doMath with 5 and 2
doMath(5, 2);

所有这一切都在发生。在您的示例中，calculate仅作为参数传递给doMath。

需要帮助打破JavaScript功能

2 个答案: