JavaScript使用纯函数避免bug
Posted zheoneandonly
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript使用纯函数避免bug相关的知识,希望对你有一定的参考价值。
- 纯函数
一、纯函数
定义:纯函数是指不依赖并且不修改其作用域之外的函数。通过以下几个示例来认识纯函数:
1 var a = 10; 2 //纯函数 3 function foo(num) 4 return num + 5; 5 6 //非纯函数:函数内依赖了外部变量a 7 function fun(num) 8 return num + a; 9 10 console.log(foo(a)); //15 -->这里传入a变量为什么还是纯函数呢? 11 console.log(fun(5)); //15
给函数传入参数时,函数是通过自身的形参变量接收这个参数的值(栈内存),因为上面示例传入的是一个原始值类型的参数,所以函数不会依赖外部参数a。但是要注意的是如果函数执行时传入的是一个引用值类型的参数,并且在函数内部没有实现深克隆,而是直接依赖引用值类型实参的栈内存的话,那这个函数就不是纯函数,反之亦然。
1 // 遍历对象 for(var prop in obj) 2 // 1.判断是不是原始值 typeOf() object 3 // 2.判断是数组还是对象 instanceof toString constructor 4 // 3.建立相应的数组或对象 5 //递归 6 function deepClone(origin, target) 7 var target = target || , 8 toStr = Object.prototype.toString, 9 arrStr = "[object Array]"; 10 objStr = "[object Object]"; 11 for(var prop in origin) 12 13 //object.hasOwnProperty(attribute)判断attribute是不是自己本身的属性(即不拷贝原型链上的属性) 14 if(origin.hasOwnProperty(prop)) 15 if(origin[prop] !== null && typeof(origin[prop]) == ‘object‘) 16 //origin[prop]调用toString方法的返回值是[object Array],target则赋值[],即为数组 17 if(toStr.call(origin[prop]) == arrStr) 18 target[prop] = toStr.call(target[prop]) == arrStr ? target[prop] : [] ; 19 else 20 target[prop] = toStr.call(target[prop]) == objStr ? target[prop] : ; 21 22 //遇到引用值,应用递归实现深度克隆 23 deepClone(origin[prop],target[prop]); 24 else 25 target[prop] = origin[prop]; 26 27 28 29 return target; 30
1 //非纯函数 2 var arr = [name:"html"]; 3 function foo(arrF) 4 arrF.push(name:"CSS"); 5 return arrF; 6 7 var _arr = foo(arr); 8 _arr[0].name = "HTML5"; 9 console.log(arr[0].name); //HTML5 10 //纯函数 11 var arr = [name:"HTML"]; 12 function foo(arrF) 13 var arrTarget = []; 14 deepClone(arrF,arrTarget).push(name:"CSS"); //采用深克隆 15 return arrTarget; 16 17 var _arr = foo(arr); 18 _arr[0].name = "HTML5"; 19 console.log(arr[0].name); //HTML
从实际的应用来看,纯函数可以说就是不印象纯函数之外的环境变量。这说起来和前面的纯函数定义几乎一样,那为什么需要用到纯函数呢?在什么地方会用到纯函数呢?
在编写代码的时候,不可避免的会包含一些bug。虽然不可能避免,但是我们有必要将代码的错误影响降到有限的范围内,防止一个bug影响到其他代码,让bug有迹可循。这时候就可以使用纯函数来实现这样的编程思想。
纯函数为什么可以做到这一点呢?
比如在vue的组件化开发实现状态共享,有多个不同层级不同父子级关系的组件共享着一个状态,共享状态之间采用纯函数的方式来实现,这样就可以实现当一个组件出现bug时,只能是自身或者是上级传递过来的参数有问题,而不会受到不相关联的组件的影响,同时也不会影响到其他组件的运行,这也就是纯函数的规避bug风险的重要思想,对于代码测试起到非常大的作用。
以上是关于JavaScript使用纯函数避免bug的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript——深度遍历(纯函数)递归求对象嵌最多的层数
Redux Saga:使用 redux-saga-test-plan 和 jest 在我的 saga 中测试纯 javascript 函数