图解闭包

说到 闭包 ,这是js不得不提的一个特性,很多传统语言都不具备这样的特性,比如JAVA C等等。 之前看书的时候,总是理解不好什么是闭包!下面就通过手绘一张原理图,来理解一下:

  首先基本上所有的编程语言都有类似的特性,局部方法可以访问外部父类方法的属性,也就是说,子类或子方法可以访问父类的资源。

        <!-- 在正常的脚本中,某个方法可以获取到外部的变量,或者全局变量 -->
        var num = 11;
        function func1(){
            console.log(num);
        }
        func1();

  因此上面的这段代码,我们可以获取到num的值。

  父类能否获取到子方法内部的值呢?

        
        function func2(){
            var num1 = 22;
            num2 = 33;
        }
        func2();
        <!--console.log(num1);  会报错!-->
        console.log(num2); <!--可以获取到num2的值,因为不使用var定义变量时,默认是全局变量 -->

  当然是不可以的,因为子方法的变量作用域仅仅是子方法的范围,外部是无法获取到的。

  那么如何才能在外部获取到子方法的局部变量呢!

  如果是java,一个类的私有属性,可以通过公共的get方法来获取,比如:

class Person{
  private String name;
  public String getName(){
    return name;    
}    
}

  通过上面的方式可以获取到一个类内部的私有属性,同样的,在js中可以通过某个方法来获取这个方法的局部变量,然后通过这个方法内的方法来读取想要的变量值。

        function func3(){
            var num3 = 44;
            function func4(){
                return num3;
            }
            return func4;
        }
        var func = func3();
        console.log(func());

  参考下面的图解:

  在外部无法获取到func3内部的局部变量,但是func3内部的局部方法func4却可以获取到,因此 返回一个func4的引用 ,这样在外部通过这个func4就可以获取到func3的内部变量。

  虽然是绕了一个圈子,但是在方法外部却通过这样一个手段获取到了内部的值。

  而这个方法内的局部方法func4就叫做闭包,按照很多书上的概念,这个方法搭建了方法内部与方法外部的桥梁,使得在外部也可以任意的获取到方法内部的资源。

  但是闭包会造成变量在内存中持久占用,因此会有一定的性能问题,最好不要轻易使用,即便使用也要在恰当的实际进行释放。

  示例的源码:

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
        <!-- 在正常的脚本中,某个方法可以获取到外部的变量,或者全局变量 -->
        var num = 11;
        function func1(){
            console.log(num);
        }
        func1();

        <!-- 但是在外部是无法获取方法内部的局部变量的 -->
        function func2(){
            var num1 = 22;
            num2 = 33;
        }
        func2();
        <!--console.log(num1);  会报错!-->
        console.log(num2); <!--可以获取到num2的值,因为不适用var定义变量时,默认是全局变量 -->

        <!-- 那么如何在外部获取到内部的变量呢!javascript可以办到 -->
        function func3(){
            var num3 = 44;
            function func4(){
                return num3;
            }
            return func4;
        }
        var func = func3();
        console.log(func());

        </script>
    </body>
</html>

  运行结果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【插件开发】—— 10 JFace开发详解

    前几篇讲过SWT的使用,但是SWT是基本的小控件,只能针对使用简单的数据类型,比如字符串,数字等等。但是遇到了复杂的类,该怎么办呢? ?   不要担心!这...

    用户1154259
  • 一分钟教你在博客园中制作自己的动态云球形标签页

    经常看到别人的博客里面有动态的云标签页,感觉很是高大上,自己也很像弄一个。于是去找寻源码,在阿里西西页面特效中找到了云标签的源码,经过分析和解剖,弄成了符合博...

    用户1154259
  • JS面向对象高级特性

    本篇是通过学习视频《一头扎进javascirpt高级篇》整理的一些相关知识,大致包括下面几个方面:   1 对象的创建方法   2 对象的对象属性、私有属...

    用户1154259
  • new一个Vue

    感谢支持ayqy个人订阅号,每周义务推送1篇(only unique one)原创精品博文,话题包括但不限于前端、Node、Android、数学...

    ayqy贾杰
  • WPF 在 XAML 写 C# 代码

    本文告诉大家如何扔掉 cs 文件,在 xaml 写 C# 代码,将 xaml 和 C# 代码写在一个文件

    林德熙
  • html页面显示服务器时间

    lblTimer = $("#lbltimer"); d = new Date('<%=DateTime.Now.ToString("yyyy...

    冰封一夏
  • Phantomjs+Nodejs+Mysql数据抓取(2.抓取图片)

    概要 这篇博客是在上一篇博客Phantomjs+Nodejs+Mysql数据抓取(1.抓取数据) http://blog.csdn.net/jokerko...

    九灵
  • 简写js的积累

    写js的时候,有很多小技巧可以让我们的代码更整洁,只是我们都不注意积累,先上几个自己平时用的,以后慢慢积累。

    wade
  • JavaScript

    JavaScript是前端的一门编程语言简称JS,需要说明的是JS和java没有关系,js也叫ecmascript,当前使用较多的版本是5.1版本。

    GH
  • 使用await和async关键字开发nodejs应用批量取出简书网站的文章标题和超链接

    async用来表示函数是异步的,定义的函数会返回一个promise对象,可以使用then方法添加回调函数。

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券