如何理解闭包

最新推荐文章于 2025-01-10 15:08:58 发布

九州白

最新推荐文章于 2025-01-10 15:08:58 发布

阅读量223

点赞数

分类专栏： js 闭包文章标签：函数闭包

本文链接：https://blog.youkuaiyun.com/qq_38783557/article/details/119545646

版权

js 同时被 2 个专栏收录

7 篇文章

订阅专栏

闭包

1 篇文章

订阅专栏

本文深入探讨JavaScript中的预编译、作用域和作用域链概念，特别是详细阐述了闭包的含义及其在缓存器中的应用。通过实例解析了函数内部变量如何影响外部变量，并介绍了如何使用立即执行函数来规避闭包问题。文章旨在帮助读者更好地理解和掌握JavaScript高级特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、准备知识

1、预编译

函数在执行之前会有一个预编译环节，该环节用于检测是否存在语法错误，给对应的变量、函数赋值。
预编译环节：

创建AO对象（执行期上下文）
寻找声明的变量，值赋为undefined
寻找形参和实参，实参的值赋给形参
寻找函数声明，值变成对应的函数

2、作用域

个人理解：作用域是函数的执行环境

3、作用域链

函数创建的AO对象组成的集合

二、闭包

含义：内部函数保存到外部
应用场景：缓存器
如何规避：使用立即执行函数

函数执行之后会销毁对应的AO对象，而如果在销毁之前把函数保存出来，那么它对应的AO对象不会消失

三、实例

function foo(){
	var num = 100
	function add(){
		num ++
		console.log('num : ' + num);	
	}
	function decrease(){
		num --
		console.log('num : ' + num);
	}
	return [add,decrease]
}
var func = foo()
func[0]()//num : 101
func[1]()//num : 100

分析：
预编译过程

//foo:
GO:{
	foo : function foo(){}
}
AO:{
	num : 100
	add : function add(){}
	decrease : function decrease(){}
}

//add:
GO:{
	foo : function foo(){}
}
AO:{
	num : 100
	add : function add(){}
	decrease : function decrease(){}
}

//decrease:
GO:{
	foo : function foo(){}
}
AO:{
	num : 100
	add : function add(){}
	decrease : function decrease(){}
}

执行过程

//add先执行
num ++
//num = 101
foo 的 AO: num = 101
由于函数add和函数decrease都在函数foo的内部，而且自身的AO没有值，修改的实际上是foo的AO

//decrease后执行
num -- 
//num = 100
foo 的 AO: num = 100