浅谈javascript中的递归和闭包
递归和闭包作为js中很重要的一环,几乎在前端的面试中都会涉及,特别闭包。今天前端组的组长冷不丁的问了我一下,粗略的回答了一下,感觉不太满足,于是重新学习了一下,写下本篇。
在说这个两个概念之前,我们先回顾一下函数表达式。
function实际上是一种引用对象,和其他引用类型一样,都有属性和方法。定义函数有函数声明、函数表达式、以及构造函数
这里说一下前两种。
函数声明
函数声明语法如下
function functionname(arg1,arg2,arg3){ //函数体 }
其中有一个很重要的特征:函数声明提升
saber(); function saber() { console.log("excalibar!")//excalibar! }
很奇怪吧,没有报错!这是因为在执行这个函数之前,会读取函数声明。
函数表达式
函数表达式语法如下:
这种情况下的函数也叫作匿名函数。
var functionname = function(arg1,arg2,arg3) { //函数体 }
但是有一点,同比上面的函数声明,在使用函数表达式之前得先赋值,不然会报错
saber(); var saber = function() { console.log("excalibar!")//saber is not a function }
因此,在使用函数表达式之前,必须var saber()
递归
好了,哆嗦了一大堆,开始说主题
定义:一个函数通过名字调用自身
很简单,撸个代码看看:
//阶乘递归 function saber(num) { if(num <= 1){ return 1; }else{ return num*saber(num-1)//saber可以换成arguments.callee,这种方式能确保函数怎么样都不会出现问题 } } saber(3) console.log(saber(3))//6
这是一个阶乘递归,但是通过函数名调用自身,可能存在一些弊端,假如,我在外部定义了saber为空的话,就会报错,因此使用arguments.callee,能确保函数不会出错。但是也有缺点,在严格模式下arguments.callee无法被访问到。
因此我们可以使用命名函数表达式来解决这个问题
var saber = (function f(num) { if(num <= 1){ return 1; }else{ return num * f(num-1) } }) saber(3) console.log(saber(3))//6
这样,即便把函数赋值给另一个变量,f()依然有效,而且不受严格模式影响
闭包
js很恶心难懂的地方来了
要理解闭包,最重要的一点就是搞清楚作用域链,这玩意对理解闭包有很大的作用,作用域链可以看我之前的一篇博客https://www.cnblogs.com/saberinorykiss/p/11770974.html
定义:指有权访问另一个函数作用域中的变量的函数
创建闭包:在a函数内部创建另一个函数b
function createsavant(propertyname) { return function(object1,object2) { var value1 = object1[propertyname]; console.log(value1)//saber var value2 = object2[propertyname]; if (value1 < value2){ return -1; }else if(value1 >value2){ return 1; }else{ return 0; } }; } var savant = createsavant("name") var result = savant({name:"saber"},{name:"archer"});
console.log(result)//0因为字符串不能比较大小,所以返回0,如果设为数字的话,比如var result = savant({name:“1”},{name: “2”}),会返回-1
上面的代码就是一串闭包,我们在函数creatsavant里面创建了一个返回函数。我这里用简单的大白话解释一下:
首先,在函数creatsavant里创建的函数会包含外部函数的作用域链,也就是说return function()这玩意的作用域链中会包含外部creatsavant的活动对象
因此,return function()能够访问外部createsavant里面定义的所有变量,比如上面例子中的value1的值就是访问外部定义的变量得来的
然后,当函数creatsavant执行完了之后,由于return function()这家伙的作用域链还在引用外部creatsavant的活动对象,因此即使creatsavant的执行环境的作用域链被销毁了,creatsavant的对象还是会保存在内存中,供内部函数return function()来引用
最后,直到匿名函数结束了罪恶的一生,被销毁了。外部环境creatsavant的活动对象才会被销毁。
可能说的话比较直白,有些地方不专业,大家可以指出错误,我会虚心学习的。
下面来说说闭包的优缺点把:
闭包的缺点
(1)占用过多内存
首当其冲的,由于闭包会携带包含它的函数的作用域,因此会比其他正常的函数占用更多的内存。mmp,比如相同体型的人,我比别人多一个啤酒肚,重量不重才怪。所以慎重使用闭包。
(2)闭包只能取到包含任何变量的最后一个值(重要)
这个缺点在很多笔试题面试题中都会出,举个例子:
function creatfunction() { var result = new array(); for(var i = 0; i < 10; i++){//var的变量提升机制,导致了最后i只有10这一次 result[i] = function() { return i; }; } return result; } var saber = creatfunction(); for (var i = 0; i < saber.length; i++) { console.log(saber[i]())//10 10 10 10 10 10 10 10 10 10 }
上面的代码看上去,循环的每个函数都应该返回自己的索引值,即0 1 2 3 4 5 6 7 8 9。但实际上确返回了十个10。原因如下:
每个函数的作用域链中都保存了creatfunction()函数的活动对象,所以,其实他们都引用了同一个变量 i,结果当creatfuction()返回后,i的值为10,10被保存了下来,于是每个函数都引用着这个值为10的变量i,结果就如上面代码所示了。
那么如何解决这个问题呢:
方法一、创建另一个匿名函数,强制达到预期效果:
function creatfunction() { var result = new array(); for(var i = 0; i < 10; i++){ result[i] = function(num) { return function() { return num; }; }(i);//会生成很多作用域 } return result; } var saber = creatfunction(); for (var i = 0; i < saber.length; i++) { console.log(saber[i]())//0 1 2 3 4 5 6 7 8 9 }
如上面添加的代码,这里没有将闭包直接赋值给数组,而是定义了一个匿名函数,并将匿名函数的结果传给数组,在调用匿名函数的时候传入了i,由于函数是按值传递的,循环的每一个i的当前值都会复制给参数num,然后在匿名函数function(num)的内部,又创建并返回了一个访问num的闭包
。最终,result数组中的每一个函数都有一个对应的num的副本,就可以返回各自不同的值了。。。。
这种说法好像不好理解,说直白一点,就是把每个i的值都赋给num,然后把所有的num的值放到数组中返回。避免了闭包只取到i的最后一个值得情况的发生。
方法二、使用let
因为es5没有块级作用域这一说法,在es6中加入了let来定义变量,使得函数拥有了块级作用域
function creatfunction() { var result = new array(); for(let i = 0; i < 10; i++){//let不存在变量提升,每一次循环都会执行一次,for的每一次循环都是不同的块级作用域,let声明的变量都有块级作用域,所以不存在重复声明 result[i] = function() { return i; }; } return result; } var saber = creatfunction(); for (var i = 0; i < saber.length; i++) { console.log(saber[i]())//1 2 3 4 5 6 7 8 9 }
(3)闭包导致this对象通常指向windows
var name = "i am windows" var object = { name: "saber", getname : function() { return function() { return this.name } } } console.log(object.getname()())//i am windows
this是基于函数的执行环境绑定的,而匿名函数的执行环境具有全局性,因此this对象指向windows
解决办法,把外部作用域中的this对象保存在一个闭包也能访问到的变量里:
var name = "i am windows" var object = { name: "saber", getname : function() { var that = this return function() { return that.name } } } console.log(object.getname()())//saber
(4)内存泄漏
由于匿名函数的存在,导致外部环境的对象会被保存,因此所占用的内存不会被垃圾回收机制回收。
function savant(){ this.age = "18"; this.name = ["saber","archer"]; } savant.prototype.sayname = function(){ var outer = this; return function(){ return outer.name }; }; var count = new savant(); console.log(count.sayname()())//[ 'saber', 'archer' ]
我们可以保存变量到一个副本中,然后引用该副本,最后设置为空来释放内存
function savant(){ this.age = "18"; this.name = ["saber","archer"]; } savant.prototype.sayname = function(){ var outername = this.name; return function(){ return outername }; outername = null; }; var count = new savant(); console.log(count.sayname()())//[ 'saber', 'archer' ]
注意一点:即使这样还是不能解决内存泄漏的问题,但是我们能解除其引用,确保正常回收其占用的内存
说完了缺点,我们来说一下,闭包的优点把
闭包的优点
(1)模仿块级作用域
语法:
(function(){ //在这里是块级作用域 })();
举个例子来说明吧:
function saber(num){ for(var i = 0; i < num; i++){ console.log(i)//0 1 2 3 4 } // console.log(i)//5 } saber(5)
可以看到在for循环外还是能访问到i的,那么,如何装for循环外无法访问到里面的i呢
function saber(num){ (function () { for(var i = 0; i < num; i++){ // console.log(i)//0 1 2 3 4 } })(); console.log(i)//i is not defined } saber(5)
这种方式能减少闭包占用的内存问题。
(2)在构造函数中定义特权方法
function savant(name){ var name=name; this.sayname=function(){ console.log(name); } }; var savant1=new savant("saber"); var savant2=new savant("archer"); savant1.sayname(); //saber savant2.sayname(); //archer
该例子中的sayname()就是一个特权方法,可以理解为可以用来访问私有变量的公有方法。
(3)静态私有变量
在私有作用域中同样可以使用特权方法
(function (){ var name = ""; savant = function(value) { name = value; } savant.prototype.getname = function() { return name; } savant.prototype.setname = function(value) { name = value; } })(); var savant1 = new savant("saber") console.log(savant1.getname())//saber savant1.setname("archer"); console.log(savant1.getname())//archer var savant2 = new savant("lancer") console.log(savant1.getname())//lancer console.log(savant2.getname())//lancer
但是在私有作用域里面的特权方法和构造函数中不同的是,私有作用域中的特权方法是在原型上定义的,因此所有的实例都使用同一个函数,只要新建一个savant实例或者调用setname()就会在原型上赋予name一个新值。导致的结果就是所有的实例都会返回相同的值
(4)模块模式
单例模式添加私有属性和私有方法,减少全局变量的使用
语法:
var singleleton = (function(){ // 创建私有变量 var privatenum = 10; // 创建私有函数 function privatefunc(){ // 业务逻辑代码 } // 返回一个对象包含公有方法和属性 return { publicproperty: true, publicmethod: function() { //共有方法代码 } }; })();
该模式在需要对单例进行某些初始化,同时又需要维护其私有变量时是很有用的
增强的模块模式
function savant() { this.name = "saber"; }; var application = (function(){ // 定义私有 var privatea = "privatea"; // 定义私有函数 function privatemethoda(){}; // 实例化一个对象后,返回该实例,然后为该实例增加一些公有属性和方法 var object = new savant(); // 添加公有属性 object.publica = "publica"; // 添加公有方法 object.publicb = function(){ return privatea; } // 返回该对象 return object; })(); savant.prototype.getname = function(){ return this.name; } console.log(application.publica);// publica console.log(application.publicb()); // privatea console.log(application.name); // saber console.log(application.getname());// saber