欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅谈javascript中的递归和闭包

程序员文章站 2022-06-16 22:33:09
递归和闭包作为js中很重要的一环,几乎在前端的面试中都会涉及,特别闭包。今天前端组的组长冷不丁的问了我一下,粗略的回答了一下,感觉不太满足,于是重新学习了一下,写下本篇。 在说这个两个概念之前,我们先回顾一下函数表达式。 function实际上是一种引用对象,和其他引用类型一样,都有属性和方法。定义 ......

递归和闭包作为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"});
 savant = null;//解除对匿名函数的引用(以便释放内存)
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