javaScript中闭包的案例

偏执的太偏执、 2022-11-29 11:35 184阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

**以下是闭包的案例代码**

//测试闭包
    document.getElementById('button1').onclick = function() {
    	var inputNodes = document.getElementsByTagName('input');
    	var count = inputNodes.length;
    	for (var index = 0; index < count; index++) {
    		var inputNode = inputNodes[index];
    		console.log(inputNode, inputNode.type);
    		console.log('*******************');
    		if (inputNode.type == 'text') {
    			inputNode.onclick = (function(parameter) {
    // 				alert('--' + index);
    // 				alert('==' + parameter);
    				return fn9(parameter);
    			})(index);
    		}
    	}
    };
    
    //测试闭包
    function fn9(param){
    	var f = function fn10() {
    		alert(param);
    	}
    	return f;
    }

**一些其他的案例代码**

function fn1(){
    	
    	console.log(eval("{}")); //undefined
    	console.log(eval('{}')); //undefined
    	console.log(eval("({})")); //Object {  }
    	console.log(eval('({})')); //Object {  }
    	console.log(eval("(" + "{}" + ")")); //Object {  }
    	console.log(eval('(' + '{}' + ')')); //Object {  }
    // 	console.log(eval("(" + "{[]}" + ")")); //报错SyntaxError: expected expression, got ']'
    // 	console.log(eval('(' + '{[]}' + ')')); //报错SyntaxError: expected expression, got ']'
    	console.log(eval({})); //Object {  }
    	console.log(eval({name:"jack"})); //Object { name: "jack" }
    	console.log(eval('{name:"tom"}')); //tom
    	console.log(eval("{name:'jerry'}")); //jerry
    	var test = '{[], [], []}';
    	console.log(eval(test)); //Array []
    // 	console.log(eval('(' + test + ')')); //报错SyntaxError: expected expression, got ']'
    // 	console.log(eval("(" + test + ")")); //报错SyntaxError: expected expression, got ']'
    
    	var test2 = '{}';
    	console.log(eval(test2)); //undefined
    	console.log(eval('(' + test2 + ')')); //Object {  }
    	console.log(eval("(" + test2 + ")")); //Object {  }
    	
    	var test6 = {};
    	console.log(eval(test6)); //Object {  }
    // 	console.log(eval('(' + test6 + ')')); //报错SyntaxError: missing ] after element list
    // 	console.log(eval("(" + test6 + ")")); //报错SyntaxError: missing ] after element list
    	
    	var test3 = '[{}, {}]';
    	console.log(eval(test3)); //Array [ {}, {} ]
    	console.log(eval('(' + test3 + ')')); //Array [ {}, {} ]
    	console.log(eval("(" + test3 + ")")); //Array [ {}, {} ]
    	
    	var test8 = {};
    	//true false
    	console.log(test8 instanceof Object, test8 instanceof Array);
    	console.log(typeof test8); //object
    	
    	var test9 = [];
    	//true true
    	console.log(test9 instanceof Object, test9 instanceof Array);
    	console.log(typeof test9); //object
    	
    }
    
    fn1();
    
    function fn2(){
    	return 'hello';
    }
    
    var a = fn2();
    console.log(a); //hello
    
    function fn3(){
    	return fn2();
    }
    
    var b = fn3();
    console.log(b); //hello
    
    function fn4(){
    	var v = function fn5(){
    		return '江西省赣州市于都县';
    	}
    	return v;
    }
    
    var result = fn4();
    console.log(result); //function fn5()
    console.log(result()); //江西省赣州市于都县
    
    /*
    打印出
    ******我是fn7()，我执行了******
    江西于都县666
    */
    console.log((function fn6(){
    	var f = function fn7(){
    		console.log('******我是fn7()，我执行了******');
    		return '江西于都县666';
    	}
    	return f;
    })()());
    
    
    //测试闭包
    document.getElementById('button1').onclick = function() {
    	var inputNodes = document.getElementsByTagName('input');
    	var count = inputNodes.length;
    	for (var index = 0; index < count; index++) {
    		var inputNode = inputNodes[index];
    		console.log(inputNode, inputNode.type);
    		console.log('*******************');
    		if (inputNode.type == 'text') {
    			inputNode.onclick = (function(parameter) {
    // 				alert('--' + index);
    // 				alert('==' + parameter);
    				return fn9(parameter);
    			})(index);
    		}
    	}
    };
    
    //测试闭包
    function fn9(param){
    	var f = function fn10() {
    		alert(param);
    	}
    	return f;
    }
    
    function fn8() {
    console.log('(' + null + ')'); //(null)
    console.log(typeof ('(' + null + ')')); //string
    console.log('(' + 666 + ')'); //(666)
    // console.log('(' + abc + ')'); //ReferenceError: abc is not defined
    console.log('(' + 'null' + ')'); //(null)
    console.log(typeof ('(' + 'null' + ')')); //string
    console.log(eval('(' + null + ')')); //null
    console.log(eval('(null)')); //null
    // console.log(eval('(' + '' + ')')); //SyntaxError: expected expression, got ')'
    console.log(eval('(' + undefined + ')')); //undefined
    // console.log(eval('(' + ')')); //SyntaxError: expected expression, got ')'
    // console.log(eval('()')); //SyntaxError: expected expression, got ')'
    }
    
    fn8();

**完！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221124/5918b25fff3a4c31a4600653ccc6e117.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221124/ae9a8e6694e146e5ad8501522e6ba246.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: /images/20221124/bb4d7d425313424fb3225bd2f9d166ad.png

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript闭包面试经典案例

案例一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

谁借莪１个温暖的怀抱￠/ 2022年12月12日 13:41/ 0 赞/ 164 阅读

相关 javaScript中闭包的案例

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUw

偏执的太偏执、/ 2022年11月29日 11:35/ 0 赞/ 185 阅读

相关 javascript中的闭包

什么是闭包闭包（closure）指有权访问另一个函数作用域中变量的函数。 ----- JavaScript 高级程序设计简单理解就是，一个作用域可以访问另外一

绝地灬酷狼/ 2022年11月14日 10:28/ 0 赞/ 207 阅读

相关 Javascript中的闭包

闭包指的是那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现。比如下面实现的在对象数组中按照对象某个属性排序的方法： function compariso

今天药忘吃喽~/ 2022年11月10日 14:15/ 0 赞/ 177 阅读

相关 Javascript中的闭包

说完原型后, 我们紧接着来理解什么是闭包. 闭包虽不是JS的特色功能, 但要理解还真要费那么点工夫. 在理解闭包之前, 首先要清楚JS中的作用域只有2种: 全局作

痛定思痛。/ 2022年07月13日 07:49/ 0 赞/ 179 阅读

相关 JavaScript 中的闭包

一、什么是闭包闭包是一个函数，它有权访问另一个函数作用域中的变量。 JavaScript中，函数内部定义的变量，都可以看作私有变量，函数外部无法直接访问。闭包就是有权访问

落日映苍穹つ/ 2022年06月11日 07:43/ 0 赞/ 206 阅读

相关 JavaScript中闭包的使用

闭包（closure）是javascript的一大难点，也是它的特色。很多高级应用都要依靠闭包来实现。一、变量作用域要理解闭包，首先要理解javascript的特殊的变

浅浅的花香味﹌/ 2022年05月14日 06:14/ 0 赞/ 238 阅读

相关 javascript中的闭包

原文链接地址：[https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures?redirectlocal

快来打我*/ 2022年02月28日 03:38/ 0 赞/ 248 阅读

相关 JavaScript中的闭包是什么？闭包的作用？

1.什么是闭包呢？能够读取其他函数内部变量的函数，在js中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成"定义在一个函数内部的函数"，本质上就是将函

墨蓝/ 2021年09月01日 03:14/ 0 赞/ 472 阅读

相关 javascript中的闭包中的闭包

javascript中的闭包中的闭包写在前面 JavaScript 一个近乎神话对于JavaScript有使用经验但却从未真正理解闭包概念的人来说，理解闭包可以说是某...

朱雀/ 2020年06月21日 15:22/ 0 赞/ 888 阅读