浅谈javascript中的递归和闭包

更新日期: 2019-11-01阅读: 2.1k标签: 递归

递归和闭包作为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
作者:SaberInoryKiss
出处:SaberInoryKiss的博客--https://www.cnblogs.com/SaberInoryKiss


链接: https://www.fly63.com/article/detial/6250

js递归函数——函数体内调用本函数的方式

在js中通过如果一个函数直接或间接调用函数本身,则该函数称为递归函数。

原生js实现树级递归,通过js生成tree树形菜单(递归算法)

JavaScript生成树形菜单需求:首先这是一个数据集—js的类型,我们需要把生成一个tree形式的对象 : id,与pid之间的对应关系,当pid不存在,或pid:0的时候,这一项,应该为树的顶端,那么我们需要去重新建一次索引。

Vue一个案例引发的递归组件的使用

什么是递归组件?简单来说就是在组件中内使用组件本身,下面我们就来看看如何在项目中使用递归组件去解决我们上面问题。类似与信息分类的展示在我们的项目中是非常常见的形式,我们利用递归组件可以很好的去解决问题

JavaScript实现无限级递归树

最近遇到一个需求,平时被后台惯着直接返回了树形结构给到前端,前端对这种嵌套类型的数据(如地区的级联或菜单的树形结构)省掉了一层处理。换了个后台开发返回了扁平化的数组数据给到前端自己去处理如下data。突然有点慌......

js 用迭代器模式优雅的处理递归问题

循环数组或对象内每一项值,在 js 里原生已经提供了一个迭代器。凡是需要用到递归的函数参考迭代器模式,能写出更优雅,可读性更高的代码。

Js中的递归

递归函数是在一个函数通过名字调用自身的情况下构成的,这种写法在函数有名字,而且名字以后也不会变的情况下是没有问题的。但是函数的执行与函数名factorial紧紧耦合在了一起

递归与循环的区别

递归:你打开面前这扇门,看到屋里面还有一扇门(这门可能跟前面打开的门一样大小(静),也可能门小了些(动)),你走过去,发现手中的钥匙还可以打开它,你推开门,发现里面还有一扇门,你继续打开

递归获取页面元素的真实offsetLeft和offsetTop

由于父元素的定位属性, 导致子元素及其孙元素等的offsetLeft和offsetTop变得和预期不一致(预期上都是到屏幕左边和上边的位置), 由于需要做鼠标拖动旋转和鼠标框选

JS递归及二叉搜索树的移除节点

递归含义:在某时某刻某个条件下调用包含自己的函数;注意点:⑴递归过程中一定要加限制条件,要不然会陷入死循环:递归有个过程,不是一步到位的,这一点尤其重要

js利用递归与promise 按顺序请求数据

项目中有一个需求,一个tabBar下面如果没有内容就不让该tabBar显示,当然至于有没有内容,需要我们通过请求的来判断,但是由于请求是异步的,如何让请求按照tabBar的顺序进行?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!