[JS]预解析

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: [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 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
3月前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
91 5
|
2月前
|
存储 前端开发 JavaScript
JavaScript垃圾回收机制深度解析
【10月更文挑战第21】JavaScript垃圾回收机制深度解析
120 59
|
2月前
|
机器学习/深度学习 自然语言处理 JavaScript
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
在信息论、机器学习和统计学领域中,KL散度(Kullback-Leibler散度)是量化概率分布差异的关键概念。本文深入探讨了KL散度及其相关概念,包括Jensen-Shannon散度和Renyi散度。KL散度用于衡量两个概率分布之间的差异,而Jensen-Shannon散度则提供了一种对称的度量方式。Renyi散度通过可调参数α,提供了更灵活的散度度量。这些概念不仅在理论研究中至关重要,在实际应用中也广泛用于数据压缩、变分自编码器、强化学习等领域。通过分析电子商务中的数据漂移实例,展示了这些散度指标在捕捉数据分布变化方面的独特优势,为企业提供了数据驱动的决策支持。
137 2
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
|
29天前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
56 0
|
2月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
60 4
|
1月前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
46 0
|
2月前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
40 0
|
2月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
156 0
|
2月前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
57 0

推荐镜像

更多