JavaScrip之函数柯理化、参数复用、提前确认、延迟执行

---

1、参数复用

// 普通函数验证
function check(regExp, text) {
    return regExp.test(text);
}

console.log(check(/^\d+$/g, '123')); 
// true
console.log(check(/^\d+$/g, '2d')); 
// false

console.log(check(/^[a-z]+$/g, 'text')); 
// true
console.log(check(/^[a-z]+$/g, '3d')); 
// false

// --------------------------------------------------------------------------

// Currying后
function curryingCheck(regExp) {
    return function(regExp) {
        return reg.test(regExp);
    }
}

let hasNumber = curryingCheck(/^\d+$/g);
let hasLetter = curryingCheck(/^[a-z]+$/g);

console.log(hasNumber('159')); 
// true
console.log(hasNumber('2d')); 
// false

console.log(hasLetter('3d')); 
// false
console.log(hasLetter('text')); 
// true

---

示例是一个正则的校验，正常来说直接调用check函数就可以，但是如果有很多地方都要校验是否有数字，其实就是需要将第一个参数reg进行复用，这样别的地方就能够直接调用hasNumber，hasLetter等函数，让参数能够复用，调用起来也更方便。

---

2、提前确认 (惰性函数)

// 方案一
let on = function(element, event, handler) {
    if (document.addEventListener) {
        if (element && event && handler) {
            element.addEventListener(event, handler, false);
        };
    } else {
        if (element && event && handler) {
            element.attachEvent('on' + event, handler);
        };
    };
};

// 方案二
// ()(); => ~function() {.. ..}();
let on = (function() {
    if (document.addEventListener) {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.addEventListener(event, handler, false);
            };
        };
    } else {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.attachEvent('on' + event, handler);
            };
        };
    };
})();

// 方案三
// 换一种写法可能比较好理解一点，
// 上面就是把isSupport这个参数给先确定下来了
let on = function(isSupport, element, event, handler) {
    isSupport = isSupport || document.addEventListener;
    if (isSupport) {
        return element.addEventListener(event, handler, false);
    } else {
        return element.attachEvent('on' + event, handler);
    };
};

---

在做项目的过程中，封装一些dom操作可以说再常见不过，上面第一种写法也是比较常见，但是看看第二种写法，它相对于第一种写法就是自执行然后返回一个新的函数，这样其实就是提前确定了会走哪一个方法，避免每次都进行判断。

---

3、延迟运行

Function.prototype.bind = function (context) {
    let that = this,
    	args = Array.prototype.slice.call(arguments, 1);
 
    return function() {
        return that.apply(context, args);
    };
};

---

js中经常使用的bind，实现的机制就是Currying。

---

4、初步封装

let currying = function(fn) {
    // args获取第一个方法内的全部参数
    let args = Array.prototype.slice.call(arguments, 1);
    
    return function() {
        // 将后面方法里的全部参数和args进行合并
        var newArgs = args.concat(Array.prototype.slice.call(arguments));
        
        // 把合并后的参数通过apply作为fn的参数并执行
        return fn.apply(this, newArgs);
    };
};

---

通过闭包把初步参数给保存下来，然后通过获取剩下的arguments进行拼接，最后执行需要currying的函数。但是，有缺陷，这样返回的只能多扩展一个参数，currying(a)(b);这样的话，就不支持多参数调用。

---

5、递归封装

// 支持多参数传递
function progressCurrying(fn, args) {
    let that = this;
    let len = fn.length;
    let args = args || [];
    
    return function() {
        let _args = Array.prototype.slice.call(arguments);
        
        Array.prototype.push.apply(args, _args);
        
        // 如果参数个数小于最初的fn.length，则递归调用，继续收集参数
        if (_args.length < len) {
            return progressCurrying.call(that, fn, _args);
        }
        
        // 参数收集完毕，则执行fn
        return fn.apply(this, _args);
    };
}

---

其实是在初步的基础上，加上了递归的调用，只要参数个数小于最初的fn.length，就会继续执行递归。

---

6、经典面试题

实现一个add方法，使计算结果能够满足如下预期：
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;

---

function add() {
    // 第一次执行时，定义一个数组专门用来存储所有的参数
    let _args = Array.prototype.slice.call(arguments);
    
    // 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
    let _adder = function() {
        _args.push(...arguments);
        return _adder;
    };
    
    // 利用toString隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
    _adder.toString = function () {
        return _args.reduce(function (a, b) {
            return a + b;
        });
    };
    
    return _adder;
}

console.log(add(1)(2)(3)); // 6
console.log(add(1, 2, 3)(4)); // 10
console.log(add(1)(2)(3)(4)(5)); // 15
console.log(add(2, 6)(1)); // 9