众所周知,在 Javascript 中就有 3 个关键字可以声明变量,分别是 varletconst.

varECMAScript 的所有版本中都可以使用,而 constlet 只能在 ECMAScript6 及更晚的版本中使用。

那么这 3 个关键字 都有哪些异同点及注意事项吗?

我们从俩个方面看问题:

1、变量作用域在哪里?

函数体为 函数作用域, 任意一个 {} 内为一个 块级作用域

  • var 声明的变量,在函数作用域 中生效,所以只有在函数中声明的变量属于局部变量,在代码块中声明的依然为全局变量。
function test() {
  var message = 'hi';   // 函数体内声明,为局部变量,函数体外无法引用
  console.log(message)  // 'hi'
}
console.log(message)  // 报错
if(true){
  var message = 'hi';   // 代码块中声明,为全局变量,任何地方都可以引用
  console.log(message)  // 'hi'
}
console.log(message)  // 'hi'
  • letconst 声明的变量,在块级作用域 中生效,所以只在当前代码块中引用。
function test(){
  let message = 'hi'; // 函数块中声明,函数体外无法引用
  const message1 = 'hello';  // 函数块中声明,函数体外无法引用
  console.log(message)  // 'hi'
  console.log(message1)  // 'hello'
}
console.log(message)  // 报错
console.log(message1)  // 报错
if(true){
  let message = 'hi';   // 代码块中声明,代码块外无法引用
  const message1 = 'hello';  // 代码块中声明,代码块外无法引用
  console.log(message)  // 'hi'
  console.log(message1)  // 'hello'
}
console.log(message)  // 报错
console.log(message1)  // 报错

因为 ECMAScript变量 属于松散类型,支持省略关键字直接定义的方式,

function test(){
  message = 'hi';
}
console.log(message);  // message = window.message = 'hi'

需要特别注意:

1、出于代码的可维护性上,不推荐省略关键字直接定义变量的方式;

2、在严格模式下,不支持省略关键字直接定义变量的方式;

3、var 可以重复声明,letconst 不可重复声明;

4、在全局作用域下,var 声明的变量会成为 window 对象的属性, letconst 不会;

3、定义在 window 的全局变量,不推荐使用 var 声明 或 省略关键字直接定义,推荐使用 window.message = 'hi' 的方式

2、是否存在变量提升?

Javascript 里的变量是一个松散的类型,松散类型变量的特点是变量定义时候不需要指定变量的类型,变量在运行时候可以随便改变数据的类型,但是这种特性并不代表 Javascript 变量没有类型,当变量类型被确定后javascript的变量也是有类型的。

  • var 声明的变量会自动提升到函数作用域顶部;
var message = 'hi';
function test(){
  console.log(message);   // undefined
  var message = 'hello';
}
test();  

是不是结果很令人费解,为什么打印的不是 'hi',而是 undefined ?

其实就是因为代码会被解释为:

var message = 'hi';
function test(){
	var message;    // 自动提升到函数作用域顶部,先声明
  console.log(message);  
  message = 'hello';  // 再赋值;
}
test();   // 输出 undefined

代码解析后,函数的局部作用域下变量 message 被重新定义了,在预加载时候 message 的作用域范围也就被框定了,message 变量不再属于全局变量,而是属于函数作用域,只不过赋值操作是在运行期执行(这就是为什么 Javascript 语言在运行时候会改变变量的类型,因为赋值操作是在运行期进行的),所以使用 message 变量时候,message 变量在局部作用域里没有被赋值,只有栈区的标示名称,因此结果就是 undefined 了

  • let 申明的变量不会提升。

  • const 声明的变量,声明时必须同时初始化赋值,且不支持修改,所以也不会提升。

    注意:const 声明不可修改的限制只适用于它指向的变量的引用。如果该变量为对象,那么修改这个对象内部的属性是合法的。

    以下代码是没有问题的

    const message = {};
    message.type = 'error' 
    

总结(最佳实践)

  • 不使用 var
  • const 优先,let 次之
  • 在 window 上添加属性,直接使用 window['属性'] = 属性值

Q.E.D.


一个热心肠的正经前端程序猿~