编程语言
首页 > 编程语言> > JavaScript 初识闭包closure及总结

JavaScript 初识闭包closure及总结

作者:互联网

JavaScript 闭包

近期学习了JavaScript闭包,查阅了一些资料,对其作一定的总结以供回顾,日后有新的理解会保持增添更新。

JavaScript闭包的作用

先作开头总结,JavaScript闭包主要有两大作用:

  1. 读取函数内部的局部变量
  2. 让函数内部的局部变量保存在内存中

关于第一点,“读取函数内部的局部变量”,先了解闭包的概念:

闭包:是能够访问读取其它函数内部局部变量的函数。

也就是说,闭包是个函数,而这个函数的特点是能用来读取其他函数内部的局部变量,也就是闭包的第一点作用。

JavaScript闭包的必要性

为什么需要一个有如此特点的函数去访问其它函数内部的局部变量呢?

因为,仅靠单纯的方法确实没法访问函数内部的局部变量。

相关的可以去查看一下JavaScript的链式作用域

例一:

function test1(){
	var number = 100;
}
test1();
console.log(number);    // error

简单来说,外层找不到里层的变量,即外部无法访问test1函数内部的局部变量number。

例二:

var number = 100;
function test1(){
	console.log(number);
}
test1();

里层可以一层一层向外层查找变量

例一发现,外部无法访问函数内部的局部变量。如果想在外部访问函数内部的局部变量,那就需要靠闭包来实现。

JavaScript闭包的实现 —— 返回值

function test1(){
	var number = 100;
	function test2(){
		// test2可以访问到test1中的变量
		return number;
	}
	// 把test2返回到外面,外面就可以访问里面了
	return test2;
}
var test = test1();
var result = test();
console.log(result);

函数test2在test1的内部,根据链式作用域,test2是可以访问test1的局部变量的,而外面访问不到test1里面。那么只要把test2函数作返回值返回到外部,那么外部就可以访问test1内部的局部变量了。

回顾一下闭包的定义和作用:

闭包是一个函数,一个用于读取访问其它函数内部局部变量的函数

也就是说,定义在test1内部的test2函数,就是闭包函数。

test2函数使得外部环境能够访问test1函数内部的局部变量number。

闭包还有第二点作用:

让函数内部的局部变量保存在内存中。

闭包的第二点作用

还是这段代码:

function test1(){
	var number = 100;
	function test2(){
		// test2可以访问到test1中的变量
		return number;
	}
	// 把test2返回到外面,外面就可以访问里面了
	return test2;
}
var test = test1();
var result = test();
console.log(result);

其中:

var test = test1();

即:test1()返回test2,test2被赋给了全局变量test。
那么,test2函数就始终存在全局环境,保存在内存中;而test2的存在依赖于test1,则test1及test1中的变量也保存在内存中。

验证了第二点作用:
闭包能使函数内部的局部变量始终保存在内存中。

JavaScript闭包的注意事项

闭包的第二点作用,即“能使函数内部的局部变量始终保存在内存中”,实际上是有一定缺陷的

因为总是把局部变量保存在内存,内存消耗很大,影响性能。在IE中还可能造成内存泄漏。

解决:

函数执行完时,把不使用的变量删除,这就不会把局部变量都保存在内存中而影响性能了。

JavaScript闭包的应用

总结:

JavaScript闭包的定义:

  1. 闭包是一个能访问其它函数内部局部变量的函数

JavaScript闭包的作用:

  1. 访问其它函数内部的局部变量
  2. 将函数内部的局部变量保存在内存中

JavaScript闭包的注意事项

  1. 若不在函数执行完毕退出后删除不使用的变量,大量函数内部的局部变量由于闭包的使用而保存在内存中,会导致内存消耗很大,影响性能,在IE中有可能造成内存泄漏。(解决方式是函数退出后删除不使用的变量

标签:闭包,closure,局部变量,函数,JavaScript,test2,test1
来源: https://blog.csdn.net/qq_43263320/article/details/117898675