浅谈JavaScript代码预解析 + 示例详解

本文深入探讨JavaScript的预解析机制,通过实例分析了变量声明、函数声明的处理方式,揭示了预解析过程中变量和函数的声明与定义行为,以及重复声明的影响。并展示了预解析与执行阶段的不同之处。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

知识点

  • var 声明的变量在预解析的时候只执行声明,不会执行定义,默认值是 undefined
  • function 声明的函数在预解析的时候会提前声明并且会同时定义。
  • 变量名重复声明无效
  • 预解析过得代码不会再执行阶段执行

示例一

console.log(a);  // 打印函数a函数体(function a() { console.log('a') })

var a = 10;

console.log(a);  // 10

function a() { console.log('a') }

console.log(a);  // 10
预解析过程
  1. 首先预解析到有变量 a 存在,因此记录下 a 这个名字,和其值 undefined
  2. 接着预解析到有函数 a 声明,记录下函数名 a
  3. 但是发现已经记录了一个 a ,因此该操作无效,将函数体与 a 这个名字相关联
  4. 解析完毕
预解析过程代码
  1. a = undefined
  2. a = function () { console.log('a') }
预解析结果
  1. a = function () { console.log('a') }
执行过程
  1. 打印变量 a 的值 function a() { console.log('a') }
  2. 变量 a 赋值为10,将原来关联的函数覆盖
  3. 打印变量 a 的值 10
  4. 打印变量 a 的值 10
  5. 执行完毕
执行过程代码
  1. console.log(a)
  2. a = 10
  3. console.log(a)
  4. console.log(a)

示例二

console.log(fn)  // 函数fn函数体(function fn() { console.log(2) })

function fn() { console.log(1) }

console.log(fn)  // 函数fn函数体(function fn() { console.log(2) })

var fn = 10    

console.log(fn)  // 10

function fn() { console.log(2) }   

console.log(fn)  // 10
预解析过程
  1. 首先预解析到有函数 fn 声明,因此记录 fn 这个名字,并关联其函数体
  2. 接着预解析到变量 fn 声明,记录下变量名 fn
  3. 但是发现已经记录了一个 fn ,因此该操作无效
  4. 接着预解析到有函数 fn 声明,因此记录 fn 这个名字
  5. 但是发现已经记录了一个 fn ,因此该操作无效,接着关联其函数体
  6. 解析完毕
预解析过程代码
  1. fn = function () { console.log(1) }
  2. fn = function () { console.log(2) }
预解析结果
  1. fn = function () { console.log(2) }
执行过程
  1. 打印变量 fn 的值 function fn() { console.log(2) }
  2. 打印变量 fn 的值 function fn() { console.log(2) }
  3. 变量 fn 赋值为10,将原来关联的函数覆盖
  4. 打印变量 fn 的值 10
  5. 打印变量 fn 的值 10
  6. 执行完毕
执行过程代码
  1. console.log(fn)
  2. console.log(fn)
  3. fn = 10
  4. console.log(fn)
  5. console.log(fn)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值