变量提升

字数 670阅读 165

这里说的变量提升指的是使用var声明的变量

变量提升也可以说是“变量声明前置”,就是把函数里面用到的变量声明提升到前面,赋值步骤在书写的位置进行

是否使用var定义变量的区别

function foo () {
  var a = 'var-a'
  b = 'var-b'
}

foo()
console.log(b) // 'var-b'
console.log(a) // ReferenceError: a is not defined
  • 使用var定义的变量是函数级变量,只在函数内能访问到。
  • 不使用var定义的变量是全局变量,等同于window.b = 'var-b'
  • 变量提升先于代码执行

块级作用域和函数级作用域

  • 使用传统的var定义的变量执行的是函数级作用域

描述一下就是:在函数中使用var定义的变量都会将变量声明放在函数的第一行,变量赋值在书写的位置赋值。

  • 使用let定义变量将执行块级作用域,即{}内范围
function test () {
  var varvars = 'varvars'
  let letvars = 'letvars'
 
  if(true){
     var varvars = '11'
     let letvars = '22'
  }
  
  console.log('test varvars:' + varvars)
  console.log('test letvars:' + letvars)
}

test()

等同于:

function test () {
  var varvars = undefined
  let letvars = 'letvars'
  
  varvars = 'varvars'
 
  if(true){
     varvars = '11'
     let letvars = '22'
  }
  
  console.log('test varvars:' + varvars) // 1
  console.log('test letvars:' + letvars) // letvars
}

test()

结合函数执行过程说明

当程序进入执行的上下文(代码真正执行之前),变量对象(VO)已经包含的属性是:

  • 函数的所有形参

创建由变量名称对应值组成的一个变量对象,如果名称没有对应的值时,默认值为undefined

  • 所有函数声明

创建由函数名函数对象组成的一个变量对象,如果函数名已存在则完全替换

  • 所有变量声明(var声明)

创建由名称对应值组成的一个变量对象,如果名称没有对应的值时,默认值为undefined
,如果函数名已存在则完全替换

示例及优先级说明

function test (name) {
  var name = undefined  // 这里的定义将覆盖形参name和函数name, 声明提升,默认为undefined
  function name () { // 这里定义的name函数将覆盖形参name
    console.log('hello')
  }
  
  name = 'inner' // 这里的定义将覆盖形参name和函数name
  console.log(name) // 输出 inner
}


test('outer')

或者:

function test (name) {
  // 1. 形参: {name: 'outer'}
  // 2. 函数: {name: function () { // ... }} 覆盖上面的同名定义
  // 3. 变量: {name: 'inner'} 覆盖上面的同名定义,多个var赋值取最后一次赋值
  
  var name = 'inner'  // 这里的定义将覆盖形参name和函数name, 声明提升,这里的定义将覆盖形参name和函数name
  function name () { // 这里定义的name函数将覆盖形参name
    console.log('hello')
  }

  console.log(name) // 输出 inner
}


test('outer')

注意:

  • 不管var声明放在何处,结果都是一样的
  • 多次var声明同一个变量,代码不会报错,声明前置,原地赋值
  • 如果使用let声明,则不可定义已存在的变量名(包括 函数名和形参), 返回错误
SyntaxError: Identifier 'name' has already been declared

总结

  • var定义的变量函数级作用域
  • var定义的变量会有变量声明提升的现象,但是在书写位置赋值
  • let定义的变量块级作用域,不会出现变量声明提升的现象,在书写的位置声明及赋值,变量名称不能和 [形参名称/函数名称] 重复。
  • 生效优先级:变量名(var定义) > 函数名 > 形参名
  • let不会出现同名的问题,但是函数名 > 形参名的情况会存在

推荐阅读更多精彩内容