JavaScript中的闭包

185 阅读4分钟

在了解闭包之前,我们先来熟悉熟悉下面两个家伙(已掌握可跳过)

1.严格模式

2.高阶函数

1.严格模式

1.1什么是严格模式

JavaScript 除了提供正常模式外,还提供了严格模式(strict mode)。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式,即在严格的条件下运行 JS 代码。

1.消除了 Javascript 语法的一些不合理、不严谨之处,减少了一些怪异行为。

2.禁用了在 ECMAScript 的未来版本中可能会定义的一些语法,为未来新版本的 Javascript 做好铺垫。比如一些保留字如:class,enum,export, extends, import, super 不能做变量名

1.2开启严格模式

严格模式可以应用到整个脚本或个别函数中。因此在使用时,我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况。

  • 情况一 :为脚本开启严格模式

    • 有的 script 脚本是严格模式,有的 script 脚本是正常模式,这样不利于文件合并,所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他 script 脚本文件。

      (function (){
        //在当前的这个自调用函数中有开启严格模式,当前函数之外还是普通模式
          "use strict";
             var num = 10;
          function fn() {}
      })();
      //或者 
      <script>
         "use strict"; //当前script标签开启了严格模式
      </script>
      <script>
        			//当前script标签未开启严格模式
      </script>
      
  • 情况二: 为函数开启严格模式

    • 要给某个函数开启严格模式,需要把“use strict”; (或 'use strict'; ) 声明放在函数体所有语句之前。

      function fn(){
        "use strict";
        return "123";
      } 
      //当前fn函数开启了严格模式
      

2.严格模式中的变化

严格模式对 Javascript 的语法和行为,都做了一些改变。

'use strict'
// 变量的变化
num = 10 
console.log(num)//严格模式后使用未声明的变量
--------------------------------------------------------------------------------
var num2 = 1;
delete num2;//严格模式不允许删除变量
--------------------------------------------------------------------------------

// this指向的变化
function fn() {
 console.log(this); // 严格模式下全局作用域中函数中的 this 是 undefined
}
fn();  
---------------------------------------------------------------------------------
function Star() {
	 this.sex = '男';
}
// Star();严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错.
var ldh = new Star();
console.log(ldh.sex);
----------------------------------------------------------------------------------
setTimeout(function() {
  console.log(this); //注意: 严格模式下,定时器 this 还是指向 window
}, 2000);  


// 函数中的变化
function text(a, a) {
  console.log(a + a)
}
text()      // 函数的参数不能重名

//  函数必须声明在顶层 不允许在非函数代码块中声明函数
 // 非函数
        
        // if () {
        //     function a() {

        //     }
        // }
        // while () {
        //     function b() {

        //     }
        // }

更多严格模式要求参考

2.高阶函数

定义: 高阶函数是对其他函数进行操作的函数,它接收函数作为参数或将函数作为返回值输出。

此时fn 就是一个高阶函数

只要符合两个条件。就是高阶函数

1.函数作为参数

2.返回函数

函数也是一种数据类型,同样可以作为参数,传递给另外一个参数使用。最典型的就是作为回调函数。

同理函数也可以作为返回值传递回来

闭包

变量的作用域

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

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

什么是闭包

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

闭包的作用

作用:延伸变量的作用范围。

 function fn() {
   var num = 10;
   function fun() {
       console.log(num);
 	}
    return fun;
 }
var f = fn();
f();

注意:由于闭包延伸了变量的作用范围,如果利用不好会产生内存泄漏。原本要释放的变量得不到释放,一直存在内存中。

闭包的案例

  1. 利用闭包的方式得到当前li 的索引号
for (var i = 0; i < lis.length; i++) {
// 利用for循环创建了4个立即执行函数
// 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
(function(i) {
    lis[i].onclick = function() {
      console.log(i);
    }
 })(i);
}
  1. 闭包应用-3秒钟之后,打印所有li元素的内容
 for (var i = 0; i < lis.length; i++) {
   (function(i) {
     setTimeout(function() {
     console.log(lis[i].innerHTML);
     }, 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