浓缩解读《JavaScript设计模式与开发实践》③

2017-01-12 本文已影响465人梁同学de自言自语

三、闭包和高阶函数

IMG_20170112_004128.jpg

3.1 闭包

3.1.1 变量的作用域

所谓变量的作用域，就是变量的有效范围。通过作用域的划分，JavaScript变量分为全局变量和局部变量。
声明在函数外的变量为全局变量；在函数内并且以var关键字声明的变量为局部变量。
我们都知道，全局变量能在任何作用域访问到，但这很容易造成命名冲突；而局部变量只有在函数里面能访问到，这是因为JavaScript的查找变量的规则是从内往外搜索的。

3.1.2 变量的生命周期

全局变量的生命周期是永久的（除非我们主动销毁这个全局变量），而局部变量则当函数执行完毕时被销毁。
那JavaScript中是否存在，即便函数执行完毕，依然不会被销毁的局部变量？答案是肯定的。

<script type="text/javascript">
    //现在有一个名为func的函数
    var func = function(){
        //①函数执行体中，将局部变量a赋值为1
        var a = 1;
        //②返回一个function执行环境
        return function(){
            //③执行环境中，将func.a局部变量加1，然后输出到控制台
            a++;
            console.info(a);
        }
    };
    
    //调用：将func函数执行后的返回，赋值给f
    var f = func();
    f();    //f()调用一次，输出2
    f();    //f()再调用一次，输出3
    f();    //f()接着调用，输出4
</script>

以上案例中的func.a局部变量，在func()函数执行过后并没有被销毁。每次执行f()时，仍能对它进行累加，就是佐证。这是因为func()返回了一个匿名函数的引用赋值给f，正是由于被外部变量引用了，所以不被销毁，此时这个匿名函数就称为闭包。
什么是闭包？

在一个函数内定义另外一个函数（内部函数可以访问外部函数的变量），如果将这个内部函数提供给其他变量引用时，内部函数作用域以及依赖的外部作用域的执行环境就不会被销毁。此时这个内部函数就像一个可以访问封闭数据包的执行环境，也就是闭包。

3.1.3 闭包的用途

我们不但要学习什么是JavaScript闭包，更要了解如何利用闭包特性来写代码。由于篇幅有限，书中只罗列了几个使用闭包的例子，但要知道实际开发中运用闭包非常广泛，远不止于此。

封装变量：通过闭包将不需要暴露的变量封装成“私有变量”

var person = (function(){
    var name = "William";
    return function(){
        console.info(name);          
    };
})();
person();   // 输出成功
console.info(person.name);  //// 输出失败

延续变量的生命周期：我们经常用<img>标签进行数据上报，创建一个临时的img标签，将需要上报的数据附加在img的url后缀，从而上送到服务器。如例子所示：

var report = function(dataSrc){
    var img = new Image();  //创建image对象
    img.src = dataSrc;  //将要上送的数据url赋值给img的url
};
report('http://xxx.com/uploadUserData?name=william');

可经过排查发现，使用report()函数存在30%丢失数据的情况。这是因为，img是report()函数中的局部变量，函数执行完毕后就被销毁了，而这个时候往往HTTP请求还没建立成功。而通过闭包来保存img变量可以解决请求丢失的问题：

//注意：我们将普通函数改成了自执行函数
var report = (function(){
    var imgs = [];
    return function(dataSrc){
        var img = new Image();
        images.push(img);
        img.src = dataSrc;
    }
})();

用闭包实现面向对象：我们经常使用过程和数据来描述面向对象编程当中的对象。对象的方法包含了过程，而闭包则是在过程中以执行环境的方式包含了数据。

既然闭包可以封装私有变量，自然也能完成面向对象的设计。实际上，用面向对象思想能实现的功能，用闭包也能实现，反之亦然，这就是JavaScript的灵活之处。
有这样一段面向对象的JS代码：

//Person构造器，里面有一个name属性
var Person = function(){
  this.name = "William";
};
//给Person的原型添加一个sayName()方法
Person.prototype.sayName = function(){
    console.info("hello,my name is " + this.name);
};
//实例化Person
var person1 = new Person();
person1.sayName();

用闭包可以实现同样的效果：因为在JavaScript用new执行构造函数，本质也是返回一个对象

//person()函数返回一个有sayName()方法的对象
var person = function(){
    var name = "William";
    return {
        sayName : function(){
            console.info("hello,my name is " + name);
        }
    }
};
//执行person()函数，将返回的对象赋值给person1
var person1 = person();
//调用person1.sayName()方法
person1.sayName();
//控制台输出 "hello,my name is William"

用闭包实现命令模式

命令模式是将请求封装成对象，从而可以把不同的请求对象进行参数化、对请求对象排队或者记录日志以及执行可撤销的操作。
命令模式的能够分离请求发起者和执行者之间的耦合关系。往往在命令被执行之前，就预先往命令对象中植入命令的执行者。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="execute">开启</button>
        <button id="undo">关闭</button>
        <script type="text/javascript">
            var Tv = {
                open : function(){
                    console.info("打开电视机");
                },
                close : function(){
                    console.info("关闭电视机");
                }
            };
            var OpenTvCommand = function(receiver){
                this.receiver = receiver;
            };
            OpenTvCommand.prototype.execute = function(){
                this.receiver.open();
            };
            OpenTvCommand.prototype.undo = function(){
                this.receiver.close();
            };
            var setCommand = function(command){
                document.getElementById("execute").onclick = function(){
                    command.execute();
                }
                document.getElementById("undo").onclick = function(){
                    command.undo();
                }
            };
            //调用
            setCommand(new OpenTvCommand(Tv));
        </script>
    </body>
</html>

用闭包实现命令模式：

<script type="text/javascript">
    var Tv = {
        open : function(){
            console.info("打开电视机");
        },
        close : function(){
            console.info("关闭电视机");
        }
    };
    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>

3.1.4 闭包与内存管理

一直流传着一种耸人听闻的说法，声称闭包会造成内存泄漏，所以应当尽量避免使用闭包。
局部变量本来应该在函数退出的时候被释放，但在闭包形成的环境中，局部变量不被释放。从这个意义上看，确实会造成一些数据无法被及时销毁。但我们使用闭包，是我们主动选择延长局部变量的生命周期，不能说成是内存泄漏。当使用完毕后，大可手动将这些变量设为null。
而只有闭包形成循环引用的情况下，才会导致内存泄漏。但这也不是闭包或者JavaScript的问题，我们可以避免循环引用的情况，而不是因噎废食，彻底摒弃闭包。

3.2 高阶函数

高阶函数是指满足以下两个条件之一的函数：

函数可以作为参数被传递；
函数可以作为返回值输出；

显然，JavaScript语言中的函数两个条件都满足，下面将讲解JavaScript高阶函数特性的应用示例。。

3.2.1 函数作为参数传入

把函数当做参数传递，使得我们可以抽离出一部分容易变化的业务逻辑。
这样的例子在JavaScript代码中比比皆是，比如jQuery中事件的绑定，或者jQuery中的ajax请求：

//按钮监听事件
$("btn").click(function(){
  console.info("btn clicked");
});
//可以发现，其本质就是执行了click()方法，然后传入一个函数作为参数。
//注意到：在按钮点击后的处理是变化的，通过回调函数来封装变化。

另外还有Array.sort()。这是用来排序数组的一个方法，传入一个自定义的函数来指定是递增还是递减排序。

var arr = [1,7,9,2];
//从小到大排序
arr.sort(function(){
  return a - b;
});
console.info(arr); //输出 "[1, 2, 7, 9]"
//从大道小排序
arr.sort(function(){
  return b - a;
});
console.info(arr); //输出 "[9, 7, 2, 1]"

3.2.2 函数作为返回值输出

让函数返回一个可执行的函数，在之前的代码我们已经接触过了，这使得整个运算过程是可延续。
我们通过优化一段类型判断的JavaScript代码来感受函数作为返回值输出的灵活：

//判断是否为String
var isString = function(obj){
    //通过传入的obj对象执行toString()方法，将结果值和预期字符串比较
    return Object.prototype.toString.call(obj) === '[object String]';
}
//判断是否为数组
var isArray = function(obj){
    return Object.prototype.toString.call(obj) === '[object Array]';
}
//判断是否为数字
var isNumber = function(obj){
    return Object.prototype.toString.call(obj) === '[object Number]';
}

可以发现上面的代码toString部分都是相同的，我们通过将函数作为返回值的方式优化代码。

//抽象出一个类型判断的通用函数
var isType = funcion(type){
    //该函数返回一个可执行的函数，用来执行toString方法和预期字符串做比较
    return function(obj){
        return Object.prototype.toString.call(obj) === '[Object '+type+']';
    }
}
//预先注册具体的类型判断方法
var isString = isType("String");
var isArray = isType("Array");
var isNumber = isType("Number");
//调用
console.info(isArray([1,3,2]));  //输出: true

另外一个例子，是利用JavaScript函数作为返回值这个特性实现单例模式。

var getSingle = function(fn){
    var ret;  //临时变量
    return function(){
        //如果ret已经存在的话则返回；否则新创建对象
        return ret || (ret = fn.apply(this,arguments));
    }
}
var getScript = getSingle(function(){
    return document.createElement('script');
});
var script1 = getScript();
var script2 = getScript();
console.info(script1 === script2);//输出: true

3.2.3 高阶函数实现AOP

AOP(面向切面编程)是指将日志统计、安全控制、异常处理等与业务逻辑无关的模块代码独立出来，通过“动态植入”的方式参入到业务逻辑模块当中。这样可以保持业务逻辑模块的纯净和高内聚性。
Java语言可以通过反射和动态代理机制来实现AOP技术，而JavaScript函数作为返回值的特性就可以简单的实现，这是JavaScript与生俱来的能力。

Function.prototype.invokeBefore = function(beforFn){
    var _self = this;   //原函数的引用
    return function(){
        //先执行传入的before函数
        beforFn.apply(this,arguments);
        //然后再执行自身
        return _self.apply(this,arguments);
    }
}
Function.prototype.invokeAfter = function(afterFn){
    var _self = this;   //
    return function(){
        //先执行函数，并保存执行结果
        var ret = _self.apply(this,arguments);
        //然后再执行after函数
        afterFn.apply(this,arguments);
        //最后返回结果
        return ret;
    }
}
//定义一个方法，控制台输出2
var func = function(){
    console.info(2);
};
//指定func()函数执行前和执行后要做的事情
func = func.invokeBefore(function(){
    console.info(1);
}).invokeAfter(function(){
    console.info(3);
});
//调用func()函数，控制台输出 1 2 3
func();

3.2.4 高阶函数实现柯里化

函数柯里化(function currying)的概念是由注明数理逻辑学家Haskell Curry丰富和发展起来的，所以因此得名。
currying又称为部分求值。currying函数首先接受一些参数,接受这些参数之后并不立即求值,而是返回另外一个函数,并将传入的参数函数保存起来.等真正需要求值的时候,将之前传入的所有参数一次性的求值.
我们通过JavaScript,通过一个记账的代码来模拟currying函数

var currying = function(fn){
    var args = [];  //缓存对象
    return function(){
        if(arguments.length == 0){
            //如果传入的参数为空，则直接返回结果
            return fn.apply(this,args);
        }else{
            //如果参数不为空，则将传入参数push到args数组中缓存起来
            [].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;
    }
});
//转换成currying函数
var cost = currying(cost);
cost(100);  //记账100，未真正求值
cost(100);  //记账100，未真正求值
cost(400);  //记账400，未真正求值
console.info(cost());   //求值，并输出：600

3.2.5 高阶函数实现反柯里化

通过call()和apply()方法可以借用别的对象的方法,比如借用Array.prototype.push()方法.那么有没有办法将借用的方法提取出来呢?uncurrying就是用来解决这个问题的.

//为Function对象的原型添加uncurrying方法
Function.prototype.uncurrying = function(){
    var self = this;
    return function(){
        var obj = Array.prototype.call(arguments);
        return self.apply(obj,arguments);
    }
}
//提取push方法并使用
var push = Array.prototype.uncurrying();
(function(){
    push(arguments,4);
    console.info(arguments);//输出 [1,2,3,4]
})(1,2,3);

3.2.6 高阶函数实现函数节流

JavaScript中的函数大多数都是由用户主动触发的,尤其在浏览器端的某些情况下函数被非常频繁的调用,从而导致性能问题。
比如用来监听浏览器窗口大小的window.onresize事件,当浏览器窗口被不断拉伸时,这个事件触发的频率会非常高;又比如元素的拖拽监听事件onmousemove,如果元素被不停的拖拽,也会频繁的触发；还有最典型的监听文件上传进度的事件，由于需要不断扫描文件用以在页面中显示扫描进度。导致通知的频率非常之高，大约一秒钟10次，远超过人眼所能觉察的极限。
throttle函数就是解决此类问题的方案。throttle顾名思义节流器,借鉴的是工程学里的思想,比如用节流器来稳定短距离的管道的水压或者气压,而在JavaScript中则是通过忽略短时间内函数的密集执行,达到稳定性能的作用。

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.info("resize come in");
},500);

3.2.7 高阶函数实现分时函数

函数节流是限制函数被频繁调用的解决方案,但还有另外一种情况,某些不能忽略的频繁操作,同时也影响着页面的性能。比如WebQQ加载好友列表，往往需要短时间内一次性创建成百上千个节点，严重影响页面性能。

//模拟添加1000个数据
var ary = [];
for (var i=1;i<=1000;i++) {
    ary.push(i);
};
var renderFriendList = function(data){
    for (var i=0;l=data.length;i<l;i++) {
        var div = document.createElement('div');
        div.innerHTML = i;
        document.body.appendChild(div);
    }
};
renderFriendList(ary);

通过分时函数让创建节点的工作分批进行。

//创建timeChunk函数
var timeChunk = function(ary,fn,count){
    var obj,t,len = ary.length;
    var start = function(){
        for (var i=0;i<Math.min(count || 1,ary.length);i++) {
            var obj = ary.shift();
            fn(obj);
        }
    }
    return function(){
        t = setInterval(function(){
            if(ary.length === 0){
                return clearInterval(t);
            }
            start();
        },200);
    }
};
//测试
var ary = [];
for (var i=1;i<=1000;i++) {
    ary.push(i);
};
var renderFriendList = timeChunk(ary,function(n){
    var div = document.createElement('div');
    div.innerHTML = i;
    document.body.appendChild(div);
},8);
renderFriendList(ary);

除此之外，书中还有通过高阶函数的特性实现惰性加载函数的案例，考虑到文章篇幅的关系，这里就不赘述了。

3.1 闭包

3.1.1 变量的作用域

所谓变量的作用域，就是变量的有效范围。通过作用域的划分，JavaScript变量分为全局变量和局部变量。
声明在函数外的变量为全局变量；在函数内并且以var关键字声明的变量为局部变量。
我们都知道，全局变量能在任何作用域访问到，但这很容易造成命名冲突；而局部变量只有在函数里面能访问到，这是因为JavaScript的查找变量的规则是从内往外搜索的。

3.1.2 变量的生命周期

全局变量的生命周期是永久的（除非我们主动销毁这个全局变量），而局部变量则当函数执行完毕时被销毁。
那JavaScript中是否存在，即便函数执行完毕，依然不会被销毁的局部变量？答案是肯定的。

<script type="text/javascript">
    //现在有一个名为func的函数
    var func = function(){
        //①函数执行体中，将局部变量a赋值为1
        var a = 1;
        //②返回一个function执行环境
        return function(){
            //③执行环境中，将func.a局部变量加1，然后输出到控制台
            a++;
            console.info(a);
        }
    };
    
    //调用：将func函数执行后的返回，赋值给f
    var f = func();
    f();    //f()调用一次，输出2
    f();    //f()再调用一次，输出3
    f();    //f()接着调用，输出4
</script>

以上案例中的func.a局部变量，在func()函数执行过后并没有被销毁。每次执行f()时，仍能对它进行累加，就是佐证。这是因为func()返回了一个匿名函数的引用赋值给f，正是由于被外部变量引用了，所以不被销毁，此时这个匿名函数就称为闭包。
什么是闭包？

在一个函数内定义另外一个函数（内部函数可以访问外部函数的变量），如果将这个内部函数提供给其他变量引用时，内部函数作用域以及依赖的外部作用域的执行环境就不会被销毁。此时这个内部函数就像一个可以访问封闭数据包的执行环境，也就是闭包。

3.1.3 闭包的用途

我们不但要学习什么是JavaScript闭包，更要了解如何利用闭包特性来写代码。由于篇幅有限，书中只罗列了几个使用闭包的例子，但要知道实际开发中运用闭包非常广泛，远不止于此。

封装变量：通过闭包将不需要暴露的变量封装成“私有变量”

var person = (function(){
    var name = "William";
    return function(){
        console.info(name);          
    };
})();
person();   // 输出成功
console.info(person.name);  //// 输出失败

延续变量的生命周期：我们经常用<img>标签进行数据上报，创建一个临时的img标签，将需要上报的数据附加在img的url后缀，从而上送到服务器。如例子所示：

var report = function(dataSrc){
    var img = new Image();  //创建image对象
    img.src = dataSrc;  //将要上送的数据url赋值给img的url
};
report('http://xxx.com/uploadUserData?name=william');

可经过排查发现，使用report()函数存在30%丢失数据的情况。这是因为，img是report()函数中的局部变量，函数执行完毕后就被销毁了，而这个时候往往HTTP请求还没建立成功。而通过闭包来保存img变量可以解决请求丢失的问题：

//注意：我们将普通函数改成了自执行函数
var report = (function(){
    var imgs = [];
    return function(dataSrc){
        var img = new Image();
        images.push(img);
        img.src = dataSrc;
    }
})();

用闭包实现面向对象：我们经常使用过程和数据来描述面向对象编程当中的对象。对象的方法包含了过程，而闭包则是在过程中以执行环境的方式包含了数据。

既然闭包可以封装私有变量，自然也能完成面向对象的设计。实际上，用面向对象思想能实现的功能，用闭包也能实现，反之亦然，这就是JavaScript的灵活之处。
有这样一段面向对象的JS代码：

//Person构造器，里面有一个name属性
var Person = function(){
  this.name = "William";
};
//给Person的原型添加一个sayName()方法
Person.prototype.sayName = function(){
    console.info("hello,my name is " + this.name);
};
//实例化Person
var person1 = new Person();
person1.sayName();

用闭包可以实现同样的效果：因为在JavaScript用new执行构造函数，本质也是返回一个对象

//person()函数返回一个有sayName()方法的对象
var person = function(){
    var name = "William";
    return {
        sayName : function(){
            console.info("hello,my name is " + name);
        }
    }
};
//执行person()函数，将返回的对象赋值给person1
var person1 = person();
//调用person1.sayName()方法
person1.sayName();
//控制台输出 "hello,my name is William"

用闭包实现命令模式

命令模式是将请求封装成对象，从而可以把不同的请求对象进行参数化、对请求对象排队或者记录日志以及执行可撤销的操作。
命令模式的能够分离请求发起者和执行者之间的耦合关系。往往在命令被执行之前，就预先往命令对象中植入命令的执行者。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="execute">开启</button>
        <button id="undo">关闭</button>
        <script type="text/javascript">
            var Tv = {
                open : function(){
                    console.info("打开电视机");
                },
                close : function(){
                    console.info("关闭电视机");
                }
            };
            var OpenTvCommand = function(receiver){
                this.receiver = receiver;
            };
            OpenTvCommand.prototype.execute = function(){
                this.receiver.open();
            };
            OpenTvCommand.prototype.undo = function(){
                this.receiver.close();
            };
            var setCommand = function(command){
                document.getElementById("execute").onclick = function(){
                    command.execute();
                }
                document.getElementById("undo").onclick = function(){
                    command.undo();
                }
            };
            //调用
            setCommand(new OpenTvCommand(Tv));
        </script>
    </body>
</html>

用闭包实现命令模式：

<script type="text/javascript">
    var Tv = {
        open : function(){
            console.info("打开电视机");
        },
        close : function(){
            console.info("关闭电视机");
        }
    };
    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>

3.1.4 闭包与内存管理

一直流传着一种耸人听闻的说法，声称闭包会造成内存泄漏，所以应当尽量避免使用闭包。
局部变量本来应该在函数退出的时候被释放，但在闭包形成的环境中，局部变量不被释放。从这个意义上看，确实会造成一些数据无法被及时销毁。但我们使用闭包，是我们主动选择延长局部变量的生命周期，不能说成是内存泄漏。当使用完毕后，大可手动将这些变量设为null。
而只有闭包形成循环引用的情况下，才会导致内存泄漏。但这也不是闭包或者JavaScript的问题，我们可以避免循环引用的情况，而不是因噎废食，彻底摒弃闭包。

3.2 高阶函数

高阶函数是指满足以下两个条件之一的函数：

函数可以作为参数被传递；
函数可以作为返回值输出；

显然，JavaScript语言中的函数两个条件都满足，下面将讲解JavaScript高阶函数特性的应用示例。。

3.2.1 函数作为参数传入

把函数当做参数传递，使得我们可以抽离出一部分容易变化的业务逻辑。
这样的例子在JavaScript代码中比比皆是，比如jQuery中事件的绑定，或者jQuery中的ajax请求：

//按钮监听事件
$("btn").click(function(){
  console.info("btn clicked");
});
//可以发现，其本质就是执行了click()方法，然后传入一个函数作为参数。
//注意到：在按钮点击后的处理是变化的，通过回调函数来封装变化。

另外还有Array.sort()。这是用来排序数组的一个方法，传入一个自定义的函数来指定是递增还是递减排序。

var arr = [1,7,9,2];
//从小到大排序
arr.sort(function(){
  return a - b;
});
console.info(arr); //输出 "[1, 2, 7, 9]"
//从大道小排序
arr.sort(function(){
  return b - a;
});
console.info(arr); //输出 "[9, 7, 2, 1]"

3.2.2 函数作为返回值输出

让函数返回一个可执行的函数，在之前的代码我们已经接触过了，这使得整个运算过程是可延续。
我们通过优化一段类型判断的JavaScript代码来感受函数作为返回值输出的灵活：

//判断是否为String
var isString = function(obj){
    //通过传入的obj对象执行toString()方法，将结果值和预期字符串比较
    return Object.prototype.toString.call(obj) === '[object String]';
}
//判断是否为数组
var isArray = function(obj){
    return Object.prototype.toString.call(obj) === '[object Array]';
}
//判断是否为数字
var isNumber = function(obj){
    return Object.prototype.toString.call(obj) === '[object Number]';
}

可以发现上面的代码toString部分都是相同的，我们通过将函数作为返回值的方式优化代码。

//抽象出一个类型判断的通用函数
var isType = funcion(type){
    //该函数返回一个可执行的函数，用来执行toString方法和预期字符串做比较
    return function(obj){
        return Object.prototype.toString.call(obj) === '[Object '+type+']';
    }
}
//预先注册具体的类型判断方法
var isString = isType("String");
var isArray = isType("Array");
var isNumber = isType("Number");
//调用
console.info(isArray([1,3,2]));  //输出: true

另外一个例子，是利用JavaScript函数作为返回值这个特性实现单例模式。

var getSingle = function(fn){
    var ret;  //临时变量
    return function(){
        //如果ret已经存在的话则返回；否则新创建对象
        return ret || (ret = fn.apply(this,arguments));
    }
}
var getScript = getSingle(function(){
    return document.createElement('script');
});
var script1 = getScript();
var script2 = getScript();
console.info(script1 === script2);//输出: true

3.2.3 高阶函数实现AOP

AOP(面向切面编程)是指将日志统计、安全控制、异常处理等与业务逻辑无关的模块代码独立出来，通过“动态植入”的方式参入到业务逻辑模块当中。这样可以保持业务逻辑模块的纯净和高内聚性。
Java语言可以通过反射和动态代理机制来实现AOP技术，而JavaScript函数作为返回值的特性就可以简单的实现，这是JavaScript与生俱来的能力。

Function.prototype.invokeBefore = function(beforFn){
    var _self = this;   //原函数的引用
    return function(){
        //先执行传入的before函数
        beforFn.apply(this,arguments);
        //然后再执行自身
        return _self.apply(this,arguments);
    }
}
Function.prototype.invokeAfter = function(afterFn){
    var _self = this;   //
    return function(){
        //先执行函数，并保存执行结果
        var ret = _self.apply(this,arguments);
        //然后再执行after函数
        afterFn.apply(this,arguments);
        //最后返回结果
        return ret;
    }
}
//定义一个方法，控制台输出2
var func = function(){
    console.info(2);
};
//指定func()函数执行前和执行后要做的事情
func = func.invokeBefore(function(){
    console.info(1);
}).invokeAfter(function(){
    console.info(3);
});
//调用func()函数，控制台输出 1 2 3
func();

3.2.4 高阶函数实现柯里化

函数柯里化(function currying)的概念是由注明数理逻辑学家Haskell Curry丰富和发展起来的，所以因此得名。
currying又称为部分求值。currying函数首先接受一些参数,接受这些参数之后并不立即求值,而是返回另外一个函数,并将传入的参数函数保存起来.等真正需要求值的时候,将之前传入的所有参数一次性的求值.
我们通过JavaScript,通过一个记账的代码来模拟currying函数

var currying = function(fn){
    var args = [];  //缓存对象
    return function(){
        if(arguments.length == 0){
            //如果传入的参数为空，则直接返回结果
            return fn.apply(this,args);
        }else{
            //如果参数不为空，则将传入参数push到args数组中缓存起来
            [].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;
    }
});
//转换成currying函数
var cost = currying(cost);
cost(100);  //记账100，未真正求值
cost(100);  //记账100，未真正求值
cost(400);  //记账400，未真正求值
console.info(cost());   //求值，并输出：600

3.2.5 高阶函数实现反柯里化

通过call()和apply()方法可以借用别的对象的方法,比如借用Array.prototype.push()方法.那么有没有办法将借用的方法提取出来呢?uncurrying就是用来解决这个问题的.

//为Function对象的原型添加uncurrying方法
Function.prototype.uncurrying = function(){
    var self = this;
    return function(){
        var obj = Array.prototype.call(arguments);
        return self.apply(obj,arguments);
    }
}
//提取push方法并使用
var push = Array.prototype.uncurrying();
(function(){
    push(arguments,4);
    console.info(arguments);//输出 [1,2,3,4]
})(1,2,3);

3.2.6 高阶函数实现函数节流

JavaScript中的函数大多数都是由用户主动触发的,尤其在浏览器端的某些情况下函数被非常频繁的调用,从而导致性能问题。
比如用来监听浏览器窗口大小的window.onresize事件,当浏览器窗口被不断拉伸时,这个事件触发的频率会非常高;又比如元素的拖拽监听事件onmousemove,如果元素被不停的拖拽,也会频繁的触发；还有最典型的监听文件上传进度的事件，由于需要不断扫描文件用以在页面中显示扫描进度。导致通知的频率非常之高，大约一秒钟10次，远超过人眼所能觉察的极限。
throttle函数就是解决此类问题的方案。throttle顾名思义节流器,借鉴的是工程学里的思想,比如用节流器来稳定短距离的管道的水压或者气压,而在JavaScript中则是通过忽略短时间内函数的密集执行,达到稳定性能的作用。

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.info("resize come in");
},500);

3.2.7 高阶函数实现分时函数

函数节流是限制函数被频繁调用的解决方案,但还有另外一种情况,某些不能忽略的频繁操作,同时也影响着页面的性能。比如WebQQ加载好友列表，往往需要短时间内一次性创建成百上千个节点，严重影响页面性能。

//模拟添加1000个数据
var ary = [];
for (var i=1;i<=1000;i++) {
    ary.push(i);
};
var renderFriendList = function(data){
    for (var i=0;l=data.length;i<l;i++) {
        var div = document.createElement('div');
        div.innerHTML = i;
        document.body.appendChild(div);
    }
};
renderFriendList(ary);

通过分时函数让创建节点的工作分批进行。

//创建timeChunk函数
var timeChunk = function(ary,fn,count){
    var obj,t,len = ary.length;
    var start = function(){
        for (var i=0;i<Math.min(count || 1,ary.length);i++) {
            var obj = ary.shift();
            fn(obj);
        }
    }
    return function(){
        t = setInterval(function(){
            if(ary.length === 0){
                return clearInterval(t);
            }
            start();
        },200);
    }
};
//测试
var ary = [];
for (var i=1;i<=1000;i++) {
    ary.push(i);
};
var renderFriendList = timeChunk(ary,function(n){
    var div = document.createElement('div');
    div.innerHTML = i;
    document.body.appendChild(div);
},8);
renderFriendList(ary);

除此之外，书中还有通过高阶函数的特性实现惰性加载函数的案例，考虑到文章篇幅的关系，这里就不赘述了。

浓缩解读《JavaScript设计模式与开发实践》③

三、闭包和高阶函数

3.1 闭包

3.1.1 变量的作用域

3.1.2 变量的生命周期

3.1.3 闭包的用途

3.1.4 闭包与内存管理

3.2 高阶函数

3.2.1 函数作为参数传入

3.2.2 函数作为返回值输出

3.2.3 高阶函数实现AOP

3.2.4 高阶函数实现柯里化

3.2.5 高阶函数实现反柯里化

3.2.6 高阶函数实现函数节流

3.2.7 高阶函数实现分时函数

3.1 闭包

3.1.1 变量的作用域

3.1.2 变量的生命周期

3.1.3 闭包的用途

3.1.4 闭包与内存管理

3.2 高阶函数

3.2.1 函数作为参数传入

3.2.2 函数作为返回值输出

3.2.3 高阶函数实现AOP

3.2.4 高阶函数实现柯里化

3.2.5 高阶函数实现反柯里化

3.2.6 高阶函数实现函数节流

3.2.7 高阶函数实现分时函数

猜你喜欢

热点阅读