新手入门js闭包学习过程解析

闭包，其实是一种语言特性，它是指的是程序设计语言中，允许将函数看作对象，然后能像在对象中的操作般在函数中定义实例（局部）变量，而这些变量能在函数中保存到函数的实例对象销毁为止，其它代码块能通过某种方式获取这些实例（局部）变量的值并进行应用扩展。

我们的理解：

其实闭包就是一个函数，一个外部函数通过调用函数并return返回出内部函数，这里的内部函数就是一个闭包；此时在内部函数中是可以访问到外部函数的变量的；

要想理解闭包，首先我们要了解栈堆内存和作用域链；首先我们来讲解栈堆内存：

首先我们来看个demo：

var a=1;
var obj={"name":"咸鱼"}

上面简单的两句代码，其实就是在内存中做了两件事，效果图如下：

在js简单实现深浅拷贝（https://www.jb51.net/article/171389.htm）一文中我们知道基本数据类型是存储在栈内存中的，引用数据类型是存储在堆内存中的，其实上面的两句代码在内存中就是做了两件事：1.首先在栈内存中开辟了一块空间用来存放a的变量和值；2.在堆内存中开辟了一块空间用来存储obj的值，同时在将地址指向栈内存中的变量名obj

如果我们在代码下面再加上一句obj={"name":'张三"}，这个时候我们之前存储name为咸鱼的值也就是obj原来的值会被js中的垃圾回收机制回收掉，然后obj的值重新的指向{name:"张三"}这个值；

作用域链

再来看一下这个例子：

var a = 1;
function fn(){
  var b = 2;
  function fn1(){
    console.log(b);//2
    console.log(a);//1
  }
  fn1();
}
fn();

效果图如下：

1.var a=1；这个时候我们是在全局执行环境的，浏览器的全局环境就是window作用域，我们的window作用域中有a和fn；

2.当我们往下走到fn的时候，栈内存会开辟一块新的执行环境，此时fn的执行环境中我们有b和fn1；

3.当我们接着往下走到fn1的时候，这时栈内存同样会开辟一块新的执行环境，此时fn1的执行环境中是没有任何变量数据的，但是我们在fn1中输出a、b，我们都是可以读取到的；这是因为程序在读取变量的时候是从内到外的开始读的，是随着fn1开始往上一层一层的查找，是这样的执行顺序(fn1 = > fn = > window)，如果找到window中还没有读取到变量，这时程序才会报错；

当然在执行的过程中，垃圾回收机制如果检测到程序执行完了是会进行垃圾回收的，避免造成内存泄露等问题；就是说我们的fn1里面执行完之后fn1的作用域就会被销毁，接着程序执行fn，fn执行完之后fn就会被销毁；往上执行到全局的时候，整个程序就没有了fn的作用域和fn1的作用域，只剩下浏览器的全局作用域window，这个时候window里只剩a和fn；

了解了上面的作用域链和栈内存和堆内存的知识之后，我们来开始讲解js闭包：

function outer() {
   var a = '123'

  return function add(){
　　　　//在这里因为作用域的关系，add是能访问到outer的所有变量的，但是outer是访问不到add的变量；
　　　　//所以思路一转，把add的值作为结果return出来变通实现outer外部函数访问到了内部函数变量

  // add就是一个闭包函数，因为他能够访问到outer函数的作用域，add中没有找到变量a，则会继续往上层作用域找
    console.log(a);
  }
}
var inner = outer()  // 获得add闭包函数
inner()  //"123"

首先我们可以看到，在全局作用域下我们是有一个outer函数的，outer作用域里面有a和add，add作用域里面执行控制台输出a的变量，此时这里的add函数就形成了一个闭包，因为add函数里面需要访问到outer作用域下的a变量，而他们不处在同一个作用域中，所以两者相互牵引，需要输出a，上面outer中的变量a就必须得在，作用域链查找到outer的时候找到a了，输出a的时候，垃圾回收机制会认为add还没有执行完成，因为此时的作用域链查找已经到了outer作用域下，所以不会清理a的内存空间；所以这就会带来一个问题：如果我们多次的使用闭包，则会给我们的程序带来内存占用过多，导致性能问题；

函数内部能访问全局变量是javascript语言的特殊之处，但是如果我们想达到函数外部能访问内部变量的时候，我们就可以使用闭包，这就是闭包给我们带来的便利；

闭包的优缺点：

优点：

1.可以读取函数内部的变量

2.可以避免全局污染

缺点：

1.闭包会导致变量不会被垃圾回收机制所清除，会大量消耗内存；

2.不恰当的使用闭包可能会造成内存泄漏的问题；

总结：

1.作用域链查找变量的方式是一层一层的往上查找，直到找到为止，如果找到window全局作用域还未找到，就报undefined；

2.嵌套函数中，因为不在同一作用域，正常情况下内外部函数是访问不到内部函数的，但是通过闭包可以实现；

3.尽可能少的使用闭包，因为会造成内存消耗大以及有可能造成内存泄露（如果不需要的时候，不要随便使用）；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 通俗易懂地解释JS中的闭包

    1. "闭包就是跨作用域访问变量." [示例一] var name = 'wangxi' function user () { // var name = 'wangxi' function getName () { console.log(name) } getName() } user() // wangxi 在 getName 函数中获取 name,首先在 getName 函数的作用域中查找 name,未找到,进而在 user 函数的作用域中查找,同样未找到,继续向上回溯,发现在

  • js中的闭包实例展示

    前言 准确来说,闭包是基于正常的垃圾回收处理机制下的.也就是说,一般情况一个函数(函数作用域)执行完毕,里面声明的变量会全部释放,被垃圾回收器回收.但闭包利用一个技巧,让作用域里面的变量,在函数执行完之后依旧保存没有被垃圾回收处理掉. 闭包 定义 MDN定义 javascriptkit 词法作用域 闭包的三大特点为: 1.函数嵌套函数 2.内部函数可以访问外部函数的变量 3.参数和变量不会被回收. 作用域链 函数在执行的过程中,先从自己内部找变量如果找不到,再从创建当前函数所在的作用域(词法作用

  • js实现为a标签添加事件的方法(使用闭包循环)

    js实现为a标签添加事件的方法(使用闭包循环)

    本文实例讲述了js实现为a标签添加事件的方法.分享给大家供大家参考,具体如下: 以示例说明: 实现效果:循环为带有ml-praise样式类的a标签添加事件,并且在点击a标签后,相应的数量增加1. Html结构如下所示: <ul> <li><a href="javascript:;" class="ml-praise">数量:<span class="ding-num">100</span>

  • JS继承与闭包及JS实现继承的三种方式

    前  言 在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 . 成员属性.静态属性.原型属性与JS原型链).今天我们来继续探讨剩余的内容吧. 我们都知道,面向对象的三大特征--封装.继承.多态. 封装无非就是属性和方法的私有化,所以我们JS中提供了私有属性和私有方法. 而JS中并没有多态,因此我们说JS是一门基于对象的语言,而非面向对象的语言. 那么,面向对象三大特征中,在JS中最重要的就是继承了. 一.继承的基本概念 使用

  • 深入理解javascript函数参数与闭包

    最近在学习javascript的函数,函数是javascript的一等对象,想要学好javascript,就必须深刻理解函数.本人把学习的过程整理成文章,一是为了加深自己函数的理解,二是给读者提供学习的途径,避免走弯路.内容有些多,但都是笔者对于函数的总结. 1.函数参数 1.1:参数是什么 1.2:参数的省略 1.3:参数默认值 1.4:参数传递方式 1.5:同名参数 1.6:arguments对象 2.闭包 2.1:闭包定义 2.2:立即调用的函数表达式(IIFE, Immediately

  • js闭包用法实例详解

    本文实例讲述了js闭包用法.分享给大家供大家参考,具体如下: 引言 在公司中需要写一个js脚本来进行网站的统计,实现类似百度统计或者站长统计的功能,在实现的过程中自己感觉写的代码还是可以的,因为之前的js代码都是这些写,但是在组长代码走查的时候却非常的不满意,因为我们在js中写的方法都是全局的方法,因为我们写的东西需要嵌入到别人的界面中,所以这些全局的东西很可能会和别人的东西重名从而引发错误,所以说组长就给我留下一句话:用js闭包包起来. 变量作用域 我们都非常的熟悉变量的作用域就分为:全局变量

  • 利用js的闭包原理做对象封装及调用方法

    创建一个js文件,名为testClosure.js: (function () { function a() { alert('i am a'); } outFunc = function () { a(); } })(); 这里不论写多少个function,a b c d ...外面都调用不到,包括这里面var定义的变量也都调用不到,那么你在里面尽情的写,就不用担心这些函数名变量名跟外界冲突: 只需要暴露一个outFunc这个函数供外界调用.这个函数呢没有用var定义,就变成一个全局变量,外界

  • 新手入门js闭包学习过程解析

    新手入门js闭包学习过程解析

    闭包,其实是一种语言特性,它是指的是程序设计语言中,允许将函数看作对象,然后能像在对象中的操作般在函数中定义实例(局部)变量,而这些变量能在函数中保存到函数的实例对象销毁为止,其它代码块能通过某种方式获取这些实例(局部)变量的值并进行应用扩展. 我们的理解: 其实闭包就是一个函数,一个外部函数通过调用函数并return返回出内部函数,这里的内部函数就是一个闭包:此时在内部函数中是可以访问到外部函数的变量的: 要想理解闭包,首先我们要了解栈堆内存和作用域链:首先我们来讲解栈堆内存: 首先我们来看个

  • JS新手入门数组处理的实用方法汇总

    join()方法:将数组中所有元素通过指定分隔符连接成一个字符串 举例: myArr.join('-') // 用'-'符号拼接 concat()方法:将两个数组或多个数组合并成一个数组 举例: myArr.concat(arr1, arr2, ..., arrN) 注意:该方法不会改变现有的数组,所以可以和空数组合并实现复制旧数组,在操作新数组数据时不污染旧数组数据 sort() 方法:用于对数组的元素进行排序 如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是

  • js 闭包深入理解与实例分析

    本文实例讲述了js 闭包.分享给大家供大家参考,具体如下: 1.什么是闭包 定义:是指有权访问另一个函数作用域中的变量的函数 创建闭包:在一个函数内部创建另一个函数 基本特点 在返回的匿名函数中 可以调用外部函数的变量 如下例中所示 内部函数(匿名函数) 可以访问外部函数的变量num 形式如a[num] 原因是匿名函数作用域链中包括外部函数test1的作用域 闭包有权访问包含函数内部的所有变量 如下面的 外部函数定义变量d 在闭包中可以直接访问到d (var dd=d) function tes

  • JS闭包用法实例分析

    本文实例讲述了JS闭包用法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> // 第一,函数作为返回值 function fn(){ var m

  • JS使用eval解析JSON的注意事项分析

    本文较为详细的分析了JS使用eval解析JSON的注意事项.分享给大家供大家参考,具体如下: 在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的each方法来遍历 用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器 返回JSON形式的字符串的形式,对于利用JSONO

  • 通过示例彻底搞懂js闭包

    例1 function sayHello(name) { var text = 'Hello ' + name; var sayAlert = function() { console.log(text); } sayAlert(); } sayHello("Bob") // 输出"Hello Bob" 在sayHello()函数中定义并调用了sayAlert()函数:sayAlert()作为内层函数,可以访问外层函数sayHello()中的text变量. 例2 f

  • js使用eval解析json(js中使用json)

    先来说eval的用法,内容比较简单,熟悉的可以跳过eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要特别注意的是对象声明语法"{}"并不能返回一个值,需要用括号括起来才会返回值,简单示例如下: 复制代码 代码如下: var s1='"a" + 2'; //表达式var s2='{a:2}'; //语句alert(eval(s1)); //->'a2'alert(

  • JS闭包与延迟求值用法示例

    本文实例讲述了JS闭包与延迟求值用法.分享给大家供大家参考,具体如下: var bigFunctionA = function(){ var s = 0; for(var i=0;i<10000;i++){ s += i; } return s; } var bigFunctionB = function(){ var s = "a"; for(var i=0;i<100;i++){ s += i; } return s; } function RandomThrow(s1

  • Android Studio 新手入门教程（一）基本设置图解

    Android Studio 新手入门教程（一）基本设置图解

    ##写在前面: 作为一个刚半只脚踏入android开发的新手,在使用eclipse开发了两个自我感觉不甚成熟的商城类app之后,遇到了一些问题,总结为如下: 1.代码复用性 .findviewById,onclick事件等,一遍遍重复这类无聊的代码简直浪费生命,这个问题推荐通过依赖注入框架ButterKnife解决,直接一键生成布局中的所有控件,包括onclick点击事件,但是诸如行布局item里的控件,以及布局中include复用的布局要如何使用框架解决,这个有待后续再看. 另一个代码重复率很

  • JS闭包经典实例详解

    JS闭包经典实例详解

    本文实例讲述了JS闭包.分享给大家供大家参考,具体如下: 之前花了很多时间看书上对闭包的介绍,也看了很多人的写的关于闭包的博客,然后我就以为自己懂了. 结果,下午在一个QQ群里,有人问了这道经典的闭包问题,如下图: 我告诉他去看书上的闭包介绍.告诉他之后,我想我自己要不也写一下,反正花不了多少时间,结果花了好久怎么写也不对.............. 后来看了看书上的,然后自己总结了下,觉得这次应该懂了.下次还不理解我就可以去跳楼了............ -------------------

随机推荐