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

Question

我是通过codechool的第3个JS课程开始工作的一名JS程序员。其中一个模块引入了传递函数表达式变量作为​​其他函数参数的概念。但是，我需要一些帮助来理解为什么在某些情况下这种方法比其他方法更好。例如，以下代码适用于条件警报，用于识别用户是否是新用户，并在用户注销系统时抛出自定义问候语。

这是codeschool倡导者：

 


    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

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

我自己还没有经历任何codechool教程，但你可能会发现功能章在雄辩的JavaScript有趣。 Here是您可以使用的链接。

Answer 4

在您的解决方案版本中，您将始终只用警告框来迎接用户。本教程中的版本给closeTerminal方法的调用者提供了灵活性来传递任何可以包含任何逻辑的方法。即在警报或新的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/