一文了解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闭包函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript原型与原型链深入探究使用方法

    JavaScript原型与原型链深入探究使用方法

    js中的原型与原型链应该是老生常谈的话题了,在前端面试中基本都是必问的一个问题,但是很多人还是稀里糊涂的,只知道其表层含义。本文将带大家深入了解JavaScript中的原型与原型链,感兴趣的可以学习一下
    2022-11-11
  • javascript 限制输入脚本大全

    javascript 限制输入脚本大全

    javascript限制输入脚本大全 ,方便网页设计的朋友经常能用的到,建议收藏下。代码有点慢,大家慢慢看啊。
    2009-11-11
  • JavaScript的Module模式编程深入分析

    JavaScript的Module模式编程深入分析

    Module模式是常见的JavaScript编程模式,一般来说这种模式是很好理解的,但是依然有一些高级的用法没有得到太多的注意。在这篇文章中我会提到Module模式的基础知识和一些真正重要的话题,包括一个可能是我原创的
    2013-08-08
  • JavaScript中Array实例方法filter的实现原理

    JavaScript中Array实例方法filter的实现原理

    filter() 方法创建一个新数组,其中包含通过所提供函数实现的测试的所有元素,本文将给大家介绍JavaScript中Array实例方法filter的实现原理,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2024-03-03
  • 调试Javascript代码(浏览器F12及VS中debugger关键字)

    调试Javascript代码(浏览器F12及VS中debugger关键字)

    目前,常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能下面我就介绍如何在浏览器/VS中调试我们的JS代码,感兴趣的你可不要走开啊,希望本文对你有所帮助
    2013-01-01
  • 一文详解JavaScript的继承机制

    一文详解JavaScript的继承机制

    在JavaScript中,继承允许一个对象从另一个对象继承属性和方法,本文将详细介绍JavaScript中的继承机制,包括原型链、构造函数、原型对象以及几种实现继承的方法,需要的朋友可以参考下
    2024-04-04
  • JavaScript获取FCK编辑器信息的具体方法

    JavaScript获取FCK编辑器信息的具体方法

    这篇文章介绍了JavaScript获取FCK编辑器信息的实例代码,有需要的朋友可以参考一下
    2013-07-07
  • JavaScript使用shift方法移除素组第一个元素实例分析

    JavaScript使用shift方法移除素组第一个元素实例分析

    这篇文章主要介绍了JavaScript使用shift方法移除素组第一个元素的用法,实例分析了javascript中shift方法的使用技巧,需要的朋友可以参考下
    2015-04-04
  • js前端上传文件缩略图技巧示例详解

    js前端上传文件缩略图技巧示例详解

    这篇文章主要为大家介绍了js前端上传文件缩略图技巧示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • JS组件Bootstrap Table使用实例分享

    JS组件Bootstrap Table使用实例分享

    这篇文章主要为大家详细介绍了JS组件Bootstrap Table分页使用方法,具有一定的实用性,感兴趣的小伙伴们可以参考一下
    2016-05-05

最新评论