簡析JavaScript中的Function類型（三）——做爲值的函數

由於在ECMAScript中，函數名自己就是變量，因此函數也能夠做爲值來使用。也就是說，不只能夠像傳遞參數同樣把一個函數傳遞給另外一個函數，並且能夠將一個函數做爲另外一個函數的結果返回。

1. 做爲參數

來看一個示例：

function callFn(fn, param){
  return fn(param);
}

function add5(num){
  return num + 5;
}

var value = callFn(add5, 10);
console.log(value);//15

首先聲明瞭一個callFn函數，它接收兩個參數，一個是要調用的函數，另外一個是傳遞給要調用函數的參數。接下來建立了add5函數，而後使用callFn調用了add5，返回了add5的結果。

其實這裏使用匿名函數做爲參數也是能夠的，仍是這個例子：

var value = callFn(function(num){
  return num + 5;
}, 10);
console.log(value);//15

看到這是否是以爲有點熟悉呢？其實相似的，咱們一直在用：

setTimeout(function(){
  console.log('hello world');
}, 1000);

上面這段代碼我想讀者必定不陌生吧，這是一個延遲函數，1秒鐘後執行第一個參數——匿名函數。setTimeout是一個定義在window上的全局函數，第一個參數是要執行的回調函數，第二個參數是延遲的毫秒數。

再來看另外一個例子：

$('#id').click(function(){
  console.log('點擊了');
});

這是jQuery中的寫法，$()是一個函數調用，這個函數接收的參數是'#id'，返回了一個jQuery對象，在這個對象上再調用click()方法，這個方法接收一個匿名函數做爲參數，這樣就完成了click事件的綁定。

下面是jQuery 3.3.1版本131～144行的代碼，咱們看到jQuery就是一個函數。

var
  version = "3.3.1",

  // Define a local copy of jQuery
  jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
  },

  // Support: Android <=4.0 only
  // Make sure we trim BOM and NBSP
  rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;

這是第10333～10358行：

var
  // Map over jQuery in case of overwrite
  _jQuery = window.jQuery,

  // Map over the $ in case of overwrite
  _$ = window.$;

  jQuery.noConflict = function( deep ) {
    if ( window.$ === jQuery ) {
      window.$ = _$;
    }

    if ( deep && window.jQuery === jQuery ) {
      window.jQuery = _jQuery;
    }
    return jQuery;
  };
  // Expose jQuery and $ identifiers, even in AMD
  // (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
  // and CommonJS for browser emulators (#13566)
  if ( !noGlobal ) {
    window.jQuery = window.$ = jQuery;
  }

對於其中的邏輯咱們大可沒必要理會，從中能夠看出，這段代碼大體作了這樣一件事：

window.jQuery = window.$ = jQuery;

這樣就能理解，爲何咱們可使用$()了，$()和jQuery()是等同的。

2. 做爲返回值

先來看一段代碼：

var arr = [8, 1, 35, 3, 10];

//升序
function ascSort(v1, v2) {
  return v1 - v2;
}
arr.sort(ascSort);
console.log(arr);//[1, 3, 8, 10, 35]

//降序
function descSort(v1, v2){
  return v2 - v1;
}
arr.sort(descSort);
console.log(arr);//[35, 10, 8, 3, 1]

這是JavaScript數組（一）——排序中講的給數組排序的代碼，咱們看到升序和降序分別聲明瞭一個函數，如今咱們想能不能把這兩個函數合併爲一個呢？來看下面的代碼：

var arr = [8, 1, 35, 3, 10];

function comparisonFn(flag){
  if(flag){
    // true 升序
    return function(v1, v2){
      return v1 - v2;
    }
  }else{
    // false 降序
    return function(v1, v2){
      return v2 - v1;
    }
  }
}

arr.sort(comparisonFn(false));
console.log(arr);//[35, 10, 8, 3, 1]

如代碼所示，咱們建立了一個函數，把真正的比較函數做爲這個函數的返回值，在使用的時候經過給comparisonFn()傳遞true/false來控制升降序，達到了簡化代碼的目的。

關於函數做爲參數和返回值的例子還有不少，這裏就不一一列舉了，相信讀者隨着對JavaScript學習的不斷深刻，之後還會常常遇到的。