JS中的闭包

最新推荐文章于 2024-09-25 09:44:21 发布

置顶画画的蓓蓓

最新推荐文章于 2024-09-25 09:44:21 发布

阅读量350

点赞数 1

分类专栏： javascript 作用域作用域链文章标签： javascript js

本文链接：https://blog.csdn.net/Amazing_rabbit/article/details/109249603

版权

javascript 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

作用域

2 篇文章 0 订阅

订阅专栏

作用域链

2 篇文章 0 订阅

订阅专栏

JS中的闭包

准备

1.JS中的垃圾回收机制

JavaScript解释器有自己的内存管理机制，可以自动对内存进行垃圾处理(garbage collection),当不再有任何引用指向一个对象，解释器就知道这个对象没用了，然后自动回收它所占用的资源。

2. 变量作用域

JavaScript中变量分为：全局变量和局部变量

2.1. JavaScript中在函数内部可以访问全局变量

var a=12;
function fun1(){
    console.log(a);
}
fun1();//12

2.2. JavaScript中在函数外部访问不到函数内部的局部变量

function fun2(){
    var a=5;
}
console.log(a);//Uncaught ReferenceError: a is not defined

2.3.JavaScript语言中有作用域链结构（chain scope）子对象会一级一级向上寻找所有父对象的变量，所以父对象的所有变量，对子对象都是可见的

3.闭包的使用场景

3.1.setTimeout

setTimeout的第一个参数是将要执行的函数，第二个参数是等待的时间，原生的setTimeout传递的第一个函数不能带参数，利用闭包可以实现传参

function fun(a){
    return function(){
        console.log(a)
    }
}
var f1=fun(5)
setTimeout(f1,1000);

3.2.利用闭包访问私有函数和私有变量

var fun=(function(){
        var a=100;
        function change(val){
            a+=val;
        }
        return{
            increment:function(){
                change(1);
            },
            decrement:function(){
                change(-1);
            },
        	value:function(){
                return a;
            }
        };
    })();
console.log(fun.value());//100
fun.increment()
console.log(fun.value());//101
fun.increment()
console.log(fun.value());//102

3.3. 利用闭包为节点循环绑定点击事件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	
	<p id="student">XXX</p>
	<p>姓名： <input type="text" id="name" name="name"></p>
	<p>年龄： <input type="text" id="age" name="age"></p>
	<p>身高： <input type="text" id="tall" name="tall"></p>

<script>
	function fill(smsg){
		document.getElementById('student').innerHTML = "学生信息";
	};

	function setMsg(){
		var info = [	
			{'id':'name','content':'易烊千玺'},
			{'id':'age','content':'18'},
            {'id':'tall','content':'180cm'},
		];
		for (var i = 0; i < info.length; i++) {
			var item = info[i];
			document.getElementById(item.id).onfocus = function(){
				fill(item.content)
			}
		}
	}
	setMsg()