专栏首页前端博客:https://alili.tech深入理解 Javascript 之 JS的解析与执行过程

抱歉,你查看的文章已删除

深入理解 Javascript 之 JS的解析与执行过程

js的解析与执行过程

alert(a);
function a(){ alter(2); }
alert(a);
var a = 1
alert(a);
var a = 3;
alert(a);
function a(){ alter(4); }
alert(a);
a();
- 第一个 alert(a)  弹出 function a(){ alter(4); } 函数体
- 第二个 alter(a)  弹出 function a(){ alter(4); } 函数体
- 第三个 alter(a)  弹出 1
- 第四个 alter(a)  弹出 3
- 第五个 alter(a)  弹出 3
- 最后一行报错 a is not a function
  • 执行分析
// 第1行,没有关键字 , 不解析
// 第2行,遇到 function 关键字,解析到全局的头部
a = function a(){ alter(2); }
// 第3行,没有关键字 , 不解析
// 第4行,遇到关键字 var , 解析到全局的头部
a = undefined
// 第5行,没有关键字 , 不解析
// 第6行,遇到关键字 var , 解析到全局的头部
a = undefined
// 第8行,遇到 function 关键字,解析到全局的头部
a = function a(){ alter(4); }
// 第9行,没有关键字 , 不解析
// 第10行,a() 函数调用

此时这里有4个同名变量 a ,依循规则是:function 优先与 var, 同名的后面覆盖前面的 因此,a = function a(){ alter(2); } 替换掉下面的2个 a = undefined ,a = function a(){ alter(4); } 又替换掉 a = function a(){ alter(2); } ,最终只剩下 a = function a(){ alter(4); }


接下来我们进入正题哦

一、 全局预处理和执行

1.1、全局预处理阶段


实例0

var a = 5;
var b ;
function xxx(){
  // 用声明的方式创建的函数
}
var fun = function () {
  // 用函数表达式创建的函数
}
c = 5;  // 不会报错,但是也不会加入词法环境

假设全局我们创建了上诉的内容

  • 首先js会创建一个词法环境对象LexicalEnviroment,全局下等同于我们的window
// 创建词法环境如下
LexicalEnviroment{
  a: undefined
  b: undefined
  xxx: 该函数的引用
  fun: undefined
}

// 这里有着变量提升的知识

实例1

f(); // ff
g(); // 报错: g is not a function

function f(){
  console.log('ff');
}
var g = function() {
  // 
}

// 【解析】
// 因为词法环境中f存在引用,g确实是undefined,因此当在为g赋值之前调用g会报错。

实例2

console.log(a); // undefined
console.log(b); // 报错: b is not defined
var a = 1;
b = 4;

实例3 变量重名

// 处理函数声明冲突 => 覆盖
alert(f);
var f = 0;
function f() {
  cosole.log('f');
}
// 执行结果: 弹出一个f函数的字符串


// 处理变量声明冲突  => 忽略
alert(f);
function f() {
  cosole.log('f');
}
var f = 0;
// 执行结果: 弹出一个f函数的字符串

// 【解析】
//  可见不是根据最后出现的覆盖前面的

1.2、全局执行阶段

实例 4

alert(a);
alert(b);
alert(f);
alert(g);


var a = 5;
b = 6;
alert(b);
function f() {
  console.log('f');
}
var g = function () {
  console.log('g);
}
alert(g);
  • 执行过程如下
1. 构建词法环境
2. 词法环境如下
{
  f: function () {console.log('f')}
  a: undefined
  g: undefined
}
3. 开始执行
4. alert(a); // undefined
5. alert(b); // 报错: b is not defined
6. alert(f); // function () {console.log('f')}
7. alert(g); // undefined
8. a = 5;  b = 6                                  [window下的变量赋值]
9. alert(b); // 6
10. g = function () {console.log('g);}            [window下的变量赋值]
11. alert(g); // function () {console.log('g);}

// 最后的词法环境如下(window)
{
  f: function () {console.log('f')}
  a: 5
  g: function () {console.log('g);}   
  b: 6
}

二、 函数预处理和执行

2.1、函数预处理阶段 + 执行阶段

实例 5

function f(a, b) {
  alert(a);
  alert(b);

  var b = 10;
  function a() {
    //
  }
}

f(1,2);
  • 执行分析
1. 1. 构建词法环境
2. 词法环境如下
{
  a: 最初是1, 因为冲突,最后变成了 函数的引用 function a() {// }
  b: 2

}
3. 开始执行
4. alert(a); // function a() {// }
5. alert(b); // 2

实例 6

  • 函数内部如果没有用var声明的变量,会成为最外部的词法环境的变量(也就是全局了)
function a() {
  function b() {
    c = 100;
  }
  b();
}

a();

// window.c === 100

版权声明

本文资源来源互联网,仅供学习研究使用,版权归该资源的合法拥有者所有,

本文仅用于学习、研究和交流目的。转载请注明出处、完整链接以及原作者。

原作者若认为本站侵犯了您的版权,请联系我们,我们会立即删除!

原文标题

深入理解 Javascript 之 JS的解析与执行过程

原文链接

https://segmentfault.com/a/1190000015940119


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 数据库原理02——关系数据库

    外码: 设 F 是基本关系 R 的一个或一组属性,但不是关系 R 的码。如果 F 与基本关系 S 的主码 Ks 相对应,则称 F 是 R 的外码(外键):

    wsuo
  • JS 生成26个大小写字母

    主要用到 str.charCodeAt()和 String.fromCharCode()方法

    书童小二
  • 技术 | 太阳能电池技术新突破,眼镜也能当充电器

    镁客网
  • Layui 模板laytpl

    //第一步:编写模版。你可以使用一个script标签存放模板,如: <script id="demo" type="text/html"> <h3>{{ d...

    用户5760343
  • MySQL是如何实现事务的ACID

    最近在面试,有被问到,MySQL的InnoDB引擎是如何实现事务的,又或者说是如何实现ACID这几个特性的,当时没有答好,所以自己总结出来,记录一下。

    纪莫
  • LeetCode实战:子问题分析

    主要推送关于对算法的思考以及应用的消息。培养思维能力,注重过程,挖掘背后的原理,刨根问底。本着严谨和准确的态度,目标是撰写实用和启发性的文章,欢迎您的关注。 记...

    double
  • 【WWW2018】网络表示学习Tutorial(附下载)

    WZEARW

扫码关注云+社区

领取腾讯云代金券