关注公众号, 设置为 '星标' ,更多精彩内容,第一时间获取
💎什么是闭包?
💎闭包的特性
💎闭包的优缺点
「缺点」
「一般函数执行完毕后,局部活动对象就被销毁,内存中仅仅保存全局作用域。」
❞💎关于 变量
变量的作用域
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
💎闭包注意
原创不易,素质三连
本文分享自微信公众号 - 前端自学社区(gh_ce69e7dba7b5)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。