zoukankan      html  css  js  c++  java
  • 浅谈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"});
    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一个新值。导致的结果就是所有的实例都会返回相同的值

    资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

    (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
  • 相关阅读:
    Linux:看门狗watchdog.sh程序编写示例
    通用linux程序看门狗(watchdog)python版
    Linux看门狗脚本 1.4
    Qt 6中的输入事件
    使用Qt5Compat库从Qt 5移植到Qt 6
    vertical-align(mozilla的在线帮助)
    css文字如何垂直居中?
    JS-apply 、call 以及 bind
    敢放手把事情给别人做
    页面----调用本地程序
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/14113558.html
Copyright © 2011-2022 走看看