js闭包的与非闭包的对比

最新推荐文章于 2023-07-05 21:31:02 发布

q1054261752

最新推荐文章于 2023-07-05 21:31:02 发布

阅读量2k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/q1054261752/article/details/79112649

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

项目目录结构

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

q1054261752

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
js闭包的与非闭包的对比

项目目录结构 cosure.js的代码如下： //闭包function test(){ var arr = []; for (var i = 0; i < 10; i++) { //闭包的写法就是一个圆括号里面包了一个匿名函 // 把需要保存的值，通过参数传递 ( function(j) { arr[j] = fun
复制链接

扫一扫