前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js预解析

js预解析

作者头像
切图仔
发布2022-09-08 16:25:50
2.7K0
发布2022-09-08 16:25:50
举报
文章被收录于专栏:生如夏花绚烂

情景一

当我们打印一个未定义的变量时

代码语言:javascript
复制
console.log(num)

抛出异常num未定义

代码语言:javascript
复制
Uncaught ReferenceError: num is not defined

情景二

当我们运行下面代码时

代码语言:javascript
复制
console.log(num)
var num = 10

输出undefined 为什么这里会返回undefined

情景三

代码语言:javascript
复制
    fn();//正常执行
    function fn(){
        console.log('hello')
    }
    fn();//正常执行

由于是命名函数所有不管上面还是下面都可以正常实现

情景四

代码语言:javascript
复制
fun();//Uncaught TypeError: fun is not a function
    var fun = function(){
        console.log('hello')
    }
    fun();//正常执行

第一个fun()执行出错了

情景二和情景四到底有什么问题? 这里主要是因为JS的预解析造成的

js引擎运行分为两步:预解析和代码执行

预解析

js引擎会把js里面所有的var 还有function 提升到当前作用域的最前面 预解析分为变量预解析(变量提升)和函数预解析(函数提升)

  1. 变量预解析:把所有的var变量提升到当前作用域的最前面,这里只提升变量声明,不提升赋值操作 这里我们就可以解释情景二出现undefined的情况 由于变量提升情景二的代码其实最后是这样执行的
代码语言:javascript
复制
// console.log(num)
    // var num = 10
    var num;
    console.log(num)//undefined
    num=10;

当然情景四也同理

2. 把所有的函数声明提升到当前作用域的最前面 这也解释了情景三的执行是没有异常的

代码执行

按照代码顺序从上到下执行

预解析案例

下面代码执行的结果是什么?

代码语言:javascript
复制
fn();
    console.log(c)
    console.log(b)
    console.log(a)
    function fn(){
        var a = b = c = 9;
        console.log(a)
        console.log(b)
        console.log(c)
    }

答案

代码语言:javascript
复制
9
9
9
9
9
Uncaught ReferenceError: a is not defined

分析

代码语言:javascript
复制
/*分析如下*/
    //1.函数提升
    function fn(){
        /*1.1变量提升*/
        var a;
        a = b = c = 9;
        // 相当于var a = 9 b = 9 c = 9
        //b和c没有var 变成了全局变量
        console.log(a)
        console.log(b)
        console.log(c)
    }
    //2.代码执行
    fn();
    console.log(c)//9
    console.log(b)//9
    console.log(a)//全局没有a变量 所有显示未定义
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-08-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档