【JavaScript】闭包函数 学以实用

系列文章目录

让外部函数访问内部变量成为可能。闭包概念、闭包示例、闭包案例、闭包应用

---

---

前言

提示：大家好，今天学习了闭包函数，一起再了解一下吧

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、变量作用域

示例：变量根据作用域分为两种：全局变量和局部变量
局部访问全局但是全局访问不了局部。但是向让外部访问局部该怎么办？—>闭包

二、闭包

1闭包概念：函数用到外部变量，不需要传参就可以获取。
2特点：让外部访问函数内部变量成为可能。
3表现形式：
​ 当一个返回值是另一个函数，而返回的那个函数调用了其父函数内部的其它变量，如果返回的是这个函数而且是在外部执行，就产生了闭包。
​ 函数内部声明的时候，一定使用var命令，如果不用var，实则声明了一个全局变量。、

三、闭包示例

代码如下（示例）：
1：

function fun(){
     
		//定义局部变量
​		var a = “我是局部变量”;
​		return function(){
     
​		alert(a);//内部函数中调用局部变量
​	}
}
var b = fun();
b(); //"我是局部局部变量"

2：

var  num = 10;
function addNumber (num1,num2){
     
	function sum(){
     
		alert(num1+num2+num)
	}
	return sum();
}
addNumber(1,2);//13

3：

 function outer(){
     
     var n=200
     function inner(){
     
         console.log(n);
     }
     return inner
 }
var fn=outer() // outer 函数执行完毕，其内部变量应该销毁，但由于 inner 函数使用了此变量给，所以此变量一直被保留
fn()

4：

function fn(){
     
	var a = 3;
	return function (){
     
		return ++a;
	}
}
alert (in()());//4
alert(fun()());//4

四、闭包案例

利用闭包获取索引(页面上有四个li 获取他们的索引)：

for (var i = 0;i<lis.length;++){
     
	(function(j){
     
		lis[j].onclick = function (){
     
			console.log(j)
		}
	})(i)
}

闭包应用-5秒之后，打印完所有li元素的innerHTML

	

        
1
        
2
        
3
        
4
    
    

---

五、闭包应用-计算打车价格

var car = (function() {
     
     var start = 13; // 起步价  局部变量
     var total = 0; // 总价  局部变量
     return {
     
       // 正常的总价
       price: function(n) {
     
         if (n <= 3) {
     
           total = start;
         } else {
     
           total = start + (n - 3) * 5
         }
         return total;
       },
       // 拥堵之后的费用
       yd: function(flag) {
     
         return flag ? total + 10 : total;
       }
    }
 })();
console.log(car.price(5)); // 23
console.log(car.yd(true)); // 33

总结

提示：这里对文章进行总结：
```````````````````````````````

以上就是今天要讲的内容，本文仅仅简单介绍了闭包的使用，闭包函数提供了使我们快速便捷地处理数据的方法。