一文了解JavaScript闭包函数

 更新时间:2021年11月09日 15:25:08   作者:星河梦~  
闭包是js的一个难点也是它的一个特色,是我们必须掌握的js高级特性,下面这篇文章主要给大家介绍了关于JavaScript闭包函数的相关资料,需要的朋友可以参考下

变量作用域

要理解JavaScript闭包,就要先理解JavaScript的变量作用域。

变量的作用域有两种:全局的和局部的(全局变量和局部变量)

JavaScript中,在函数内部可以直接读取到全局变量。

var n=10
function fn(){
	alert(n)
}
fn()      //10

而在函数外部无法读取到函数内部的变量。

function fn(){
	var n=10;
}
fn()
alert(n)   //n is not defined    函数外部无法读取到函数内部的n

注意:函数内部使用var声明变量的时候,这个变量是局部变量,如果不使用var,那么这个变量就是一个全局变量。

例如:

function fn(){
	n=10;
}
fn()
alert(n)   //10

另外,函数的参数也是局部性的,只在函数内部起作用。

在正常情况下,我们是无法得到函数内部的局部变量的,只有变通方法才可以——在函数内部再声明一个函数。

function f1(){
	var n=10;
	function f2(){
		alert(n)
	}
}

f2函数可以得到f1函数内的所有局部变量,但是f1函数却无法得到f2函数内部的局部变量——JavaScript语言特有的“链式作用域”结构。(即子对象会一级一级地向上寻找所有父对象的变量),所以,父对象的所有变量,对于子对象都是可见的。

f2函数可以获取到父级函数f1的局部变量,那么如果把f2()函数返回,在函数f1外部就可以访问到f1()函数内部的变量了。

例如:

function f1(){
	var n=10;
	function f2(){
		alert(n)
	}
	return f2()
}
f1()           //页面弹出10

例子中的f2()函数就是一个闭包函数。

闭包的概念

由于作用域原因,我们无法在函数外访问函数里面定义的变量,但有事我们又有这个需求,因此就出现了闭包的概念。

闭包是指有权访问另一个函数作用域中的变量的函数。

在上面的例子中,内部函数f2就是一个闭包函数。

在本质上,闭包就是将函数内部和函数外部连接起来的桥梁。

闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。

闭包的用途

(1)可以读取父级作用域函数内部的变量;

(2)让变量的值始终保存在内存中(让局部变量变成全局变量),不被垃圾回收机制清除。

闭包的缺点

由于闭包会使函数中的变量都保存到内存中,垃圾回收机制不清理,内存消耗很大,所以不能滥用闭包,否则可能导致内存泄漏。

补充:

什么是内存泄漏?

程序的运行都是需要内存的。只要对内存提出要求,操作系统必须供给内存。
当应用程序中的一些代码变量不再需要用到内存时,但是没有被操作系统或者可用内存池回收,就说明它发生了内存泄漏。

即,当已经不再需要某块内存时,这块内存还存在着——内存泄漏

解决闭包引起的内存泄漏的问题:

在退出函数之前,将不使用的局部变量全部删除。

例如:将当前变量的值设置为‘null',当垃圾回收机制启动时,会自动对这些值为‘null'的变量回收。

最后总结一下闭包的好处与坏处

好处

①保护函数内的变量安全 ,实现封装,防止变量流入其他环境发生命名冲突

②在内存中维持一个变量,可以做缓存(但使用多了同时也是一项缺点,消耗内存)

③匿名自执行函数可以减少内存消耗

坏处

①其中一点上面已经有体现了,就是被引用的私有变量不能被销毁,增大了内存消耗,造成内存泄漏,解决方法是可以在使用完变量后手动为它赋值为null;

②其次由于闭包涉及跨域访问,所以会导致性能损失,我们可以通过把跨作用域变量存储在局部变量中,然后直接访问局部变量,来减轻对执行速度的影响

总结

到此这篇关于JavaScript闭包函数的文章就介绍到这了,更多相关JavaScript闭包函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js 表格排序(编辑+拖拽+缩放)

    js 表格排序(编辑+拖拽+缩放)

    js 表格排序(编辑+拖拽+缩放)实现代码,需要的朋友可以参考下。
    2010-05-05
  • 新手如何快速理解js异步编程

    新手如何快速理解js异步编程

    这篇文章主要介绍了新手如何快速理解js异步编程,异步编程从早期的 callback、事件发布\订阅模式到 ES6 的 Promise、Generator 在到 ES2017 中 async,看似风格迥异,但是还是有一条暗线将它们串联在一起的,,需要的朋友可以参考下
    2019-06-06
  • JavaScript实现的简单烟花特效代码

    JavaScript实现的简单烟花特效代码

    这篇文章主要介绍了JavaScript实现的简单烟花特效代码,涉及JavaScript数学运算及页面元素基于定时函数运动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • JavaScript Base64 作为文件上传的实例代码解析

    JavaScript Base64 作为文件上传的实例代码解析

    这篇文章主要介绍了JavaScript Base64 作为文件上传的实例代码解析,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • 大白话讲解JavaScript的Promise

    大白话讲解JavaScript的Promise

    这篇文章主要介绍了大白话讲解JavaScript的Promise,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 通过onmouseover选项卡实现img图片的变化

    通过onmouseover选项卡实现img图片的变化

    这篇文章主要介绍了通过onmouseover选项卡实现img图片的变化,需要的朋友可以参考下
    2014-02-02
  • JS经典正则表达式笔试题汇总

    JS经典正则表达式笔试题汇总

    这篇文章主要介绍了JS经典正则表达式笔试题,结合实例形式汇总分析了javascript正则表达式的经典使用技巧,需要的朋友可以参考下
    2016-12-12
  • javascript中的event loop事件循环详解

    javascript中的event loop事件循环详解

    这篇文章主要给大家介绍了关于javascript中event loop事件循环的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • IE DOM实现存在的部分问题及解决方法

    IE DOM实现存在的部分问题及解决方法

    IE DOM实现存在的部分问题及解决方法
    2009-07-07
  • JavaScript详解类数组与可迭代对象的实现原理

    JavaScript详解类数组与可迭代对象的实现原理

    这篇文章主要介绍了JavaScript详解类数组与可迭代对象的实现原理,ES6中引入了迭代器与可迭代对象的概念,并且提供了对可迭代对象的相关支持,如for...of循环,Map(iterable)构造器,展开语法...等。让我们对数组外的数据集合的遍历操作也得到极大简化
    2022-06-06

最新评论