JavaScript使用纯函数避免bug

• 纯函数

 一、纯函数

定义：纯函数是指不依赖并且不修改其作用域之外的函数。通过以下几个示例来认识纯函数：

var a = 10;
//纯函数
function foo(num){
    return num + 5;
}
//非纯函数:函数内依赖了外部变量a
function fun(num){
    return num + a;
}
console.log(foo(a)); //15 -->这里传入a变量为什么还是纯函数呢？
console.log(fun(5)); //15

给函数传入参数时，函数是通过自身的形参变量接收这个参数的值（栈内存），因为上面示例传入的是一个原始值类型的参数，所以函数不会依赖外部参数a。但是要注意的是如果函数执行时传入的是一个引用值类型的参数，并且在函数内部没有实现深克隆，而是直接依赖引用值类型实参的栈内存的话，那这个函数就不是纯函数，反之亦然。

// 遍历对象 for(var prop in obj)
// 1.判断是不是原始值    typeOf() object 
// 2.判断是数组还是对象 instanceof toString constructor
// 3.建立相应的数组或对象
//递归
function deepClone(origin, target){
    var target = target || {},
        toStr = Object.prototype.toString,
        arrStr = "[object Array]";
        objStr = "[object Object]";
    for(var prop in origin){

        //object.hasOwnProperty(attribute)判断attribute是不是自己本身的属性（即不拷贝原型链上的属性）       
        if(origin.hasOwnProperty(prop)){
            if(origin[prop] !== null && typeof(origin[prop]) == 'object'){
                //origin[prop]调用toString方法的返回值是[object Array]，target则赋值[]，即为数组
                if(toStr.call(origin[prop]) == arrStr){
                    target[prop] = toStr.call(target[prop]) == arrStr ? target[prop] : [] ;
                }else{
                    target[prop] = toStr.call(target[prop]) == objStr ? target[prop] : {};
                }
                //遇到引用值，应用递归实现深度克隆
                deepClone(origin[prop],target[prop]);
            }else{
                target[prop] = origin[prop];
            }    
        }
    }
    return target;
}

//非纯函数
var arr = [{name:"HTML"}];
function foo(arrF){
    arrF.push({name:"CSS"});
    return arrF;
}
var _arr = foo(arr);
_arr[0].name = "HTML5";
console.log(arr[0].name); //HTML5
//纯函数
var arr = [{name:"HTML"}];
function foo(arrF){
    var arrTarget = [];
    deepClone(arrF,arrTarget).push({name:"CSS"}); //采用深克隆
    return arrTarget;
}
var _arr = foo(arr);
_arr[0].name = "HTML5";
console.log(arr[0].name); //HTML

从实际的应用来看，纯函数可以说就是不印象纯函数之外的环境变量。这说起来和前面的纯函数定义几乎一样，那为什么需要用到纯函数呢？在什么地方会用到纯函数呢？

在编写代码的时候，不可避免的会包含一些bug。虽然不可能避免，但是我们有必要将代码的错误影响降到有限的范围内，防止一个bug影响到其他代码，让bug有迹可循。这时候就可以使用纯函数来实现这样的编程思想。

纯函数为什么可以做到这一点呢？

 

比如在vue的组件化开发实现状态共享，有多个不同层级不同父子级关系的组件共享着一个状态，共享状态之间采用纯函数的方式来实现，这样就可以实现当一个组件出现bug时，只能是自身或者是上级传递过来的参数有问题，而不会受到不相关联的组件的影响，同时也不会影响到其他组件的运行，这也就是纯函数的规避bug风险的重要思想，对于代码测试起到非常大的作用。