javascript中闭包概念与用法深入理解

 更新时间:2016年12月15日 11:40:54   作者:小小小小小亮  
这篇文章主要介绍了javascript中闭包概念与用法,结合实例形式深入分析了javascript中闭包的概念、使用方法与相关注意事项,需要的朋友可以参考下

本文实例分析了javascript中闭包概念与用法。分享给大家供大家参考,具体如下:

1.问题的引出,什么时候会遇到闭包?

首先因为JS是没有块状作用域的,但是有函数作用域即函数作为了局部变量之间的界限,不同函数内的局部变量具有独立性,

因为JS没有块状作用域,笔者初学JS时,在事件的监听时,因为不理解JS中局部变量的作用域,犯过不少错误!

(1)JS中的变量作用域

for(var i=0;i<9;i++)
{
}
alert(i) //输出9

我们发现,虽然变量i是块状区域for()内的一个局部变量,但是我们在块级作用域for()外,依然可以得到变量i

(2)JS中的函数作用域

function abc(){
 var a=1;
}
abc();
alert(a);// 会报错,a is not defined

我们发现,在函数外调用函数后,在函数外是无法取到函数里的变量

总结:通过(1),(2),我们加深了对JS中,没有块级作用域只有函数作用域的理解!

举例:如果现在例1:

var a=1
function abc(){
 var a=2;
}
abc();
alert(a) // a=1

特别注意如果例2:

var a=1
function abc(){
a=2;
alert(a);
}
abc();//a=2

对比例1,不同之处在于例2,中 是“a=2"而不是”var a=2“

区别在于如果是var a,则表示在函数中定义变量a,如果是没有变量声明,如果直接a,则表示在全局变量中定义变量a;

2.如果引用函数内部的变量?

由1可知,JS中只存在函数作用域,那么我们如何才能在拿到函数中定义的变量呢?

根据JS的语法规则:内部函数(或者内部对象)中,可以访问外部函数中的变量。

什么意思呢?举例说明例1:

function abc(){
 var a=1;
 !function(){
 alert(a)
} ()
} //此时不会报错,a=1

再举一个例子(内部对象的例子)例2:

var o={
 a=1,
 myfun:function(){
 return this.a
}
}

则alert(o.myfun())得到的值为1,现在我们大概了解了如何访问函数(或者对象,其实函数的本身也是对象)中的变量!

3.什么是闭包?

我的理解就定义在一个函数内部的函数!

闭包是函数内部与外部之间的桥梁!

即内部函数在定义它的外部使用时,就创建了一个闭包!

我们知道,一般情况下,当函数被调用完,内存会被释放,但是应用于函数闭包比如

function abc1(){
 var a=1;
function abc2(){
 a++;
}
return abc2()
}

当我们调用abc1()函数后,因为abc1函数的中又调用了abc2()函数,因此函数abc1()中的变量在子函数中被调用,所以在父函数abc1()调用结束后

变量a的内存空间并不会被释放!

为什么GC机制无法回收abc1()函数中的变量a,  因为首先我们在全局中调用了函数abc1(),我们设全局对象为c,abc1()对象为b,同时我们在对象b

即函数abc1()中又调用了函数abc2(),设abc2(0为a。

再次理解这种关系    c中调用了b,b中又调用了a,JS中规定当a,b对象两两互相引用,并且a,b中又有一个被a,b函数之外的对象c引用时,GC机制不执行垃圾回收(变量清空)!

由此我们引出了闭包的重要作用:

如果内部函数在其外部被调用,则会产生闭包,闭包用于保存某些变量的值,不会被垃圾回收机制回收!

4.闭包的缺点

因为使用闭包后,某些变量会在函数调用之后持续的保持在内存中,因此滥用闭包会导致内存泄漏!

5.扩展应用,加深对于闭包的理解!

var o={
 a:1;
myfunc:function(){
return function(){
 return this.a;
}
}
alert(o.myfunc()()); // a is not defined
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • 原生JS实现日历组件的示例代码

    原生JS实现日历组件的示例代码

    本篇文章主要介绍了原生JS实现日历组件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 爬虫进阶-JS自动渲染之Scrapy_splash组件的使用

    爬虫进阶-JS自动渲染之Scrapy_splash组件的使用

    Splash是一个Javascript渲染服务。它是一个实现了HTTP API的轻量级浏览器,Splash是用Python和Lua语言实现的,基于Twisted和QT等模块构建,今天重点给大家介绍js Scrapy_splash组件使用教程,一起看看吧
    2021-09-09
  • wap手机图片滑动切换特效无css3元素js脚本编写

    wap手机图片滑动切换特效无css3元素js脚本编写

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行,本例无css3元素js脚本编写,需要的朋友可以参考下
    2014-07-07
  • 每天一篇javascript学习小结(Boolean对象)

    每天一篇javascript学习小结(Boolean对象)

    这篇文章主要介绍了javascript中的Boolean对象知识点,对Boolean对象的基本使用方法进行解释,一段很详细的代码介绍,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • ECharts事件处理与旭日图实现

    ECharts事件处理与旭日图实现

    这篇文章介绍了ECharts事件处理与实现旭日图的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 风吟的小型JavaScirpt库 (FY.JS).

    风吟的小型JavaScirpt库 (FY.JS).

    此库非常的迷你压缩之后只有1.54KB.但是却有类似jquery的语法有COOKIE操作还有DOM以及AJAX跟绑定事件函数.
    2010-03-03
  • 微信小程序实现获取手机号60s倒计时

    微信小程序实现获取手机号60s倒计时

    这篇文章主要为大家详细介绍了微信小程序实现获取手机号60s倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 基于canvas粒子系统的构建详解

    基于canvas粒子系统的构建详解

    下面小编就为大家带来一篇基于canvas粒子系统的构建详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JavaScript实现平滑滚动效果

    JavaScript实现平滑滚动效果

    页面平滑滚动是网页一种常见的效果,平滑滚动的原理其实很简单,无非就是让页面一种肉眼可见的速度从当前位置滚动到指定位置,那如何用原生的JS实现这也效果呢?本文给大家介绍了JavaScript实现平滑滚动效果,需要的朋友可以参考下
    2024-06-06
  • date.parse在IE和FF中的区别

    date.parse在IE和FF中的区别

    这个方法是很常用的,比如在验证输入日期是否存在时,可以使用它,如果是一个不存在的日期,则其返回值将是NaN,另外如果要比较两个日期的先后,或是计算两个日期相差的天数 ,都可以用到。
    2010-07-07

最新评论