《JavaScript設計模式與開發實踐》基礎篇（2）—— 閉包和高階函數

時間 2019-11-07

標籤 javascript 設計模式開發實踐基礎閉包高階函數欄目 JavaScript 简体版

原文原文鏈接

閉包

變量的做用域
- 若是該變量前面沒有帶上關鍵字 var，這個變量就會成爲全局變量
- 用 var 關鍵字在函數中聲明變量，這時候的變量便是局部變量，只有在該函數內部才能訪問到這個變量，在函數外面是訪問不到的
```
var func = function(){ 
    var a = 1;
    alert ( a ); // 輸出: 1 
};
func();
alert ( a ); // 輸出:Uncaught ReferenceError: a is not defined
複製代碼
```

變量的生存週期

對於全局變量來講，全局變量的生存週期固然是永久的，除非咱們主動銷燬這個全局變量。
而對於在函數內用 var 關鍵字聲明的局部變量來講，當退出函數時，它們都會隨着函數調用的結束而被銷燬
```
var func = function(){
     var a = 1; // 退出函數後局部變量 a 將被銷燬 
     alert ( a );
 }; 
 func();
複製代碼
```

閉包能夠延續變量的生存週期

var func = function(){ 
    var a = 1;
    return function(){ 
        a++;
        alert ( a );
    } 
};
var f =  func(); 
f();  // 輸出:2
f();  // 輸出:3
f();  // 輸出:4
f();  // 輸出:5
複製代碼

閉包的更多做用

封裝變量

var mult = (function(){ 
    var cache = {};
    var calculate = function(){ // 封閉 calculate 函數
        var a = 1;
        for(var i = 0, l = arguments.length; i < l; i++ ){
              a = a * arguments[i];
        };
        return a; 
    }

   return function(){
        var args = Array.prototype.join.call( arguments, ',' ); 
        if ( args in cache ){
            return cache[ args ]; 
        }
        return cache[ args ] = calculate.apply( null, arguments );
    }
})();
alert ( mult( 1,2,3 ) ); // 輸出:6 
alert ( mult( 1,2,3 ) ); // 輸出:6 
複製代碼

延續局部變量的壽命

閉包實現命令模式

<html> 
    <body>
        <button id="execute">點擊我執行命令</button>
        <button id="undo">點擊我執行命令</button> 
   <script>
    var Tv = {
        open: function(){
              console.log( '打開電視機' ); 
        },
        close: function(){
              console.log( '關上電視機' );
        } 
    };
    var createCommand = function( receiver ){ 
          var execute = function(){
               return receiver.open();// 執行命令，打開電視機
          }
          var undo = function(){ 
                return receiver.close();// 執行命令，關閉電視機
          }
          return {
                execute: execute, 
                undo: undo
         }
    };
    var setCommand = function( command ){
          document.getElementById( 'execute' ).onclick = function(){
                  command.execute(); // 輸出:打開電視機 
          }
          document.getElementById( 'undo' ).onclick = function(){ 
                  command.undo(); // 輸出:關閉電視機
          } 
    };
    setCommand(createCommand(Tv));
      </script> 
    </body>
</html>
複製代碼

閉包與內存管理
- 可能會引發內存泄漏

若是兩個對象之間造成了循環引用，那麼這兩個對象都沒法被回收，但循環引用形成的內存泄露在本質上也不是閉包形成的html

高階函數

高階函數是指至少知足下列條件之一的函數node

函數能夠做爲參數被傳遞

函數能夠做爲返回值輸出

函數做爲參數傳遞

回調函數

異步請求

var getUserInfo = function( userId, callback ){
    $.ajax( 'http://xxx.com/getUserInfo?' + userId, function( data ){
          if ( typeof callback === 'function' ){ 
              callback( data );
          } 
    });
  }
getUserInfo( 13157, function( data ){ 
    alert ( data.userName );
});
複製代碼

委託

var appendDiv = function( callback ){ 
    for ( var i = 0; i < 100; i++ ){
          var div = document.createElement( 'div' ); div.innerHTML = i;             
          document.body.appendChild( div );
          if ( typeof callback === 'function' ){
                callback( div ); 
          } 
     };
};
appendDiv(function( node ){ 
    node.style.display = 'none';
});
複製代碼

函數做爲返回值輸出

判斷數據的類型

var Type = {};
for ( var i = 0, type; type = [ 'String', 'Array', 'Number' ][ i++ ]; ){
     (function( type ){
         Type[ 'is' + type ] = function( obj ){
               return Object.prototype.toString.call( obj ) === '[object '+ type +']';
         }
     })(type)
};
Type.isArray( [] );     // 輸出:true
Type.isString( "str" );    // 輸出:true
複製代碼

getSingle

var getSingle = function ( fn ) {
     var ret;
     return function () {
         return ret || ( ret = fn.apply( this, arguments ) );
     };
  };
 var getScript = getSingle(function(){
     return document.createElement( 'script' );
 });
 var script1 = getScript(); 
 var script2 = getScript();
 alert ( script1 === script2 );  // 輸出:true
複製代碼

高階函數實現AOP （面向切面編程）

AOP(面向切面編程)的主要做用是把一些跟核心業務邏輯模塊無關的功能抽離出來，這些跟業務邏輯無關的功能一般包括日誌統計、安全控制、異常處理等。把這些功能抽離出來以後，再經過「動態織入」的方式摻入業務邏輯模塊中。ajax

Function.prototype.before = function( beforefn ){
    var __self = this; // 保存原函數的引用
    return function(){ // 返回包含了原函數和新函數的"代理"函數
         beforefn.apply( this, arguments ); 
         return __self.apply( this, arguments );
    }
};
Function.prototype.after = function( afterfn ){
     var __self = this;
     return function(){
         // 執行新函數，修正 this // 執行原函數
          var ret = __self.apply( this, arguments );        
          afterfn.apply( this, arguments );
          return ret;  
     } 
};
var func = function(){ 
    console.log( 2 );
};
func = func.before(function(){ 
    console.log( 1 );
}).after(function(){ 
      console.log( 3 );
});
func();    //  1  2  3
複製代碼

高階函數的其餘應用

currying 又稱部分求值。一個 currying 的函數首先會接受一些參數，接受了這些參數以後，該函數並不會當即求值，而是繼續返回另一個函數，剛纔傳入的參數在函數造成的閉包中被保存起來。待到函數被真正須要求值的時候，以前傳入的全部參數都會被一次性用於求值。

var currying = function( fn ){ 
    var args = [];
    return function(){
        if ( arguments.length === 0 ){
              return fn.apply( this, args ); 
        }else{
              [].push.apply( args, arguments );
              return arguments.callee; 
        }
    } 
};
var cost = (function(){ 
    var money = 0;
    return function(){
          for ( var i = 0, l = arguments.length; i < l; i++ ){
                money += arguments[ i ]; 
          }
          return money; 
    }
})();
var cost = currying( cost );  // 轉化成 currying 函數
cost( 100 ); // 未真正求值
cost( 200 ); // 未真正求值
cost( 300 );// 未真正求值 
alert ( cost() ); // 求值並輸出:600
複製代碼

uncurrying

Function.prototype.uncurrying = function () {  
    var self = this; // self 此時是 Array.prototype.push
    return function() {
        var obj = Array.prototype.shift.call( arguments );// 至關於 Array.prototype.push.apply( obj, 2 ) };
    };
};
var push = Array.prototype.push.uncurrying(); 
var obj = {
    "length": 1,
    "0": 1 
};
push( obj, 2 ); 
console.log( obj );// 輸出:{0: 1, 1: 2, length: 2}
複製代碼

函數節流：將即將被執行的函數用 setTimeout 延遲一段時間執行。若是該次延遲執行尚未完成，則忽略接下來調用該函數的請求

var throttle = function ( fn, interval ) {
    var __self = fn, // 保存須要被延遲執行的函數引用 timer, // 定時器
    firstTime = true; // 是不是第一次調用
    return function () {
          var args = arguments,
          __me = this;
          if ( firstTime ) { // 若是是第一次調用，不需延遲執行 
              __self.apply(__me, args);
              return firstTime = false;
          }
          if ( timer ) { // 若是定時器還在，說明前一次延遲執行尚未完成 
              return false;  
          }
          timer = setTimeout(function () { // 延遲一段時間執行           
               clearTimeout(timer);
               timer = null;
               __self.apply(__me, args);
          }, interval || 500 ); 
    };
};
window.onresize = throttle(function(){ 
    console.log( 1 );
}, 500 );
複製代碼