闭包 [前端][Vue框架]

闭包

闭包 : 一个函数和它的周围状态的引用捆绑在一起的组合

这里我们举两个例子来理解什么是闭包:

1. 函数作为返回值:

<template>
	
</template>

<script>
	/*
	这个时候我们来演示闭包
	*/
   //①: 函数作为返回值
	function test(){
		const a = 1;
		return function(){
			console.log('a',a);
		}
	}
	const fn = test();
	const a = 2;
	
	/*
	  这个时候执行这个返回值回调的时候, 我们获得的a的值应该是1,这个时候因为我们的test函数内部并没有
    定义a变量, 但是直接使用了, 这个时候我们就会去上一级去找, 这个时候很显然上一级中定义的const a = 1
	*/
	fn();
</script>

<style>
</style>

• 那么此时显然就是函数和周围状态的引用捆绑在了一起, 这里就是函数中使用了上一级作用域中的常量a, 这就是一种闭包

2. 函数作为参数:

<template>
	
</template>

<script>
	/*
	这个时候我们来演示闭包
	*/
	//② : 函数作为参数
	function test2(fn2) {
		const b = 1;
		fn2();
	}
	
	const b = 2;
	
	function fn2(){
		console.log('b',b);
	}
	
	/*
	这个时候我们在fn2函数中使用了常量b, 但是在函数fn2中并没有定义常量b, 这个时候就会
	去这个函数的上一级作用域中找, 这个时候很明显这个fn2函数的上一级作用域中定义了const b = 2
	所以这里控制台输出的b的值应该是2
	*/
	test2(fn2);
</script>

<style>
</style>

• 此时显然也是函数和周围状态的引用捆绑到了一起, 这里就是函数中使用了上一级作用域中的常量b, 这就是一种闭包