var、let、const声明过程

分类 JavaScript 标签 JavaScript 评论:
  1. var、let、const声明过程
  2. var
  3. let
  4. const
  5. 扩展

var、let、const声明过程

先抛出结论：
js使用var、let、const声明变量的时候，会有两个步骤，一个是提升变量声明，一个是初始化（初始化为undefined）。

  • var 会提升变量的申明和初始化
  • let 会提升变量申明，但不会提升初始化
  • const 和 let 一样，但是const不能像var、let那样使用var a、let b这样初始化，只能const c = 1这种同时申明并初始化

var

{
  console.log('结果：' + x);
  var x = 1;
  console.log('结果：' + x);
}

输出结果：

结果：undefined
结果：1

{
  console.log('结果：' + x);
  var x;
}

输出结果：

结果：undefined

从结果不难看出，var的声明被提升了，并初始化为了undefined，然后再将1赋值给x

let

{
  console.log('结果：' + x);
  let x = 1;
  console.log('结果：' + x);
}

输出结果：

Uncaught ReferenceError: Cannot access 'x' before initialization

{
  console.log('结果：' + x);
  let x;
}

输出结果：

Uncaught ReferenceError: Cannot access 'x' before initialization

从结果可以看出，let和var结果不一样，正是因为let仅仅提升了变量的声明，并不会提升初始化，所以这里在let之前访问x会报错，在初始化之前无法访问x,这里有一个官方叫法，叫暂存死区（temporal dead zone）

const

{
  console.log('结果：' + x);
  const x = 1;
  console.log('结果：' + x);
}

输出结果：

Uncaught ReferenceError: Cannot access 'x' before initialization

{
  console.log('结果：' + x);
  const x;
}

输出结果：

Uncaught SyntaxError: Missing initializer in const declaration

从结果可以看出，const和let都有暂存死区问题，但是报错信息不同，const在声明的同时必须赋值；

扩展

在浏览器环境中，var定义的全局变量都属于window对象，而let定义的全局变量，部署于window对象

var attr1 = 'tom'
console.log(window.attr1); // tom

在浏览器环境中，let定义的全局变量，不属于window对象

var attr2 = 'jerry'
console.log(window.attr2); // undefined
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 289211569@qq.com

©2016-2023 Daryl