傳遞函數表達式變量作爲​​參數的用途是什麼？

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/