当前位置: 首页 > news >正文

预加载机制及变量提升

JS的解析器会做两部分的工作:
1)预解析 | 预解析仓库 = “找东西“(找VAR , FUNCTION 以及参数)
2)逐行解读代码

预解析时,var 、function 会发生我们通常所说的变量提升

// 变量提升 var function
console.log(a)
// a() {
//   console.log('this is a2')
// }

var b=3
a()
console.log(a)
var a = 1
function a() {
  console.log('this is a1')
}
console.log(a)// 1
function a(a, b) {
  console.log('this is a2')
  console.log(a)
  console.log(b)
}
console.log(a)// 1
var a = 2
console.log(a)// 2


log:
/**
ƒ a(a, b) {
  console.log('this is a2')
  console.log(a)
  console.log(b)
}
this is a2
undefined
undefined
ƒ a(a, b) {
  console.log('this is a2')
  console.log(a)
  console.log(b)
}
1
1
2
{a: 3}
 */

/**
 * 预解析步骤:
 * 1.首先解析到第七行var a, 在预解析器中定义 a =undefined
 * 2.解析到a1, 将解析器中 a = a() {
      console.log('this is a1')
    }
    3.解析到a2, 将解析器中 a = a() {
      console.log('this is a2')
    }
    4.解析到var a= 2,由于a =undefined, 所以a = a() {
      console.log('this is a2')
    }
 */复制代码

预解析步骤:

1.首先解析到第七行var a, 在预解析器中定义 a =undefined

2.解析到a1, 将解析器中 a = a() {

console.log('this is a1')

}

3.解析到a2, 将解析器中 a = a() {

console.log('this is a2')

}

4.解析到var a= 2,由于a =undefined, 所以a = a() {

console.log('this is a2')

}


// 一是不存在变量提升:


// 二是let声明的变量不能重复声明,否则会报错


// var i = 1;

// var i = 2;

// console.log(i)//2

// let i = 1;

// let i = 2;

// console.log(i)//报错



// 三是新增了块级作用域。


for(var i = 0; i < 5; i++){

}

console.log(i) // 5

for(let i = 0; i < 5; i++){ // 这个i只能在这个for循环内使用

}

console.log(i) // 报错:i is not defined

// 一个常见的闭包问题就可以用let来解决。



// for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域

for (let i = 0; i < 3; i++) {

let i = 'abc';

console.log(i);

}

// abc

// abc

// abc

// 上面代码正确运行,输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域,有各自单独的作用域。


for(var i = 0; i < 5; i++){

setTimeout(function(){

console.log(i)

}, 1000)

}

// 这个可谓是经典的闭包题了,结果是一次性输出5个5。如何让它输出01234呢,ES5我们用IIFE来解决。


for(var i = 0; i < 5; i++){

(function(e){

setTimeout(function(){

console.log(e)

}, 1000)

})(i)

}

// 将代码放在一个IIFE中创建了一个独立的作用域,传入i,这样就实现了对i的暂存。(详细可参看我的另一篇关于闭包的文章。)

// ES6就可以用let来解决了。


for(let i = 0; i < 5; i++){

setTimeout(function(){

console.log(i)

}, 1000)

}

// 其实JS引擎解析上述代码中的let,就是按照ES5的规范来解析的。即创建一个IIFE传入i.

// console.log(b)

// let b = 2

// for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域

for (let i = 0; i < 3; i++) {

let i = 'abc';

console.log(i);

}

// abc

// abc

// abc

// 上面代码正确运行,输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域,有各自单独的作用域。



const c = {}

c.a=3

console.log(c)


相关文章:

  • proguaid混淆maven工程问题总结
  • 图片编辑类
  • tcpdump
  • UGUI
  • mysql -- 优化之ICP(index condition pushdown)
  • 感恩送书第1期:2019年快来了,感谢各位网友,送《Spring 5开发大全》
  • 用工作单元(IUnitOfWork)带给我们的是什么?
  • EF架构~将数据库注释添加导入到模型实体类中
  • PHP生成随机字符串
  • JMeter接口测试中文乱码问题总结
  • loongson官方PMON使用
  • 系统单据号生成规则推荐
  • Saltstack-4:数据系统grains
  • 脚踏七彩Scala.js,进军前端娱乐圈
  • Failed to lookup provider 'shm' for 'slotmem': is mod_slotmem_shm loaded??
  • 【399天】跃迁之路——程序员高效学习方法论探索系列(实验阶段156-2018.03.11)...
  • electron原来这么简单----打包你的react、VUE桌面应用程序
  • IDEA常用插件整理
  • JAVA多线程机制解析-volatilesynchronized
  • leetcode讲解--894. All Possible Full Binary Trees
  • Mybatis初体验
  • PHP面试之三:MySQL数据库
  • Redis 懒删除(lazy free)简史
  • webgl (原生)基础入门指南【一】
  • windows下使用nginx调试简介
  • 阿里研究院入选中国企业智库系统影响力榜
  • 道格拉斯-普克 抽稀算法 附javascript实现
  • 极限编程 (Extreme Programming) - 发布计划 (Release Planning)
  • 利用阿里云 OSS 搭建私有 Docker 仓库
  • 如何实现 font-size 的响应式
  • 如何学习JavaEE,项目又该如何做?
  • PostgreSQL之连接数修改
  • Spring第一个helloWorld
  • #、%和$符号在OGNL表达式中经常出现
  • #Linux(帮助手册)
  • #我与Java虚拟机的故事#连载09:面试大厂逃不过的JVM
  • $.ajax,axios,fetch三种ajax请求的区别
  • $NOIp2018$劝退记
  • (2022 CVPR) Unbiased Teacher v2
  • (C语言)fgets与fputs函数详解
  • (C语言)输入自定义个数的整数,打印出最大值和最小值
  • (TOJ2804)Even? Odd?
  • (笔记)Kotlin——Android封装ViewBinding之二 优化
  • (附源码)springboot工单管理系统 毕业设计 964158
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理 第13章 项目资源管理(七)
  • (十二)python网络爬虫(理论+实战)——实战:使用BeautfulSoup解析baidu热搜新闻数据
  • (五)大数据实战——使用模板虚拟机实现hadoop集群虚拟机克隆及网络相关配置
  • (转载)利用webkit抓取动态网页和链接
  • .FileZilla的使用和主动模式被动模式介绍
  • .NET CORE 第一节 创建基本的 asp.net core
  • .net core使用ef 6
  • .NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖
  • .NET学习全景图
  • ?php echo ?,?php echo Hello world!;?
  • @DataRedisTest测试redis从未如此丝滑