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

sunnyxd 发布于2019-08-23 15:04 / 3360人阅读

摘要：知识点声明的变量在预解析的时候只执行声明，不会执行定义，默认值是。声明的函数在预解析的时候会提前声明并且会同时定义。

知识点

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

预解析过程

首先预解析到有变量 a 存在，因此记录下 a 这个名字，和其值 undefined

接着预解析到有函数 a 声明，记录下函数名 a

但是发现已经记录了一个 a ，因此该操作无效，将函数体与 a 这个名字相关联

解析完毕

预解析过程代码

a = undefined

a = function () { console.log("a") }

预解析结果

a = function () { console.log("a") }

执行过程

打印变量 a 的值 function a() { console.log("a") }

变量 a 赋值为10，将原来关联的函数覆盖

打印变量 a 的值 10

执行完毕

执行过程代码

console.log(a)

a = 10

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

预解析过程

首先预解析到有函数 fn 声明，因此记录 fn 这个名字，并关联其函数体

接着预解析到变量 fn 声明，记录下变量名 fn

但是发现已经记录了一个 fn ，因此该操作无效

接着预解析到有函数 fn 声明，因此记录 fn 这个名字

但是发现已经记录了一个 fn ，因此该操作无效，接着关联其函数体

解析完毕

预解析过程代码

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

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

预解析结果

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

执行过程

打印变量 fn 的值 function fn() { console.log(2) }

变量 fn 赋值为10，将原来关联的函数覆盖

打印变量 fn 的值 10

执行完毕

执行过程代码

console.log(fn)

fn = 10

console.log(fn)

GPU云服务器云服务器浅谈javascript 预解析 var预解析 javascript示例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101470.html

2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

dailybird 2019-08-01 18:28 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

hellowoody 2019-08-22 14:02 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

wwolf 2019-08-29 14:21 评论0 收藏0
浅谈JavaScript作用域

摘要：我们在面试时，总会碰到一些奇奇怪怪的关于作用域的面试题，其实弄清楚原理，万变不离其宗，大部分的面试题都可以得姐。 showImg(https://segmentfault.com/img/bV7Cri?w=1563&h=879); 我们在面试时，总会碰到一些奇奇怪怪的关于作用域的面试题，其实弄清楚原理，万变不离其宗，大部分的面试题都可以得 ‘姐’。所以，今天我们来谈谈 JavaS...

figofuture 2019-08-22 16:00 评论0 收藏0
浅谈不同环境下的JavaScript执行机制 + 示例详解

摘要：如果没有其他异步任务要处理比如到期的定时器，会一直停留在这个阶段，等待请求返回结果。执行的执行事件关闭请求的，例如事件循环的每一次循环都需要依次经过上述的阶段。因此，才会早于执行。 showImg(https://segmentfault.com/img/bVbnY76); 概念同步任务（Synchronous）在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务 ...

wanghui 2019-08-23 15:04 评论0 收藏0