Question

我是JS程序员的首选，正在完成codechool的第三届JS课程。其中一个模块引入了将函数表达式变量作为其他函数的参数传递的概念。但是，我需要一些帮助来理解为什么这种方法在某些情况下比在其他情况下更好。例如，以下代码用于条件警报，该条件警报应该识别用户是否是新用户，并在用户退出系统时抛出自定义问候语。

这就是codechool的倡导者：



    var greeting;
    var newCustomer;

    //Some code sets the variable newCustomer to true or false

    if( newCustomer ){
        greeting = function () {
            alert("Thanks for visiting the Badlands!\n" + 
            "We hope your stay is...better than most.");         
        };
    } else {
        greeting = function () {
            alert("Welcome back to the Badlands!\n" + 
            "Guess they aren't so bad huh?");
        };
    }

    closeTerminal( greeting );

    function closeTerminal( message ){ message();}

但为什么这比以下更好？



    var greeting;
    var newCustomer;

    //Some code sets the variable newCustomer to true or false

    closeTerminal();

    function closeTerminal(){ 

        if( newCustomer ) {
            alert("Thanks for visiting the Badlands!\n" + 
            "We hope your stay is...better than most.");     
        } else {
            alert("Welcome back to the Badlands!\n" + 
            "Guess they aren't so bad huh?");
        }
    }

优秀的开发人员使用哪些代码块（或任何其他代码）来实现所需的结果？将整个函数存储在变量中是否有利于仅使用单个if . . . else语句来评估newCustomer并返回所需的问候语？

Answer 1

在你的情况下，它本身并不好。

但有些情况并非如此简单。假设你不能修改closeTerminal函数，但它的开发人员仍然希望你从他的逻辑深入执行任意功能？这就是你使用callback function的地方。为它们传递函数表达式是很自然的，但并不是严格要求的。请查看purpose of callbacks in javascript。

回调的另一个用例是异步函数，稍后可能会遇到它们。

更好的例子可能是

function closeTerminal(getMessage) {
    var isNewCustomer = !Math.round(Math.random()); // complicated, local logic

    var message = getMessage(isNewCustomer);
    alert(message); // print to the closing terminal
    // (which is local to this function as well)
}

您可以使用

调用它

closeTerminal(function greeting(newCustomer) {
    // passing a custom function to determine the appropriate message
    if (newCustomer)
        return "Thanks for visiting the Badlands!\nWe hope your stay is...better than most.";     
    else 
        return "Welcome back to the Badlands!\nGuess they aren't so bad huh?";
});

Answer 2

以下是他们使用的一个例子：

function load_home() {
    var url = "http://localhost/inner_load/page_test.html";
    var method = "GET";
    var postData = " ";
    var async = true;
    var request = new XMLHttpRequest();

    /* Have a close look at this */
    request.onload = function () {
        var data = request.responseText;
        Contenido.innerHTML=request.responseText;
    }

    request.open(method, url, async);
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
    request.send(postData);
}

如您所见，我可以指定一个函数来定义在服务器返回结果时将执行的操作。另一个例子是：

function add(a, b) {
    return a+b;
}

function mult(a, b) {
    return a*b;
}

function calculate(func, a, b) {
    return func(a, b);
}

在这种情况下，我可以通过将函数作为参数传递，选择如何处理作为a和b传递的值，如果我通过add，则两个数字将是我补充说，如果我通过mult，他们就会成倍增长。

calculate(add, 10, 5);

将返回15。其中：

calculate(mult, 10, 5);

将返回50。

如果您正在使用计算器，这将为您省去很多麻烦。而不是使用if … else块和一些var存储一些整数或字符串来定义您想要执行的操作，您可以调用函数来提供您想要执行的操作。

Answer 3

可伸缩性和可重用性的概念。使用您的代码绝对有效。目前。客户要求的任何更改都需要您修改大量的代码。在使用函数保持这种粒度的同时，允许您编写有效且运行良好的代码。

我自己还没有通过任何代码教程，但你可能会发现有趣的javascript函数章节。 Here是您可以使用的链接。

Answer 4

在您的解决方案版本中，您将始终只使用警告框来迎接用户。本教程中的版本为closeTerminal方法的调用者提供了flexibilty来传递任何可以包含任何逻辑的方法。即在警报或新的jquery ui对话框或引导对话框中显示消息或完全不同的逻辑。

请参阅以下代码，了解我们如何重用您的逻辑。

HTML

<div id="myDiv"></div>

的Javascript

var greeting;
var newCustomer;

//Some code sets the variable newCustomer to true or false

if( newCustomer ){
greeting = function () {
         alert("Thanks for visiting the Badlands!\n" + 
        "We hope your stay is...better than most.");  
 };
}else {
    greeting = function () {
        alert("Welcome back to the Badlands!\n" + 
        "Guess they aren't so bad huh?");
    };
}
function closeTerminal( message ){ message();}

function divGreeting(){
    document.getElementById('myDiv').innerHTML = "Thanks for visiting the Badlands!\n" + 
            "We hope your stay is...better than most."
}

closeTerminal( greeting );
closeTerminal( divGreeting );

工作样本 - http://jsfiddle.net/7P2Ct/

将函数表达式变量作为参数传递的用途是什么？

4 个答案:

将函数表达式变量作为​​参数传递的用途是什么？

4 个答案:

将函数表达式变量作为参数传递的用途是什么？