js闭包的理解(详细)及应用

闭包就是能够访问其他函数内部变量的函数，为什么这么说呢，下面举一些例子

由于js作用域是一层一层下来的，内部函数可以访问外部变量，但外部函数却不能访问到内部变量，基于上面的例子就是func()函数可以访问foo()函数内部的变量，如vable，但foo()函数却不能访问到func()函数内部的变量，而闭包则可以解决这个问题。
这个时候func()函数就是一个闭包。

function foo(){
	var vable = '函数foo中的变量';
	function func(){
		alert(vable);
	}
	return func;  //func被外部函数作为返回值返回了,返回的是一个闭包
}

闭包：func()可以读取foo()中的变量，只要把func()作为返回值，就可以在foo()外读取foo()内部变量。
有些人可能就会问，要想访问foo()中的变量vable，直接在foo()return vable不就可以了吗，但闭包的定义是函数，而不是变量，而且函数要比变量在使用方面灵活的多，所以闭包的用处更丰富。

闭包的作用：1.读取函数内部的变量；2.这些变量的值始终保持在内存中，不会在外层函数调用后被自动清除。

闭包的优缺点：
优点：为私有变量提供了一块独立的作用域，可以重复使用变量而不会造成变量污染
缺点：内存消耗大，容易造成网页性能问题和内存的泄漏

闭包实现在函数外读取到函数内的变量的原因：
foo()是func()的父函数，func()被赋给了一个全局变量foo()，func()始终存在内存中，func()的存在依赖foo()，因此foo()也始终存在内存中，不会在调用结束后，被垃圾回收机制回收。

下面举一个闭包的应用场景：setTimeout

有些函数规定没有参数或者某些参数(如函数)不能携带参数(变量)
如原生的setTimeout传递的第一个函数不能带参数、vue中computed计算属性中的变量不能接收传递给它的参数等…

//原生的setTimeout传递的第一个函数不能带参数
setTimeout(function(param){
        alert(param)
    },1000)
    
    //通过闭包可以实现传参效果
    function func(param){
        return function(){
            alert(param)
        }
    }
    var f1 = func(1);
    setTimeout(f1,1000);

<template>
	<div :style="{'color':colorText(item.message)}"></div>
</template>
<script>
	export default{
		computed:{
			colorText(){
				//在html中传递给total的参数在这里接收,这里用到的原理就是js闭包传值
				return function (message) {
	              switch (message) {
	                   case '成功': return 'rgba(74,74,74,1)';
	                   case '失败': return 'rgba(244,66,66,1)';
	                   case '等待': return 'rgba(162,162,162,1)';
	               }
	           }
			}
		}
	}
</script>