《高级前端3.3》JavaScript高级函数——惰性,柯里化,级联

在JavaScript的世界里，函数贯穿始终。我们开发的时候并不是每一个函数都是直接声明然后调用函数名字这么简单，需要掌握很多高级的函数来帮助我们优化代码的性能以及书写出更加对整体业务有通用性的高级函数。 

JavaScript在EC6之前没有class，而只有function，就是不断地利用各种思想来实现很多高级函数。

 

 

JavaScript惰性函数

惰性函数，即只在第一次执行，第一次执行后再调用得到的结果都是一样的。这样可以保证函数的执行性能，尤其是编写跨浏览器的、高效运行的库之时。

/*普通的Ajax中的创建XHR*/
function createXHR() {
    var xhr = null;
    try {
        // Firefox, Opera 8.0+, Safari, IE7+
        xhr = new XMLHttpRequest();
    } catch (e) {
        //Internet Explorer
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                xhr = null;
            }
        }
    }
    return xhr;
}

再来看上面这个函数改成惰性函数的样子：

/*使用Ajax存在于网站的各个地方，每次都要createXHR
  里边的流程较多，影响性能；
  我们在第一次执行函数后已经判断出浏览器类型，
  此时我们createXHR ==>>> XHR，直接把函数改成第一次返回的值
  这样，之后的每次调用都可以直接获得结果，而不必走一大堆重复的流程

  虽然性能的提升不会一下快3秒5秒，但js本身就是以微秒来计的，精益求精
*/
/*惰性函数*/
function createXHR() {
    var xhr = null;
    if (typeof XMLHttpRequest != 'undefined') {
        xhr = new XMLHttpRequest();
        createXHR = function() {
            return new XMLHttpRequest(); //改变函数
        }
    } else {
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
            createXHR = function() {
                return ActiveXObject("Msxml2.XMLHTTP"); //改变函数
            }
        } catch (e) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                createXHR = function() {
                    return ActiveXObject("Microsoft.XMLHTTP"); //改变函数
                }
            } catch (e) {
                xhr = null;
            }
        }
    }
    return xhr;    //第一次会运行到
}

 

 

函数柯里化

柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。

柯里化是降低通用性，增加适用性。

柯里化的作用包括：1.参数复用；2.提前返回；3.延迟计算

 

来看一个柯里化函数：

//合并参数 第一个函数的参数合并成整体的 传递给统一的函数
function curry(fn){
    console.log(fn);
    
    console.log(arguments);        //arguments是传入的所有参数的一个Array对象

    var args = Array.prototype.slice.call(arguments, 1);    //将固定的第一个参数分离
    console.log(args);
    return function(){
        var innerArgs = Array.prototype.slice.call(arguments);
        var finalArgs = args.concat(innerArgs);        //合并所有参数[50,1,2]
        console.log(finalArgs);
        console.log(this);
        return fn.apply(this, finalArgs);    //设add(...)的参数为数组finalArgs，并返回计算值
    }
}
function add(num1, num2, num3){
    return num1+num2+num3;
}
var t = curry(add,50)(1,2);
alert(t);

更详细了解函数柯里化：

http://www.mamicode.com/info-detail-1076478.html

http://www.zhangxinxu.com/wordpress/2013/02/js-currying/

 

 

JavaScript级联函数

级联函数也叫链式函数，方法链一般适合对一个对象进行连续操作(集中在一句代码)。一定程度上可以减少代码量，缺点是它占用了函数的返回值。

jQuery里边就有大量的这种用法。

实现的方式非常简单，就是再方法后边把自身this给return回去：

//a.脸.嘴.腿
function classA(){
    this.lian = "";
    this.zui = "";
    this.tui = "";
}
classA.prototype = {
    setLian: function(){
        this.lian = "大饼脸";
        return this;
    },
    setZui: function(){
        this.zui = "大嘴";
        return this;
    },
    setTui: function(){
        this.tui = "长腿欧巴";
        return this;
    }
};
var person = new classA();
person.setLian().setZui().setTui();

console.log(person);