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

Posted rainux.

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端面试基本---闭包大透析(包含案例及题目)相关的知识,希望对你有一定的参考价值。

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
  1. 闭包应用——3秒钟之后,打印所有li元素的内容
 for (var i = 0; i < lis.length; i++) {
   (function(i) {
     setTimeout(function() {
     	console.log(lis[i].innerhtml);//理解:i访问的是立即执行函数的局部变量i
     }, 3000)
   })(i);
}
  1. 闭包应用——计算打车价格

    需求分析:

    • 打车起步价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…

以上是关于前端面试基本---闭包大透析(包含案例及题目)的主要内容,如果未能解决你的问题,请参考以下文章

前端开发面试题目整理分析

前端面试常问的题目(持续更新中)

前端面试题

前端面试 JavaScript— 什么是闭包?

Web前端面试题目汇总

Web前端面试题目汇总