js预编译(全局预编译/函数预编译)

这篇具有很好参考价值的文章主要介绍了js预编译(全局预编译/函数预编译)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.预编译

预编译是上下文创建之后, js代码执行前的一段时期, 在这个时期, 会对js代码进行预处理。

2.全局预编译

全局上下文创建后,会生成变量对象VO:var变量-》函数-》同名函数覆盖变量名

  1. VO首先寻找变量声明,将var声明的变量作为VO对象的属性名,值为undefined。
  2. 然后寻找函数声明,属性值为函数本身
  3. 如果函数名与变量名冲突,函数声明会将变量声明覆盖。
function a(b, c) {
  console.log(b);          	
  var b = 0
  console.log(b);		
  var b = function () {
    console.log('bbbb')
  }	
  console.log(c);		
  console.log(b);				
}
a(1)

全局预编译分析:

        // 第一步:寻找变量声明var,将变量名作为属性名,将值设置为undefined
        VO {
            a: undefined
        }
        // 第二步:寻找函数声明,属性值为函数本身
        // 第三步:函数名和变量名冲突,函数声明会覆盖变量声明
        VO {
            a: undefined-> function a() { }
        }
//执行结果: function a() { }, 100

3.函数预编译

函数上下文创建后,会生成变量对象AO:函数预编译: var变量-》形参-》实参赋值给形参-》函数-》同名函数覆盖变量声明

  1. 寻找变量声明, 变量名作为AO对象的属性名, 属性值置为 undefined
  2. 寻找形参, 形参名作为AO对象的属性名, 属性值置为 undefined
  3. 将实参的值赋予形参, 即替换 AO对象中形参的属性值
  4. 寻找函数声明, 函数名作为AO对象的属性名, 属性值为函数本身
  5. 如果函数名与变量名冲突, 函数声明会将变量声明覆盖 

注意:函数预编译时,如果有判断条件里面的变量声明,无论判断条件真假,都会进行预编译。

如下:这里函数里面的var tmp也会进行预编译

js预编译(全局预编译/函数预编译),JS高级,js预编译,AO,VO,全局预编译,函数预编译

function a(b, c) {
  console.log(b);          	
  var b = 0
  console.log(b);		
  var b = function () {
    console.log('bbbb')
  }	
  console.log(c);		
  console.log(b);				
}
a(1)

函数预编译解析:

        // 第一步:寻找函数中的变量声明,将变量名作为属性名,将值设置为undefined
         AO : {
            b: undefined,
        }
        // 第二步:寻找形参
        AO : {
            b: undefined,
            c: undefined,
        }
        // 第三步:将实参传给形参(b变成了1)
        AO : {
            b: undefined -> 1,
            c: undefined,
        }

        // 第四步:寻找函数声明(此处没有)
        // 第五步:如果函数名与变量名冲突, 函数声明会将变量声明覆盖(此处没有)
        // 执行结果:1 ,0,(将函数赋值给b),undefined, b的函数体

4.全局预编译和函数预编译整个流程

  1. 全局预编译和局部预编译都有时,是先进行全局预编译,预编译完成后会逐行执行,比如一些变量赋值,打印;
  2. 函数预编译是在函数被调用前才进行预编译,编译完成后再开始执行;
  3. 执行是首先在自己作用域里面查找属性,有属性没有赋值直接返回undefined ,没有定义属性从全局查找,查找不到返回undefined

5.预编译面试题

        // 面试题
        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)
        }
        fn(1, 2)

预编译解析: 文章来源地址https://www.toymoban.com/news/detail-726036.html

        // 函数预编译: var变量-》形参-》实参赋值给形参-》函数-》同名函数覆盖变量声明
        AO:{
            a: undefined->1->funA,
            d: undefined,
            b: undefined-》funB,
            c: 2->funC
        }
        // 执行结果:funA,123,funC,undefined,undefined,funB,funC

到了这里,关于js预编译(全局预编译/函数预编译)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Express.js】全局错误处理

    在前面几节里,我们处理异常的方法都是手动在可能引发异常的地方捕捉错误,这固然是必要的,可以有针对性得处理异常,但很多时候,有许多潜在的异常,有一句话叫永远不要相信输入的数据,你永远都不知道什么时候可能会以什么方式触发某些阴间异常从而造成系统崩

    2024年02月10日
    浏览(37)
  • 原生JS设置并获取全局变量

    原生JS设置并获取全局变量,干货版。 一共有且只有以下五种方式 1、通过window对象设置和获取全局变量; 通过window对象设置和获取全局变量。window对象是所有全局变量的拥有者,它是JavaScript的最顶层对象。我们可以通过window对象来设置和获取全局变量,例如: 2、使用ES6新

    2024年02月08日
    浏览(30)
  • 【Express.js】全局变量与配置文件

    通常我们会将一些项目的配置信息写在一个文件内,然后读入内存并使用。在 express 中使用全局变量有多种方案,我们一起看看有哪些常用的方案 拷贝第一节的HelloWorld项目 准备一个Resp.js模块: 在 global 对象中挂载我们需要全局共享的量,比如我们想要挂载一个全局的confi

    2024年02月16日
    浏览(27)
  • 【第2章 Node.js基础】2.4 Node.js 全局对象(二) process 对象

    process对象是一个全局对象,提供当前Node.js 进程信息并对其进行控制。通常用于编写本地命令行程序。 process 对象是 EventEmitter 类的实例,因此可以使用事件的方式来处理和监听 process 对象的各种事件。以下是一些常用的 process 对象事件: ‘exit’:当进程即将退出时触发。可

    2024年02月05日
    浏览(29)
  • 记录--封装一个通过js调用的全局vue组件

    在使用vue项目编写的时候,不可避免的会碰到需要时js api来调用组件进行显示的情况 例如饿了么element ui 的 Notification 通知、Message 消息提示等组件 虽然已经提供了,但是由于api的限制,我们只能通过特定的参数来有限的改变组件的样式 之前的文章说过可以使用 new Vue() 、

    2024年02月09日
    浏览(43)
  • webpack如何把dist.js中某个模块js打包成一个全局变量,使得在html引入dist.js后可以直接访问

    webpack可以通过使用expose-loader来将模块中的一个js文件暴露为全局可以访问的变量。下面是一个示例代码: 1、安装expose-loader npm install expose-loader --save-dev 2、webpack.config.js配置文件 值得注意的是:我在本地使用16.14.2版本的node打包时会报一些警告,升级node18.12.1未报警告,警告

    2024年01月24日
    浏览(35)
  • C/C++编译器全局优化技术:全局优化是针对整个程序进行的优化,包括函数之间的优化

    编程语言的设计和实现与人类心理学有着密切的联系。C++编译器全局优化技术在这个领域中是一个重要的例子。在这篇博客中,我们将从心理学的角度来探讨C++编译器全局优化技术的原理和实践。 人类大脑的神经网络在处理信息时,会自动进行优化以提高效率。我们的思维和

    2023年04月26日
    浏览(65)
  • JS 高级用法

    在学习JavaScript的过程中,我们必须了解一些基础知识,如变量、函数、类、循环等。这些基础知识是我们使用JavaScript的基础。但是,在日常的业务开发中,我们需要一些更高级的技巧来更好地解决问题。 通过阅读本文,你将了解到JS的高级知识点以及实际应用技巧,如高级

    2024年02月16日
    浏览(23)
  • 关于css中设置变量用于全局Css或者Js中使用

    一、配置变量css文件 src/styles/variables.scss 二、在组件中使用变量

    2024年02月07日
    浏览(30)
  • 只使用JS怎么给静态页面网站添加站内全局搜索功能?

    💂 个人网站:【 海拥】【神级代码资源网站】【办公神器】 🤟 基于Web端打造的:👉轻量化工具创作平台 💅 想寻找共同学习交流的小伙伴,请点击【全栈技术交流群】 静态页面通常由HTML、CSS 和 JavaScript 等静态文件组成,这些文件在服务器上不会动态生成或修改,所以加

    2024年02月05日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包