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

简介: 一说到这个问题,很多人第一印象就是函数里返回一个函数,就是闭包。闭包也是被大家广泛讨论的一个问题,但是很多人都是只知其然,不知其所以然。那么闭包到底是什么?我们放到后面来回答。

闭包


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

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


作用域与作用域链


作用域

 // 案例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。


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

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



目录
相关文章
|
20天前
|
自然语言处理 JavaScript 前端开发
JavaScript中闭包:概念、用途与潜在问题
【4月更文挑战第22天】JavaScript中的闭包是函数及其相关词法环境的组合,允许访问外部作用域,常用于数据封装、回调函数和装饰器。然而,不恰当使用可能导致内存泄漏和性能下降。为避免问题,需及时解除引用,减少不必要的闭包,以及优化闭包使用。理解并慎用闭包是关键。
|
2天前
|
JavaScript 前端开发
深入了解前端框架Vue.js的响应式原理
本文将深入探讨Vue.js前端框架的核心特性之一——响应式原理。通过分析Vue.js中的数据绑定、依赖追踪和虚拟DOM等机制,读者将对Vue.js的响应式系统有更深入的理解,从而能够更好地利用Vue.js构建灵活、高效的前端应用。
|
5天前
|
前端开发 JavaScript
闭包在JavaScript中有许多应用场景
闭包在JavaScript中发挥关键作用,如封装私有变量和函数提升安全性,维护变量生命周期,实现高阶函数,模拟块级作用域,支持回调函数以处理异步操作,以及促进模块化编程,增强代码组织和管理。闭包是理解和掌握JavaScript高级特性的重要一环。
21 7
|
12天前
|
自然语言处理 JavaScript 前端开发
【JavaScript技术专栏】深入理解JavaScript作用域与闭包
【4月更文挑战第30天】了解JavaScript的关键在于掌握作用域和闭包。作用域决定变量和函数的可访问范围,分为全局(在`window`或`global`对象中)和局部(函数内部)。闭包则允许函数访问其创建时的作用域,即使在其他地方调用。它通过作用域链保存对外部变量的引用,常用于实现私有变量、模块化和柯里化。然而,不当使用闭包可能导致内存泄漏和性能下降。理解这些概念能提升代码质量,但也需谨慎处理潜在问题。
|
13天前
|
自然语言处理 前端开发 JavaScript
【Web 前端】什么是JS闭包?
【4月更文挑战第22天】【Web 前端】什么是JS闭包?
|
13天前
|
编解码 JavaScript 前端开发
【专栏】介绍了字符串Base64编解码的基本原理和在Java、Python、C++、JavaScript及Go等编程语言中的实现示例
【4月更文挑战第29天】本文介绍了字符串Base64编解码的基本原理和在Java、Python、C++、JavaScript及Go等编程语言中的实现示例。Base64编码将24位二进制数据转换为32位可打印字符,用“=”作填充。文中展示了各语言的编码解码代码,帮助开发者理解并应用于实际项目。
|
14天前
|
自然语言处理 JavaScript 前端开发
闭包对于javascript中有什么作用
JavaScript中的闭包有多种用途,如数据封装和私有化、函数工厂及保持状态。闭包能创建私有变量和函数,防止外部访问,实现清晰的代码接口。
|
16天前
|
JavaScript 前端开发
js原生自调用函数原理
JavaScript中的IIFE(Immediately Invoked Function Expression)是定义后立即执行的函数表达式。它有两种实现方式:匿名函数表达式 `(function() { /* 函数体 */ })()` 和命名函数声明 `(function myFunction() { /* 函数体 */ })()`。IIFE提供封闭作用域,防止变量冲突,常用于创建私有作用域、封装代码和避免变量提升问题。执行后,IIFE内部的变量和函数会被销毁,除非被特意暴露。
|
17天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
26 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
17天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
36 0