版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/q1054261752/article/details/79112649
项目目录结构
cosure.js的代码如下:
//闭包
function test(){
var arr = [];
for (var i = 0; i < 10; i++) {
//闭包的写法就是 一个圆括号里面包了一个匿名函
// 把需要保存的值,通过参数传递
(
function(j)
{
arr[j] = function(){
document.write(j + " ");
}
}(i)
)
}
return arr;
}
var myArr = test();
for (var i = 0; i < 10; i++) {
myArr[i]();
}
闭包的代码
cosure.html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/cosure.js"></script>
</head>
<body>
</body>
</html>
运行的效果如下:
---------------------------------分割线--------------------------------------
非闭包的代码
uncosure.js的代码如下:
//非闭包的情况
function test(){
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = function(){
document.write(i + " ");
}
}
return arr;
}
var myArr = test();
for (var i = 0; i < 10; i++) {
myArr[i]();
}
uncosure.html的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/uncosure.js"></script>
</head>
<body>
</body>
</html>
运行如下:
闭包与非闭包,闭包实现循环给两个按钮绑定事件,并alert当选for循环的index值(相关代码array.js和array.html)
界面如下:
1.闭包btn
array.js 如下:
function bindBtn() {
var btnArr = new Array();
for (var i = 1; i <= 2; i++) {
btnArr[i] = document.getElementById("btn" + i);
(
function(obj,index){ //闭包函数绑定事件
obj.onclick = function(){
alert("百度经验" + index );
}
}(btnArr[i],i)
)
}
// alert(btnArr);
console.log(btnArr, "obj");
console.log(btnArr.constructor, "constructor"); //ƒ Array() { [native code] }
console.log(btnArr.prototype, "prototype");
}
window.onload = function() {
unbindBtn();
//bindBtn();
}
array.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<script src="js/array.js"></script>
</body>
</html>
点击 btn1
点击 btn2
2.非闭包btn
array.html如上。
array.js代码如下:
function bindBtn() {
var btnArr = new Array();
for (var i = 1; i <= 2; i++) {
btnArr[i] = document.getElementById("btn" + i);
(
function(obj,index){ //闭包函数绑定事件
obj.onclick = function(){
alert("百度经验" + index );
}
}(btnArr[i],i)
)
}
// alert(btnArr);
console.log(btnArr, "obj");
console.log(btnArr.constructor, "constructor"); //ƒ Array() { [native code] }
console.log(btnArr.prototype, "prototype");
}
window.onload = function() {
// unbindBtn();
bindBtn();
}
点击 btn1
点击 btn2