var, let, const用法及区别

1、变量

  • 定义变量的三种方式:var let const
    注意:必须声明 use strict 后才能使用let声明变量

2、三者的区别

主要区别在于:作用域(Scope),即变量可以使用范围的定义,如果超出此范围就无法使用,也会报错

  • 作用域
  • 函数:function test(){ }
  • 区块:function test(){ },if{ },for(){ }
  • var
  • 作用域:函数(function)
  • 示例
function test(){
      var x = 10;
}
console.log(x); // 错误信息:ReferenceError: x is not defined
  • let
  • 作用域:区块(block)
  • 示例
if (true) {
       let x = 10;
 }
 console.log(x); // 错误信息:ReferenceError: x is not defined
  • const
  • 作用域:区块(block)
  • 示例
const x = 10;
x = 20;  // 错误信息:TypeError: Assignment to constant variable.
  • Note:

    • const作用域和let一样,只是let定义变量,const定义常量
    • 重复声明、重新赋值一个常量都会报错
  • 综合例子

let x = 1; // 作用域:区块外(全域)
if (true) {
    let x = 2; // 作用域:区块内
    console.log(x); // 显示 2
}
console.log(x); // 显示 1

3、var的bug

  • 举例:
for (var i = 0; i < 3; i++) {
   setTimeout(function () {
     console.log(i) }, 1000);
}
//输出 3 3 3
  • 分析:循环本身及三次 timeout 回调均共享唯一的变量 i,当循环结束执行时,i 的值为3,所以当第一个 timeout 执行时,调用的 i 也为 3,如果用let定义循环,多次循环保持了一个闭包,那么每个闭包将捕捉一个循环变量的不同值作为副本,而不是所有闭包都捕捉循环变量的同一个值。所以示例中,可以通过将var替换为let修复bug

4、分别在什么情况下使用

  • const 适用于赋值后不会再做修改的情况
  • ** let 适用于赋值后还会修改的情况,它标志着这个变量只能被用在所定义的块作用域**
  • var 定义全局变量或函数级变量时可使用,但存在BUG尽量避免使用

5、总结

  • 通过var定义的变量会提升,而letconst进行的声明不会提升
  • let声明的变量作用域是外层块,而不是整个外层函数
  • let,const在未声明之前是不能使用的,var可以使用
  • 优先选择顺序const>let>var
 i;
 var i=9;
 console.log(i);   // 9
 i;
 let i=9;
 console.log(i);   // "ReferenceError: i is not defined

因为在JavaScript代码中用var变量的定义语句(不包括赋值语句)会被提前到所有代码之前执行,所以不会造成由于变量未定义而出错的结果

参考文章推荐:
var、let、const 区别
JavaScript 变量宣告 var let const
第1章 var let const

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容