首页 技术 正文
技术 2022年11月11日
0 收藏 375 点赞 2,895 浏览 2810 个字

变量提升和函数提升的总结

  我们在学习JavaScript时,会遇到变量提升和函数提升的问题,为了理清这个问题,现做总结如下,希望对初学者能有所帮助

  我们都知道 var 声明的变量有变量提升,而 let 声明的变量和 const 声明的常量没有变量提升,但是为什么 let 声明的变量就不会变量提升呢?

首先我们得理解变量和函数的创建过程:

  变量声明 ==>变量初始化 ==>变量赋值

  函数声明 ==> 初始化 ==> 赋值

而变量提升和函数提升要完成的工作为:

  变量声明 ==> 变量初识化(undefined)

  函数声明 ==> 初始化 ==> 赋值(仅仅是赋值,并没有运行函数体)

暂时性死区的概念:

  ES6规定,如果代码区块中存在 let 和 const 命令声明的变量,这个区块对这些变量从一开始就形成了封闭作用域,直到声明语句完成,这些变量才能被访问(获取或设置),否则就会报错 ReferenceError。这在语法上称为“暂时性死区”,即代码块开始到变量声明语句完成之间的区域。通过 var 声明的变量拥有变量提升,没有暂时性死区。

  因为有暂时性死区的存在,所以 let 声明的变量和 const 声明的常量才 不能 变量提升

  

  从变量创建过程来理解:

  let 声明被提升了,但是并没有做初始化工作

  const 声明被提升,也是没有做初始化工作(const只有声明和初始化过程,没有赋值过程)

    let 和 const 都没有提升所要满足的工作,所以就无法提升

  var 的声明被提升,初始化被提升

  function 的声明、初始化、和赋值都被提升

var 声明的变量提升(声明、初始化都被提升,但是赋值没有提升)

  实例  

  console.log(a)  // undefined

  var a = ‘hello world’

  console.log(a)  // ’hello world’

  实际执行过程如下

  var a

  console.log(a)  // undefined

  a = ‘hello world’

  console.log(a)  // ’hello world’

function 声明的函数提升(声明、初始化、赋值都提升了)

  实例  

  fn()  // ’hello world’

  function fn() { console.log(‘hello world’) }

  fn()  // ’hello world’

  实际执行过程如下

  function fn() { console.log(‘hello world’) }  // 注意:此时函数体并没有运行

  fn()  // ’hello world’

  fn()  // ’hello world’

既有 var 声明的变量提升,又有 function 声明的函数提升

  实例

  变量名和函数名不同名  

  console.log(a)  // undefined

  fn()

  var a = 100

  console.log(a)  // 100

  function fn() {

    console.log(a)  // undefined

    var a = 10

    console.log(a)  // 10

   }

  var a = 200

  console.log(a)  // 200

  实际执行过程如下 

  function fn() {

    console.log(a)  

    var a = 10

    console.log(a)   

   }

  var a  (全局变量)

  var a  (局部变量)

  console.log(a)  // undefined

  fn()  // undefined  10

  a = 100

  console.log(a)  // 100

  a = 200

  console.log(a)  // 200

  变量名和函数名同名 

  情况一:变量由 函数类型 变为 基本数据类型(如 Number)

  var a = 100

  console.log(a)  // 100

  a()  // 报错(TypeError:a is not a function)

  function a() {

    console.log(‘hello world’) 

   }

  实际执行过程如下

  function a() {

    console.log(‘hello world’) 

   }

  var a  // 用 var 重新声明了变量 a,但此时变量 a 指向的还是函数体本身,值未改变

  a = 100  //  重新给 a 赋值为 100,a 的值发生了改变,由函数类型变为了number类型

  console.log(a)  // 100

  a()  // 报错:此时 a 已经不是函数 a 了

 

  情况二:变量重新赋值,但未立即改变变量的值

  console.log(a)  // a(){ console.log(‘hello world’)}  即 a 函数本身

  a()  // ’hello world’

  var a = 100

  var a = 200

  var a = 300

  console.log(a)  // 300

  function a() {

    console.log(‘hello world’) 

   }

  实际执行过程如下

  function a() {

    console.log(‘hello world’)

   }

  var a  //  此时虽然重新声明了 a 变量,但是并没有改变 a 的值,此时的 a 还是个函数

  console.log(a)  // a(){ console.log(‘hello world’)}  即 a 函数本身

  a = 100  // 重新给 a 变量赋值 100

  a = 200  // 重新给 a 变量赋值 200

  a = 300  // 重新给 a 变量赋值 300

  console.log(a)  // 100(此时变量 a 已经由 函数类型变为 基本数据类型number,且值为 100)

  a()  // 报错:此时 a 已经不是函数 a 了

用 let 定义的变量和用 const 定义的常量 没有提升

用 let 定义的变量

  在变量定义之前使用改变量 会报错

  console.log(a)  // 报错  Cannot access ‘a’ before initialization

  let a = 10

  

  在变量定义之后使用改变量 才能正常运行

  let a = 10  

  console.log(a)  // 10

总结:

  1. 用 var 定义的变量有变量提升,用 function 定义的函数有函数提升

  2. 函数提升优先级高于变量提升,即优先执行函数提升

  3. let 定义的变量和 const 定义的常量不会提升

  4. 重复用 var 定义的同一个变量是合法的,如果重复的声明有初始值,那就赋值;如果没有初始值,那么它不会对变量原来保存的值不会产生影响

  5. 不能用 let 重复定义同一个变量,会造成错误

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,951
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,477
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,290
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,107
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,739
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,773