《JavaScript设计模式与开发实践》基础篇(2)—— 闭包和高阶函数

闭包

  • 变量的做用域

    • 若是该变量前面没有带上关键字 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 );
    复制代码

系列文章:

《JavaScript设计模式与开发实践》最全知识点汇总大全编程