前端面试基本---闭包大透析(包含案例及题目)

Posted 2021-05-18 rainux.

Code is never die !

1.0 变量的作用域

变量根据作用域的不同分为两种：全局变量和局部变量

1. 函数内部可以使用全局变量
2. 函数外部不可以使用局部变量
3. 当函数执行完毕，本作用域内的局部变量会销毁

2.0 什么是闭包

• 闭包（closure）指有权访问另一个函数作用域中变量的函数
• 简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量

<script>
 function fn1(){   //fn1就是闭包函数
 	var num = 666;
 	function fn2(){
 		console.log(num);//666
 	}
 	fn2()
 }
 fn1();
</script>

如上述代码，理解闭包：fn2内部是一个作用域，那么fn2访问了另一个函数内部的局部变量，那么这个局部变量所在函数就叫做闭包函数，所以此时fn1就是闭包函数。

闭包形成的两个关键点：

1. 函数嵌套
2. 内部函数使用外部函数的局部变量（将外部函数称之为闭包函数）

3.0 闭包的作用

作用：延伸变量的作用范围。（使得fn外部的作用域访问num）

 function fn() {
   var num = 10;
   function fun() {
       console.log(num);
 	}
    return fun;//将内部函数返回，不调用
 }
var f = fn();//fn调用完毕，正常理解num就需要消耗，但是fn如果是一个闭包函数，就不会消耗，因为fun要使用，只用fun调用完毕才消耗
f();//调用内部函数fun，打印num，此时就是在fn外部访问了num

4.0 闭包的案例

1. 闭包应用——利用闭包的方式得到当前li 的索引号

for (var i = 0; i < lis.length; i++) {
// 利用for循环创建了4个立即执行函数
// 立即执行函数也成为小闭包，因为立即执行函数里面的任何一个函数都可以使用它的i这变量
(function(i) {
    lis[i].onclick = function() {
      console.log(i);
    }
 })(i);
}
//理解：
//for循环创建了四个立即执行函数，每个立即执行函数都有一个局部变量i，并且值不一样，是0,1,2,3
//当我们点击li的时候，li的onclick执行，内部要访问i，此时就访问到它所在的立即执行函数的局部变量i

2. 闭包应用——3秒钟之后,打印所有li元素的内容

 for (var i = 0; i < lis.length; i++) {
   (function(i) {
     setTimeout(function() {
     	console.log(lis[i].innerhtml);//理解：i访问的是立即执行函数的局部变量i
     }, 3000)
   })(i);
}

3. 闭包应用——计算打车价格

   需求分析：

   • 打车起步价13(3公里内)，之后每多一公里增加 5块钱

   • 用户输入公里数就可以计算打车价格

   • 如果有拥堵情况，总价格多收取10块钱拥堵费

 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

5.0 小试牛刀(动动脑,试一试)

 var name = "The Window";
   var object = {
     name: "My Object",
     getNameFunc: function() {
     return function() {
     return this.name;
     };
   }
 };
console.log(object.getNameFunc()())
-----------------------------------------------------------------------------------
var name = "The Window";　　
  var object = {　　　　
    name: "My Object",
    getNameFunc: function() {
    var that = this;
    return function() {
    return that.name;
    };
  }
};
console.log(object.getNameFunc()())
       

Ending…