JavaScript闭包详解

 更新时间:2021年11月22日 11:33:40   作者:CSP sy  
这篇文章主要为大家介绍了JavaScript闭包,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

1. 什么是闭包

闭包:函数本身和该函数声明时所处的环境状态的组合。
也就是说函数不在其定义的环境中被调用,也能访问定义时所处环境的变量。

所以使用闭包,就可以将数据与操作该数据的函数相关联。

举个例子:

function foo() {
	let a = 1;
	return function() {
		console.log(a);
	}
}
let foo1 = foo();
foo1() // 输出 1

这个就是一个闭包的例子,在 foo 中,由于 return 了一个函数,这个函数拥有涵盖 foo 内部作用域的闭包,也就是 a,使得 a 一直存活,不会在 foo 结束时被回收。

2. 闭包的作用

2.1) 记忆性

什么是闭包的记忆性

当闭包产生时,函数所处环境的状态会始终保持在内存中,不会在外层函数调用结束后,被垃圾回收机制回收。

举个例子:

function foo() {
    let a = 0;
    return function() {
        a ++;
        console.log(a);
    }
}
let foo1 = foo();
let foo2 = foo();
foo1();  // 1
foo2();  // 1
foo2();  // 2
foo1();  // 2

在这里插入图片描述

因为 a 属于闭包的一部分,所以当闭包产生时,a 所处的环境状态会保持在内存中,不会随外层函数调用结束后清除,所以随着 foo1的使用,a 都会在内存中的值加 1。
然后 foo1 和 foo2 产生的闭包是两个独立的闭包,它们互不影响。所以 foo2 第二次调用的时候,是在它自己第一次调用后结果上加 1.

2.2) 模拟私有变量

保证一个变量只能被进行指定操作。

举个例子

function foo() {
	let A = 0;
	return {
	    getA : function() {
	        return A;
	    }, 
	    add : function() {
	        A ++;
	    },
	    del : function() {
	        A --;
	    }
	}
}
let foo1 = foo();
console.log(foo1.getA()); // 0
foo1.add();
console.log(foo1.getA()); // 1
foo1.del();
console.log(foo1.getA()); // 0

在这里插入图片描述

通过闭包,保证了 A 只能被进行指定的 加一,减一操作。

3. 闭包的注意点

不能滥用闭包,否则可能会因为内存占用过多而造成网页的性能问题,甚至可能造成内存泄漏。

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • JavaScript实现拖拽简单效果

    JavaScript实现拖拽简单效果

    这篇文章主要为大家详细介绍了JavaScript实现拖拽简单效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • js如何获取对象在数组中的index

    js如何获取对象在数组中的index

    这篇文章主要介绍了js如何获取对象在数组中的index,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 微信小程序开发之组件设计规范

    微信小程序开发之组件设计规范

    这篇文章主要给大家介绍了关于微信小程序开发之组件设计规范的相关资料,对刚入门学习微信小程序的同学们还是挺有帮助的,需要的朋友可以参考下
    2021-05-05
  • 判断JS对象是否拥有某种属性的两种方式

    判断JS对象是否拥有某种属性的两种方式

    这篇文章主要介绍了判断JS对象是否拥有某种属性的两种方式,有需要的朋友可以参考一下
    2013-12-12
  • JavaScript 异步调用框架 (Part 1 - 问题 & 场景)

    JavaScript 异步调用框架 (Part 1 - 问题 & 场景)

    在Ajax应用中,调用XMLHttpRequest是很常见的情况。特别是以客户端为中心的Ajax应用,各种需要从服务器端获取数据的操作都通过XHR异步调用完成。
    2009-08-08
  • 浅析Virtual DOM的概念与其在现代前端框架中的实践

    浅析Virtual DOM的概念与其在现代前端框架中的实践

    这篇文章将深入探讨Virtual DOM(虚拟DOM)的概念,分析其对前端开发的革新影响,并以此展示前端技术的深度和魅力,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • Nuxt.js实现校验访问浏览器类型的中间件

    Nuxt.js实现校验访问浏览器类型的中间件

    Nuxt.js 就是一个Vue的服务端渲染框架,和React的服务端渲染框架类似。这篇文章主要介绍了Nuxt.js实现校验访问浏览器类型的中间件,需要的朋友可以参考下
    2018-08-08
  • node express使用HTML模板的方法示例

    node express使用HTML模板的方法示例

    这篇文章主要介绍了node express使用HTML模板的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 深入学习JavaScript对象

    深入学习JavaScript对象

    今天小编就和大家深入学习JavaScript对象,感兴趣的小伙伴们可以参考一下,大家一起学习。
    2015-10-10
  • JavaScript实现沿五角星形线摆动的小圆实例详解

    JavaScript实现沿五角星形线摆动的小圆实例详解

    这篇文章主要介绍了JavaScript实现沿五角星形线摆动的小圆实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07

最新评论