[JS]预解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: [JS]预解析

前言

  • 系列文章目录:
  • 根据视频和PPT整理
  • 视频及对应资料:
  • JS

1. 预解析

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行。

预解析:在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。预解析只会发生在通过 var 定义的变量和 function 上。所以,预解析分为:变量预解析和函数预解析

代码执行: 从上到下执行JS语句。

2. 变量预解析和函数预解析

2.1 变量预解析(变量提升

变量预解析(变量提升):变量的声明会被提升到当前作用域的最上面,但是变量的赋值不会被提升。

<script>
  console.log(num);
  var num = 10;
</script>

上面的代码相当于:

变量num的声明被提升到所在作用域的最上面。

<script>
  var num;
  // 由于变量在被输出时,只进行了声明并没有进行赋值
  // 所以输出的undefined
  console.log(num);
  num = 10;
</script>

<script>
  fun();
  var fun = function() {
    console.log('fun');
  }
</script>

上面的代码相当于:

变量fun的声明被提升到所在作用域的最上面,由于函数是作为fun的值,所以此处不为函数的声明,只有变量的声明会被进行提升,而函数的声明不会。所以报错。

<script>
  var fun;
  // 此处调用的不为函数,而是一个取值为undefined的变量
  // 变量不能被调用,所以报错
  fun();
  fun = function() {
    console.log('fun');
  }
</script>

2.2 函数预解析(函数提升)

函数预解析(函数提升):函数的声明和var声明变量一样会被提升到当前作用域的最上面。

<script>
  f1();
  function f1() {
    console.log('f1');
  }
</script>

上面的代码相当于:

函数f1的声明被提升到所在作用域的最上面。所以不会报错。

<script>
  function f1() {
    console.log('f1');
  }
  f1();
</script>

3. 案例

f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
  var a = b = c = 9;
  console.log(a);
  console.log(b);
  console.log(c);
}

上面的代码相当于:

<script>
  function f1() {
    // var a = b = c = 9;
    // 相当于
    c = 9; // 由于b c 没有进行声明直接进行赋值
    b = c; // 相当于全局变量
    var a = b; // a 使用了var进行声明为局部变量
    console.log(a); // 9
    console.log(b); // 9
    console.log(c); // 9
  }
  f1();
  // 由于在函数局部作用域中的b c为全局变量
  // 所以 b c 输出为9
  console.log(c); // 9
  console.log(b); // 9
  // 由于全局作用域中没有 a的声明
  // 函数中的声明的为局部作用域a
  console.log(a); // 报错
</script>

相关文章
|
2月前
|
JavaScript API
深入探索fs.WriteStream:Node.js文件写入流的全面解析
深入探索fs.WriteStream:Node.js文件写入流的全面解析
|
21天前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
|
2月前
|
Rust JavaScript 前端开发
Rust! 无VDom! 尤雨溪解析 Vue.js 2024 新特性
Rust! 无VDom! 尤雨溪解析 Vue.js 2024 新特性
|
1月前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
17 1
|
2月前
|
运维 Cloud Native JavaScript
云端新纪元:云原生技术深度解析深入理解Node.js事件循环及其在异步编程中的应用
【8月更文挑战第27天】随着云计算技术的飞速发展,云原生已成为推动现代软件开发和运维的关键力量。本文将深入探讨云原生的基本概念、核心价值及其在实际业务中的应用,帮助读者理解云原生如何重塑IT架构,提升企业的创新能力和市场竞争力。通过具体案例分析,我们将揭示云原生技术背后的哲学思想,以及它如何影响企业决策和操作模式。
|
2月前
|
JSON JavaScript 前端开发
JS逆向 AST 抽象语法树解析与实践
JS逆向 AST 抽象语法树解析与实践
29 2
|
2月前
|
JavaScript 前端开发 安全
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
46 2
|
1月前
|
自然语言处理 前端开发 JavaScript
Javaweb之javascript的详细解析
通过明确JavaScript的定位,掌握其核心概念和相关技术栈,在实现交互丰富的Web应用时,JavaScript就能够发挥它不可替代的作用。随着前后端分离趋势的推进,JavaScript在现代 Web 开发中变得更加重要,不仅限于传统的 JavaWeb 应用,而是广泛应用于各种类型的前端项目。
15 0
|
2月前
|
开发者 图形学 C#
深度解密:Unity游戏开发中的动画艺术——Mecanim状态机如何让游戏角色栩栩如生:从基础设置到高级状态切换的全面指南,助你打造流畅自然的游戏动画体验
【8月更文挑战第31天】Unity动画系统是游戏开发的关键部分,尤其适用于复杂角色动画。本文通过具体案例讲解Mecanim动画状态机的使用方法及原理。我们创建一个游戏角色并设计行走、奔跑和攻击动画,详细介绍动画状态机设置及脚本控制。首先导入动画资源并添加Animator组件,然后创建Animator Controller并设置状态间的转换条件。通过编写C#脚本(如PlayerMovement)控制动画状态切换,实现基于玩家输入的动画过渡。此方法不仅适用于游戏角色,还可用于任何需动态动画响应的对象,增强游戏的真实感与互动性。
58 0
|
2月前
|
JavaScript 前端开发

推荐镜像

更多
下一篇
无影云桌面