预编译、作用域链和闭包理解

在理解预编译之前,首先了解一下JS的解析过程:JS引擎在解析脚本的过程分为两个阶段,预编译和执行,首先预编译然后再从上之下一行一行的执行代码。其次,要了解作用域,作用域是一个变量或者函数能够使用的空间,分为全局作用域和局部作用域,全局变量的作用域为全局作用域,局部变量(函数内部或者ES6块内部的变量)的作用域为局部作用域。

预编译分为全局预编译和函数预编译,我们来详细的了解一下。

全局预编译分为两步:

1.生成全局对象:(Global Object)  GO = {   };

2.找变量声明和关键字函数,将变量名和函数名作为GO的属性,变量声明的属性值为undefined,关键字函数的属性值为函数体;

这里需要特别注意的是:

  • 在全局的变量声明必须是var 关键字的变量声明,ES6中let和const并不会变量提升;
  • 函数必须是function关键字定义的函数;
  • 函数体内部没有任何关键字的变量也会提升到全局对象中;
  • 函数的权限大于变量,当同名时函数会覆盖变量,不关前后出现顺序;

Eg:

  

函数与变量同名时GO对象的对比

接下来我们来了解函数预编译,函数的预编译相对复杂一点。函数的预编译发生在函数执行的前一刻,或者说函数执行时首先进行预编译。

函数预编译分为四步:

  1. 创建activation Object(执行期上下文 ),AO对象;
  2. 找形参和变量声明,将形参名和变量名作为AO对象的属性,属性值为undefined;
  3. 将形参值和实参值统一;
  4. 在函数体内找关键字函数(function关键字定义的子函数),将函数名作为AO对象的属性,属性值为函数体;
  5. 函数执行完以后会销毁自己的执行期上下文。

这里需要特别注意的是:

实参和形参值统一在关键字函数之前,函数的权限比变量大,因此形参和子函数同名时也会被覆盖。

Eg:

    

接下来我们来详细的了解作用域链:

先将本文最初的一句话复制下来了回顾一下:作用域是一个变量或者函数能够使用的空间,分为全局作用域和局部作用域,全局变量的作用域为全局作用域,局部变量(函数内部或者ES6块内部的变量)的作用域为局部作用域。

然后我们了解作用域链:

Js中函数自身也是个对象,函数对象自身有一个属性scope,scope中存储着函数执行期上下文对象的集合,这个对象成链式链接,这也就是函数的作用域链。

全局函数在声明提升时将全局的GO放入自己的scope,然后执行时放入自己的AO。

局部函数在声明提升时先将父级的scope放入自身的scope中,然后在执行时将自己的AO放入scope。注意对象的存储是堆存储,指向关系,内存中GO只有一个,函数及子函数指向GO只是在栈中创造空间,将GO的索引存入。子函数存储父级的scope也相同。函数执行完成后销毁自身的执行期上下文AO,但是声明提升时放入scope中的内容并不会销毁。

最后我们了解一下闭包:

理解了上文的作用域链之后就很好理解闭包了。闭包的一个特点就是在函数内部返回一个函数。因此被返回的函数自身的scope中已经存储了父级的scope,当父级执行完成后销毁自身的执行期上下文时,对被返回的函数并无作用,因为其自身的scope中已经备份了一份。所以被返回的函数可以访问其父级的变量。

原文地址:https://www.cnblogs.com/baibai123/p/9060991.html

时间: 2024-08-29 21:49:37

预编译、作用域链和闭包理解的相关文章

理解js中的作用域,作用域链以及闭包

作用域变量作用域的类型:全局变量和局部变量全局作用域对于最外层函数定义的变量拥有全局作用域,即对任何内部函数来说,都是可以访问的 <script> var outerVar = "outer"; function fn(){ console.log(outerVar); } fn();//result:outer </script> 局部作用域和全局用域相反,局部作用域一般只在固定的代码片段内可访问到,对于函数外部是无法访问的 <script> fu

个人理解的javascript作用域链与闭包

闭包引入的前提个人理解是为从外部读取局部变量,正常情况下,这是办不到的.简单的闭包举例如下: 1 function f1(){ 2 3 n=100; 4 5 function f2(){ 6 alert(n); 7 } 8 9 return f2; 10 11 } 12 13 var result=f1(); 14 15 result(); // 100 代码中的f2函数,就是闭包. 1 function f1(){ 2 3 var n=100; 4 5 nAdd=function(){n+=1

1--面试总结-js深入理解,对象,原型链,构造函数,执行上下文堆栈,执行上下文,变量对象,活动对象,作用域链,闭包,This

参考一手资料:http://dmitrysoshnikov.com/ecmascript/javascript-the-core/中文翻译版本:https://zhuanlan.zhihu.com/p/32042645 Javascript 是一种单线程编程语言,这意味着它只有一个调用栈,call Stack(调用栈 ,,先入后出) 核心:对象,原型链,构造函数,执行上下文堆栈,执行上下文,变量对象,活动对象,作用域链,闭包,This js原型链? 定义 原型对象也是简单的对象并且可以拥有它们自

JS详细图解作用域链与闭包

JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你是初入前端的朋友,我没有办法直观的告诉你闭包在实际开发中的无处不在,但是我可以告诉你,前端面试,必问闭包.面试官们常常用对闭包的了解程度来判定面试者的基础水平,保守估计,10个前端面试者,至少5个都死在闭包上. 可是为什么,闭包如此重要,还是有那么多人没有搞清楚呢?是因为大家不愿意学习吗?还真不是,

作用域链与闭包

读了这篇博文地址后,对作用域和闭包终于有一了些了解.之前看各种文章,让我以为闭包是因为内部引用变量,导致变量无法在外部访问,而通过内部函数可以被外部访问导致被引用的变量可以间接访问.现在看来,这只能说是闭包的一种外在表现,跟闭包本身没有任何关系的. 下面总结一下作用域链和闭包. 1. 执行至闭包之前的整个过程 更为详细的可参见那篇博文,这里只是简单总结下.在浏览器执行解析代码时,分为编译和代码执行两个部分.编译阶段负责对语法解析,作用域链分析,语法优化.代码执行阶段中,先为函数创建上下文,然后执

JavaScript中的作用域链和闭包

JavaScript中的作用域链和闭包 2012-06-29 11:41 1878人阅读 评论(46) 收藏 举报 JavaScript中出现了一个以前没学过的概念——闭包.何为闭包?从表面理解即封闭的包,与作用域有关.所以,说闭包以前先说说作用域. 作用域(scope) 通常来说一段程序代码中使用的变量和函数并不总是可用的,限定其可用性的范围即作用域,作用域的使用提高了程序逻辑的局部性,增强程序的可靠性,减少名字冲突. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥

在chrome开发者工具中观察函数调用栈、作用域链与闭包

在chrome开发者工具中观察函数调用栈.作用域链与闭包 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量对象,闭包,this等关键信息的变化.因此,断点调试对于快速定位代码错误,快速了解代码的执行过程有着非常重要的作用,这也是我们前端开发者必不可少的一个高级技能. 当然如果你对JavaScript的这些基础概念[执行上下文,变量对象,闭包,this等]了解还不够的话,想要透彻掌握断点调试可能会有一些困

js-高级(原型与原型链、作用域与作用域链、闭包)

## 原型与原型链 * 所有函数都有一个特别的属性:   * `prototype` : 显式原型属性 * 所有实例对象都有一个特别的属性:   * `__proto__` : 隐式原型属性 * 显式原型与隐式原型的关系   * 函数的prototype: 定义函数时被自动赋值, 值默认为{}, 即用为原型对象   * 实例对象的__proto__: 在创建实例对象时被自动添加, 并赋值为构造函数的prototype值   * 原型对象即为当前实例对象的父对象 * 原型链   * 所有的实例对象

JavaScript中的作用域 、作用域链和闭包

JavaScript中作用,作用域链和闭包详解 一.作用域在js中有全局变量和局部变量之分:比如var a = 1;function sum(){var b=1console.log(b) //1console.log(a) //2 }sum()console.log(a) //3console.log(b) //4 例子中 a 是全局变量,b是局部变量(定义在函数内部,只能在函数内部访问)所以第1行正确 函数内部也能访问全局变量 a所以第2行也能正确 第三行也正确.第4行有外部不能访问内部变量