闭包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{display: none;}
</style>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<div style="display: block">一</div>
<div>二</div>
<div>三</div>
<script>
var btn = document.getElementsByTagName('button')
var div = document.getElementsByTagName('div')
var i = 0
for (; i < btn.length; i++) {
(function (i) {
btn[i].onclick = function () {
console.log(i)
for(var j=0;j<btn.length;j++){
div[j].style.display = 'none'
}
div[i].style.display = 'block'
}
})(i)
}
</script>
</body>
</html>
闭包面试题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//结果是啥 怎么解决
// var arr = [];
// for (var i = 0; i < 10; i++) {
// (function(i){
// arr.push(function () {
// console.log(i);
// });
// })(i)
// }
// arr[7]()
//运行结果
// for(var j = 0;j<5;j++){
// setTimeout(function () {
// console.log(new Date(),j);
// },1000);
// }
// console.log(Date(),j);
function fun(n, o) { // n=0 o=undefined
console.log(o);
return {
fun: function (m) { // m = 1
return fun(m, n); // m = 1 n=0
}
};
}
var a = fun(0); //undefined
// a = {
// fun:function (m) {
// return fun(m, n);
// }
// }
// console.log(a.fun())
// a.fun(1) = fun(m, n)
a.fun(1); // 0
a.fun(2); // 0
a.fun(3); // 0
</script>
</body>
</html>