闭包的理解

努力的琦琦

于 2020-09-02 23:24:21 发布

阅读量192

点赞数 1

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_48210599/article/details/108372646

版权

闭包

其实我们可以这样理解，首先闭包是一个匿名函数，现在我们将它赋予了一个变量，那么他就有名字了，那么他每次执行完以后就有地方存了。但是每个变量存的地方又不一样，他们相互不关联，所以他们就是独立的个体了，所以a的值就不同了。就当是执行了不同的函数，只是恰好函数体是一样的罢了。

优点：长期驻扎内存方便使用，可以隔离作用域，避免全局污染

缺点：因为长期驻扎内存所以内存堆满了就会泄露出去

特点：长期驻扎内存

闭包的构成：闭包=函数+词法作用域（即以变量声明定义的位置为参照，如果当前位置没有定义，就会访问父级定义的位置）

闭包分为：广义和狭义闭包

广义闭包：

   var a = 1000;
        function fn1() {
            
            alert(a)

        }
        fn1()

狭义闭包：

函数嵌套函数，
函数引用了父组件的相关变量

闭包的应用场景

求和:闭包能让我们在 return function中获得x的值也就是外部函数值
        function makeAdd() {
            var x= 10

            return function () {
                var y =10
                return x + y

            }

        }
        var a = makeAdd()
        console.log(a())

给对象设置私有变量并且利用特权方法去访问私有属性
function Fun(){
  var name = 'tom';
  
  this.getName = function (){
    return name;
  }
}

var fun = new Fun(); 
console.log(fun.name);//输出undefined,在外部无法直接访问name
console.log(fun.getName());//可以通过特定方法去访问

闭包应用场景之setTimeout

	//原生的setTimeout传递的第一个函数不能带参数
	setTimeout(function(param){
		alert(param)
	},1000)


	//通过闭包可以实现传参效果
	function func(param){
		return function(){
			alert(param)
		}
	}
	var f1 = func(1);
	setTimeout(f1,1000);

闭包应用场景之封装变量
<!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>
<script>
	//用闭包定义能访问私有函数和私有变量的公有函数。
	var counter = (function(){
		var privateCounter = 0;	//私有变量
		function change(val){
			privateCounter += val;
		}
		return {
			increment:function(){	//三个闭包共享一个词法环境
				change(1);
			},
			decrement:function(){
				change(-1);
			},
			value:function(){
				return privateCounter;
			}
		};
	})();

	console.log(counter.value());//0
	counter.increment();
	counter.increment();//2
	//共享的环境创建在一个匿名函数体内，立即执行。
	//环境中有一个局部变量一个局部函数，通过匿名函数返回的对象的三个公共函数访问。

</script>
</body>
</html>