博客
关于我
一、预编译(2021/4/23)
阅读量:321 次
发布时间:2019-03-04

本文共 1249 字,大约阅读时间需要 4 分钟。

预编译阶段的功能分析与步骤解析

函数fn的定义与执行过程

函数fn的定义如下:

function fn(a, c) {    console.log(a);    var a = 123;    console.log(a);    console.log(c);    function a() {   }    if (false) {        var d = 678;    }    console.log(d);    console.log(b);    var b = function() {   }; // 函数表达式,不是函数声明,所以不会覆盖    console.log(b);    function c() {   }    console.log(c);};

预编译阶段的步骤说明

  • 预编译阶段的主要作用域构建
  • 预编译过程涉及以下几个关键步骤:

    1.1 AO对象的创建

    预编译开始时,引擎首先会创建一个AO(Abstract Object)对象,作为当前函数的变量对象,供后续操作使用。

    1.2 参数和变量的处理

    在参数和变量处理阶段,引擎会将函数的参数和变量进行统一处理,将实参与形参相互替代。具体来说,形参会被实参替代,而函数的参数对象会被销毁。

    1.3 函数声明的处理

    在函数声明处理阶段,引擎会处理函数的声明,并将函数对象存储在AO对象中。需要注意的是,函数声明会覆盖之前的变量声明。这一点在代码中可以看到,var a = 123 被函数声明 function a() 替代。

    1.4 变量的解析

    在变量解析阶段,引擎会处理变量的声明和初始化。例如,var d = 678 会被解析,并将d的值初始化为678。

    1.5 函数表达式的处理

    对于函数表达式的处理,引擎会直接将函数存储到AO对象中,而不会覆盖之前的变量声明。例如,var b = function() {} 中的b是一个函数表达式,存储在AO对象中,不会覆盖之前的变量声明。

    1.6 表达式的执行

    最后,在表达式执行阶段,引擎会将所有待执行的表达式依次执行。例如,console.log(a) 会在预编译阶段进行处理,但实际执行会在执行阶段。

    AO对象的结构分析

    预编译完成后,AO对象的结构如下:

    AO: {    a: undefined, 1    function a() {   }    c: undefined, 2    function c() {   }    d: undefined    b: undefined}

    函数执行过程中的变量赋值

    在函数fn的执行过程中,变量的赋值顺序如下:

  • a 的初始值
  • a 被重新赋值为123
  • c 的值被访问
  • 函数a被声明
  • d 被初始化为678
  • b 的值被访问
  • b 被赋值为一个函数表达式
  • b 的值被访问
  • 函数c被声明
  • c 的值被访问
  • 通过以上步骤可以看出,预编译阶段在处理函数声明和变量声明时会遵循一定的规则,确保函数和变量的正确性。

    转载地址:http://auch.baihongyu.com/

    你可能感兴趣的文章
    npm升级以及使用淘宝npm镜像
    查看>>
    npm发布包--所遇到的问题
    查看>>
    npm发布自己的组件UI包(详细步骤,图文并茂)
    查看>>
    npm和yarn清理缓存命令
    查看>>
    npm和yarn的使用对比
    查看>>
    npm如何清空缓存并重新打包?
    查看>>
    npm学习(十一)之package-lock.json
    查看>>
    npm安装 出现 npm ERR! code ETIMEDOUT npm ERR! syscall connect npm ERR! errno ETIMEDOUT npm ERR! 解决方法
    查看>>
    npm安装crypto-js 如何安装crypto-js, python爬虫安装加解密插件 找不到模块crypto-js python报错解决丢失crypto-js模块
    查看>>
    npm安装教程
    查看>>
    npm报错Cannot find module ‘webpack‘ Require stack
    查看>>
    npm报错Failed at the node-sass@4.14.1 postinstall script
    查看>>
    npm报错fatal: Could not read from remote repository
    查看>>
    npm报错File to import not found or unreadable: @/assets/styles/global.scss.
    查看>>
    npm报错unable to access ‘https://github.com/sohee-lee7/Squire.git/‘
    查看>>
    npm版本过高问题
    查看>>
    npm的“--force“和“--legacy-peer-deps“参数
    查看>>
    npm的安装和更新---npm工作笔记002
    查看>>
    npm的常用配置项---npm工作笔记004
    查看>>
    npm的问题:config global `--global`, `--local` are deprecated. Use `--location=global` instead 的解决办法
    查看>>