IMAGINE'S BLOG IMAGINE'S BLOG
首页
  • 原生JS

    • JavaScript
  • 前端框架扩展

    • Vue
    • React
    • UI组件库
  • HTML
  • CSS
  • 浏览器
  • 分类
  • 标签
  • 归档
  • 技术文档
  • GitHub相关
  • Nodejs
关于
  • 网站
  • 友情链接
GitHub (opens new window)

peng

平平无奇的web前端开发一枚
首页
  • 原生JS

    • JavaScript
  • 前端框架扩展

    • Vue
    • React
    • UI组件库
  • HTML
  • CSS
  • 浏览器
  • 分类
  • 标签
  • 归档
  • 技术文档
  • GitHub相关
  • Nodejs
关于
  • 网站
  • 友情链接
GitHub (opens new window)
  • JavaScript

    • javascript 之 this 指向问题
    • JS循环遍历方法
    • 前端常用公共方法工具类
    • JS声明提升
      • 产生因素
      • 编译阶段
      • 变量声明提升
      • 函数声明提升
      • 函数声明和变量声明提升的优先顺序
      • 局部与全局变量
    • JS合并数组对象中key值相同的数据
    • 数组对象求和
    • 前端路由实现
    • Promise(一):Promise 认识
    • Promise(二):手动实现一个 Promise
    • Promise(三):拓展方法实现
    • JS forEach踩坑
    • ES6-ES12 特性
    • async/await
    • JavaScript 数组去重
    • js对象排序
    • js if/else 语句优化策略
    • js深拷贝
    • 正则表达式校验
    • js笛卡尔积
    • Axios 封装
  • 框架扩展

  • 前端乱炖
  • JavaScript
peng
2022-09-02
目录

JS声明提升

# 产生因素

函数在执行时会先创建当前的执行上下文环境。其中产生声明提升的因素有以下两点:

  • 变量定义
  • 函数声明

# 编译阶段

当 js 引擎开始解析脚本时,这时代码还没有运行,会先给代码中的变量、函数声明设置内存,并暂时将变量赋值为 undefined,函数先声明为可使用;为后面即将执行的代码做准备,这个阶段就是编译阶段。

比如 var a = 1; JS 引擎会将其看作两个声明:var a; 和 a = 1;。第一个定义声明在编译阶段进行,第二个赋值声明会被留在原地等待执行阶段。


# 变量声明提升

只有 var 声明的变量存在变量提升;let、const 会形成块级作用域,造成暂时性死区。

console.log(a); // undefined
var a = 1;

console.log(fun); // undefined
var fun = function () {};
1
2
3
4
5

上面例子都会会打印出 'undefined',变量声明提升会将变量声明提升到作用域顶部,但只会提升声明部分,不会提升赋值部分,实际提升后结果如下:

var a;
console.log(a);
a = 1;

var fun;
console.log(fun);
fun = function () {};
1
2
3
4
5
6
7

# 函数声明提升

func();
function func() {}
1
2

上例不会报错,因为 ‘函数声明提升’,即将函数声明提升(整体)到作用域顶部(注意是函数声明,不包括函数表达式),实际提升后结果同下:

function func() {}
func();
1
2

# 函数声明和变量声明提升的优先顺序

  var func = 1
  console.log(typeof(func))  // number
  function func () {}

  -----

  console.log(typeof(func))  // function
  function func () {}
  var func = 1
1
2
3
4
5
6
7
8
9

上两例将分别输出 ‘number’、'function',原因是 函数声明提升优先于变量提升,函数声明会被变量赋值影响,但不会被变量声明影响,实际提升后结果如下:

function func () {}
var func = 10
console.log(typeof(func))

-----

function func () {}
var func
console.log(typeof(func))
func = 10
1
2
3
4
5
6
7
8
9
10

# 局部与全局变量

a = 1;
function func() {
  window.a = 2;
  console.log(a); // undefined
  var a;
  console.log(window.a); // 2
}
func();
1
2
3
4
5
6
7
8

上例将会分别打印出 'undefined'、'5',第一处为局部变量,第二处为全局变量,实际提升后结果如下:

function func() {
  var a;
  window.a = 2;
  console.log(a); // undefined
  console.log(window.a); // 2
}
var a;
a = 1;
func();
1
2
3
4
5
6
7
8
9
#JavaScript
上次更新: 2022/09/06, 10:30:04
前端常用公共方法工具类
JS合并数组对象中key值相同的数据

← 前端常用公共方法工具类 JS合并数组对象中key值相同的数据→

最近更新
01
Axios 封装
09-06
02
MySQL数据库常用操作
09-06
03
解决element表格数据量过大导致页面渲染缓慢、卡顿问题
09-06
更多文章>
Theme by Vdoing | Copyright © 2020-2024 peng | IMAGINE
image | imgloc.com
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式