? 深入剖析 JavaScript 闭包
?导读目录
?什么是闭包？
?闭包的特性
?闭包的优缺点
缺点
一般函数执行完毕后，局部活动对象就被销毁，内存中仅仅保存全局作用域。
?关于 变量
变量的作用域
var a = '闭包';
function getValue(){
var a = '函数局部作用域'
console.log(a)
}
getValue() //函数局部作用域
函数作用域
function getData() {
var str = "闭包练习";
var fun = function(){
var innerStr = '内部变量'
}
console.log(innerStr)
//innerStr is not defined 函数外层是访问不到 函数内层变量的
}
getData()
变量的生存周期
栗子 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script>
var nodes = document.getElementsByTagName('div')
for (var i = 0; i < nodes.length; i++) {
nodes[i].onclick = function () {
alert(i)
}
}
</script>
</body>
</html>
# 闭包解决办法
<script>
var nodes = document.getElementsByTagName('div')
for (var i = 0; i < nodes.length; i++) {
(function(i) {
nodes[i].onclick = function () {
alert(i)
}
})(i)
}
</script>
栗子 2
var num = 1;
function getValue(){
var num = 0;
return function(){
num++
console.log(num)
}
}
var s = getValue()
s()
s()
// 1 2
解答
注意
如果没有使用同样引用的话，那么多次调用，都是同样的值，因为没有记录引用值。
函数在执行完毕，num = 1 被销毁掉了，初始为 0
var num = 1;
function getValue(){
var num = 0;
return function(){
num++
console.log(num)
}
}
getValue()()
getValue()()
// 0 0
?闭包的作用
栗子
function f2(){
let num = 0;
addNum = function(){
num++
}
function f3(){
console.log(num)
}
return f3
}
var a = f2()
a()
addNum()
a()
// 0 1
?闭包注意
结语
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！