闭包原理及题型

闭包

函数被调用之后,会创建一个执行环境及作用域链.函数被执行完之后就会被释放掉.
闭包函数执行之后会保留当前活动变量在内部函数作用域链中,所以内部函数可以访问外部变量.

// 闭包
function test() {
	let b = "b";
	return () => b;
}
let t = test()
console.log(t())  // 访问内部变量

示例一

打印出的结果是多少?

function test() {
	var n = 4;
	function add() {
		n++;
		console.log(n);
	}
	return { n: n, add: add };
}
var result = test(); // 返加一个对象 
var result2 = test();  // 同上
result.add();  // 调用闭包函数,访问内部变量. 输出 5
result.add(); //  输出 6
console.log(result.n); // 4
result2.add(); // 5

示例二

打印出的结果是什么?

function test() {
	var arr = [];
	for (var i = 0; i < 10; i++) {
		arr[i] = function() {
			console.log(i); // 输出 10
		};
	}
	return arr;
}
var myArr = test();
for (var j = 0; j < 10; j++) {
	myArr[j]();
}

var声明的变量只有函数作用域与全局作用域,这循环中创建的i变量,会变量提升在函数顶部,所以函数打印i变量的值是10

示例三

打印出的结果是什么?

function test() {
	var arr = [];
	for (let i = 0; i < 10; i++) { // let
		arr[i] = function() {
			console.log(i);
		};
	}
	return arr;
}
let myArr = test();
for (let j = 0; j < 10; j++) {
	myArr[j](); // 输出 0 到 9
}

let 声明的变量具有块级作用域,每轮循环i变量,其时都是一个新的i变量,所以myArr数组中存储了不同的数字

示例四

打印结果是多少?

for (var i = 0; i < 10; i++) {
	(j => {
		setTimeout(function() {
			console.log(j);// 0 ~ 9
		}, 1000);
	})(i); // 立即执行函数 传参
}

这只是创建并执行了10个函数,每个函数都传递了个i变量给参数给j,j存储了变量值,然后做为打印输出了,所以结果为0~9

个人博客地址 : https://www.zhuamimi.cn
文章地址 : https://www.zhuamimi.cn/archives/208