Js闭包+作用域

目录

• • Js闭包+作用域
• 1.闭包的概念
• • 作用域
  • • 1.1什么是作用域
    • 1.2全局作用域
    • 1.3块作用域
    • 1.4函数作用域
    • • 1.4.1函数作用域的原理
      • 1.4.2函数作用域的特点
      • 1.5模块作用域
  • 2.实现闭包最常用的方式
  • • 2.1闭包的执行过程
  • 3.闭包的特点
  • 4.闭包的优点
  • 5.闭包的缺点
  • 6.匿名闭包

1.闭包的概念

如果一个函数访问了此函数的父级及父级以上的作用域变量，那么这个函数就是一个闭包。

闭包写法

var a = 1;
	// 匿名的立即执行函数，因访问了全局变量a，所以也是一个闭包
    (function test (){
		alert(a);
	})()
           

本质上，JS中的每个函数都是一个闭包，因为每个函数都可以访问全局变量。

作用域

1.1什么是作用域

作用域即变量/函数可以被访问的区域。

1.2全局作用域

{} 和函数外的区域为全局作用域。

• 全局作用域中的声明的变量是全局变量，在页面的任意的部分都可以访问。
• 全局作用域中无法访问函数作用域的变量
• 全局作用域在页面打开时创建，在页面关闭时销毁。
• 全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，由浏览器创建，可以直接使用，全局变量是window对象的属性，函数是window对象的方法。

function foo() {
   var a = b = 100; // 连续赋值
}

foo();

console.log(window.b); // 打印 100 
console.log(window.a); // 打印 undefined 
console.log(a); // 报错 Uncaught ReferenceError: a is not defined

           

执行顺序：

• 先把 100 赋值给 b；
• 再声明变量 a

• 再把 b 的值赋值给 a

  var a = b = 100 这行连续赋值的代码等价于 var a = (b = 100)

  b 是未经声明的变量就被赋值了，属于 window.b；

  a 的作用域仅限于 foo() 函数内部，不属于 window；

1.3块作用域

{} 中为块作用域

• 变量只在代码块中有效；

ES5本身不提供块级作用域，通常使用立即调用函数表达式实现

(function () {
 var block_scoped=0;
}());
console.log(block_scoped); //引用错误
           

ES6中，使用 let 和 const 实现块级作用域

let a =1
if(a===1) {
  let b = 2
}
console.log(b); // Uncaught ReferenceError: b is not defined
           

1.4函数作用域

函数内的区域为函数作用域（即 function 中 { } 内的部分）

1.4.1函数作用域的原理

执行期上下文：当函数执行时，会创建一个执行期上下文的内部对象。每调用一次函数，就会创建一个新的上下文对象，他们之间是相互独立的。当函数执行完毕，它所产生的执行期上下文会被销毁。

在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用（就近原则）。如果没有则向上一级作用域中寻找，直到找到全局作用域；如果全局作用域中依然没有找到，则会报错ReferenceError。

1.4.2函数作用域的特点

1. 函数作用域中可以访问到全局作用域的变量，如window.a（全局作用域和函数作用域都定义了变量a时）
2. 全局作用域无法访问函数内定义的变量
3. 函数中，使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
4. 函数中，没有var声明的变量都是全局变量，而且并不会提前声明。
5. 函数中，函数声明也会在函数中所有的代码执行之前执行

var a = 1;

    function foo() {
        console.log(a);
        a = 2;     // 此处的a相当于window.a
    }

    foo(); // 打印结果是1
    console.log(a);   //打印结果是2
           

定义形参就相当于在函数作用域中声明了变量。

function fun6(e) { // 这个函数中，因为有了形参 e，此时就相当于在函数内部的第一行代码里，写了 var e;
        console.log(e);
    }

    fun6();  //打印结果为 undefined
    fun6(123);//打印结果为123
           

1.5模块作用域

ES6新增语法，每个js文件都是一个模块，每个模块中的区域即模块作用域，其他文件要使用模块中的变量/函数，必须对外导出模块中的变量/函数，并在目标文件中引入。

关于JS中的作用域，均参考博客（https://blog.csdn.net/weixin_41192489/article/details/124277123）

2.实现闭包最常用的方式

function a() {
    var i = '初始值';
    i = i + "—_执行a"
    // 此处的函数b访问了父级函数a中的局部变量i,成为了一个闭包
    function b() {
        i = i + "_执行b"
        console.log(i)
    }
    return b;
}
var c = a(); // 此时 i 的值为 ：初始值—_执行a
c()          // 此时 i 的值为 ：初始值—_执行a_执行b
c()          // 此时 i 的值为 ：初始值—_执行a_执行b_执行b
           

2.1闭包的执行过程

以上方代码为例：

将函数a赋值给全局变量c时，a会执行一次，局部变量 i 的值变为初始值—_执行a，最终返回函数b，此时全局变量c的值为闭包函数b的引用。

此时函数a虽然已执行完，但因为内部包含闭包函数b，所以函数 a 的执行期上下文会继续保留在内存中，不会被销毁，所以局部变量 i 仍是初始值—_执行a

执行期上下文：当函数执行时，会创建一个执行期上下文的内部对象。每调用一次函数，就会创建一个新的上下文对象，他们之间是相互独立的。当函数执行完毕，它所产生的执行期上下文会被销毁

第一次执行 c() 时，闭包函数b第一次执行，局部变量 i 的值变为初始值—_执行a_执行b

第二次执行 c() 时，闭包函数b第二次执行，局部变量 i 的值变为初始值—_执行a_执行b_执行b

3.闭包的特点

1.访问函数内部的变量

2.让变量始终保持在内存中

4.闭包的优点

1.可以减少全局变量的定义，避免全局变量的污染

2.能够读取函数内部的变量

3.在内存中维护一个变量，可以用做缓存

5.闭包的缺点

1）造成内存泄露

闭包会使函数中的变量一直保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。

解决方法——使用完变量后，手动将它赋值为null；

2）闭包可能在父函数外部，改变父函数内部变量的值。

3）造成性能损失

由于闭包涉及跨作用域的访问，所以会导致性能损失。

解决方法——通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响

6.匿名闭包

function funA(){
  var a = 10;  // funA的活动对象之中;
  return function(){   //匿名函数的活动对象;
        alert(a);
  }
}
var b = funA();
b();  //10