深度了解js闭包形成及其原理

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 一说到这个问题,很多人第一印象就是函数里返回一个函数,就是闭包。闭包也是被大家广泛讨论的一个问题,但是很多人都是只知其然,不知其所以然。那么闭包到底是什么?我们放到后面来回答。

闭包


一说到这个问题,很多人第一印象就是函数里返回一个函数,就是闭包。闭包也是被大家广泛讨论的一个问题,但是很多人都是只知其然,不知其所以然。

那么闭包到底是什么?我们放到后面来回答。


作用域与作用域链


作用域

 // 案例1
 // 全局作用域 函数向上找
  var name= '帅哥';        
  function fn1(){
      console.log(name);
      // 会打印帅哥
   }
   fn1();
   // 案例2
   // 函数内部定义的变量是局部变量 外部访问不到
   function fn2(){
        var name1 = "小明";
    }
    // console.log(name1);  报错 name1未定义

这几行代码不是很难,大家都看得懂,案例一是全局变量(或称外层变量)函数内部是可以访问的,那么应该这么形容:我能访问name,因为我具有作用域属性[[scopes]],里面有name属性,而案例二是访问不到的,因为name1是局部变量。


作用域链

// 案例3
 function fn3(){
   var name2 = '木子';
    function fn4(){
        var name2 = '惠子';
        // console.log(name2); 惠子
    }
    fn4();
}
fn3();

看到以上案例,函数包函数,一级一级就构成了作用域链条,在fn4里如果未定义name2,然后去打印它,它会一级一级向上找,找到fn3里面的name2,然后输出’木子’。案例三上是新定义了name2,那么它会就近查找,找到’惠子’然后打印出来


为什么会出现闭包?



说一个我的面试经历吧,我去某大厂面试的时候,面试官问到这个问题,我当时第一反应就是js的闭包是对js函数作用域特性的一种利用,因为函数内定义的局部变量不能被外部直接获取,而函数却可以访问到其外部作用域的变量。

所以我们可以在函数内部定义一个访问局部变量的方法并将之输出给外部。在函数销毁后,通过函数输出的方法访问局部变量成了唯一途径。


回答完之后自己觉得还是挺满意的,然而面试官面无表情。


我灵机一动 又补充道:

通过闭包,我们可以避免全局污染,保护私密数据等等

面试官表情都没动一下,来了一句:这些都不是我想听到的答案,能说的更底层一些么?


闭包形成原理



那么现在面试官肯定是问闭包形成原理了

从谷歌的v8引擎原理(经典的js引擎)说起,它的工作机制:


简单来说,v8引擎的工作分两个阶段,一个是语法检查阶段,一个是运行阶段。


运行阶段又分预解析和执行两个阶段。

在预解析阶段,先创建执行上下文,执行上下文包括变量对象、作用域链和this值。


执行上下文:当代码运行时,会产生一个对应的执行环境,在这个环境中,所有变量会被事先提出来(变量提升),有的直接赋值,有的为默认值 undefined,代码从上往下开始执行,就叫做执行上下文。创建执行上下文后,会对变量对象的属性进行填充。所谓属性,就是var、function声明的标志符及函数形参名,至于属性对应的值:变量值为undefined,函数值为函数定义,形参值为实参,没有传入实参则为undefined。


变量对象VO: var声明的变量、function声明的函数,及当前函数的形参,执行上下文则是先预解析一次。


作用域链:当前变量对象+所有父级作用域 [[scope]],作用域链其实就是一个变量对象的链,函数的变量对象称之为active object,简称AO。(函数创建后就有静态的[[scope]]属性,直到函数销毁)


this值:在进入执行上下文后不再改变,预解析阶段结束后,进入执行代码阶段,此时执行上下文有个Scope属性(区别于函数的[[scope]]属性)。Scope = 当前AO.concat([[scope]])


js解析器逐行读取并执行代码,变量对象中的属性值可能因赋值语句而改变。当我们查询外部作用域的变量时,其实就是沿着作用域链,依次在这些变量对象里遍历标志符,直到最后的全局变量对象。


[[Scopes]] 作用域属性 作用域属性保存自身作用域变量对象和父级变量对象引用。因此,函数才能访问上级函数得变量 这样就形成了作用域链。


我能访问到 windom的东西,就是因为作用域属性保存了它


试着创建一个闭包


 function outer(){
     var a1 = 0;
     var b1 = 1;     //未使用会被垃圾回收机制回收
     return function inner(){
         return a1;
     }
 }
 function fn5(){
    var getInnerData  = outer();
    console.dir(getInnerData);
 }
  fn5();

当我们调用一个闭包函数时(比如上面的getInnerDate函数)

因为函数执行时,其上下文有个Scope属性,该属性作为一个作用域链包含有该函数被定义时所有外层的变量对象的引用,

所以定义了闭包的函数虽然销毁了,但是其变量对象依然被绑定在函数inner上,保留在内存中。

看到下图:

4.png

Scopes上已经有了一个闭包,保存了a1这个变量,不会被销毁。

Global:运行时和标准共同注入了一堆属性。

再看两个例子:

 function fn7() {
   var name2 = "小白"; // name 是一个被 fn7 创建的局部变量
     function displayName() { // displayName() 是内部函数,一个闭包
         console.log(name2); // 使用了父函数中声明的变量
     }
     displayName();
 }
 fn7();          //正常打印
 function fn8() {
     var name3 = "小贱";
     function displayName() {
         console.log(name3);
     }
     return displayName;
 }
 var myFn8 = fn8();
 myFn8();

fn8段代码和之前的 fn7() 示例的效果完全一样。其中的不同 — 也是有意思的地方


内部函数 displayName() 在执行前,被外部函数返回。

第一眼看上去,也许不能直观的看出这段代码能够正常运行。


在一些编程语言中,函数中的局部变量仅在函数的执行期间可用。一旦 fn8() 执行完毕,我们会认为 name3 变量将不能被访问。然而,因为代码运行得没问题,所以很显然在 JavaScript 中并不是这样的。


这个谜题的答案是,JavaScript中的函数会形成闭包。 闭包是由函数以及创建该函数的词法环境组合而成。


这个环境包含了这个闭包创建时所能访问的所有局部变量。在我们的例子中,myFn8 是执行 fn8 时创建的,displayName 函数实例的引用,而 displayName 实例仍可访问其词法作用域中的变量,即可以访问到 name3 。


由此,当 myFn8 被调用时,name3 仍可被访问,其值 name3 就被传递到console中。


闭包小案例二



 function makeAdder(x) {
  return function(y) {
          return x + y;
      };
  }
  var add5 = makeAdder(5);
  var add10 = makeAdder(10);
  // console.log(add5(2));  // 7
  // console.log(add10(2)); // 12

在这个示例中,定义了 makeAdder(x) 函数,它接受一个参数 x ,并返回一个新的函数。返回的函数接受一个参数 y,并返回x+y的值。


从本质上讲,makeAdder 是一个函数工厂 — 他创建了将指定的值和它的参数相加求和的函数。


在上面的示例中,使用函数工厂创建了两个新函数 — 一个将其参数和 5 求和,另一个和 10 求和。

add5 和 add10 都是闭包。它们共享相同的函数定义,但是保存了不同的词法环境。在 add5 的环境中,x 为 5。而在 add10 中,x 则为 10。


这说明闭包是非常有用的,下一篇更新闭包的实用性,应用场景。

希望能帮到大家,如果错误,欢迎指正。



目录
相关文章
|
23天前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理与实战
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理与实战
|
8天前
|
JavaScript 前端开发
js 闭包的优点和缺点
【10月更文挑战第27天】JavaScript闭包是一把双刃剑,在合理使用的情况下,它可以带来很多好处,如实现数据封装、记忆功能和模块化等;但如果不注意其缺点,如内存泄漏、变量共享和性能开销等问题,可能会导致代码出现难以调试的错误和性能问题。因此,在使用闭包时,需要谨慎权衡其优缺点,根据具体的应用场景合理地运用闭包。
98 58
|
8天前
|
缓存 JavaScript 前端开发
js 闭包
【10月更文挑战第27天】JavaScript闭包是一种强大的特性,它可以用于实现数据隐藏、记忆和缓存等功能,但在使用时也需要注意内存泄漏和变量共享等问题,以确保代码的质量和性能。
26 7
|
10天前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
11 2
|
23天前
|
前端开发 JavaScript
深入理解JavaScript中的事件循环(Event Loop):从原理到实践
【10月更文挑战第12天】 深入理解JavaScript中的事件循环(Event Loop):从原理到实践
33 1
|
27天前
|
设计模式 JavaScript 前端开发
探索JavaScript中的闭包:从基础概念到实际应用
在本文中,我们将深入探讨JavaScript中的一个重要概念——闭包。闭包是一种强大的编程工具,它允许函数记住并访问其所在作用域的变量,即使该函数在其作用域之外被调用。通过详细解析闭包的定义、创建方法以及实际应用场景,本文旨在帮助读者不仅理解闭包的理论概念,还能在实际开发中灵活运用这一技巧。
|
27天前
|
缓存 JavaScript 前端开发
深入了解JavaScript的闭包:概念与应用
【10月更文挑战第8天】深入了解JavaScript的闭包:概念与应用
|
23天前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理、应用与代码演示
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理、应用与代码演示
|
24天前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript闭包:原理与应用
【10月更文挑战第11天】深入理解JavaScript闭包:原理与应用
18 0
|
27天前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:概念与应用
【10月更文挑战第8天】深入理解JavaScript中的闭包:概念与应用