关于let、var和const

前言

letconst命令是ES6新增的命令,用来声明变量,这两个变量跟ES5中的var有许多不同,同时letconst也有不一样的地方。并且在ES6中也添加了块级作用域来解决ES5中作用域存在的问题。

作用域

官方解释是:“一段程序代码中所用到的名字并不总是有效/可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。”

举个例子来形象的解析下上面的定义:

function fn () {
   // 声明变量
   var name = 'marry'
   
   // 定义内部函数
   function innerFn () {
       console.log(name) // 可以访问到name变量
   }
}
console.log(name) // undefined

ES5作用域分为全局作用域和函数作用域。

  1. 全局作用域
var a = 0;

if (true) {
  var b = 1;
}

console.log(b); // 输出1

上面代码中,在全局中定义变量a,称为全局变量,在任何一个地方都可以访问到变量a。

  1. 局部作用域

局部作用域也可以称之为函数作用域。

function fn () {
  var c = 2;
}

console.log(c); // c is not defined
  1. 作用域链

Function对象有一个仅供 JavaScript引擎存取的内部属性。

这个属性就是[[Scope]][[Scope]]包含了一个函数被创建的作用域中对象的集合。这个集合被称为函数的作用域链,它决定了哪些数据能被函数访问。
关于作用域链,局部作用域可以访问到全局作用域中的变量和方法,而全局作用域不能访问局部作用域的变量和方法。

var a = 0;

function fn () {
  var b = 1;
  console.log(a); // 输出 1
}

// 全局作用域并不能访问 fn 函数中定义的 b 变量
console.log(b); // b is not defined

fn();

块级作用域

ES6新增块级作用域,块作用域由 { }包括,函数内部,if语句和 for语句里面的{ }也属于块作用域。

块级作用域的出现是为了解决ES5中作用域的问题:

  1. 内层变量可能覆盖外层变量
  2. 用来计数的循环变量泄露为全局变量。
var tmp = new Date();
function f() {
  console.log(tmp); // 想打印外层的时间作用域
  if (false) {
    var tmp = 'hello world'; // 这里声明的作用域为整个函数
  }
}
f(); // undefined

var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]); // i应该为此次for循环使用的变量
}
console.log(i); // 5 全局范围都可以读到

块级作用域

通过var声明的变量存在变量提升的特性

// var 的情况
console.log(foo); // 输出undefined
{ var foo = 2; }
console.log(foo) // 2  

// 运行时,真正运行的是下面的代码
var = foo
console.log(foo); // 输出undefined
{ foo = 2; }
console.log(foo) // 2  
  • JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升。
  • 对于var命令来说,JavaScript的单独的{}区块不构成单独的作用域。但是在JavaScript语言中,单独使用区块并不常见。

除此之外,在for循环中:

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代码中,变量i是var命令声明的,在全局范围内都有效,所以全局只有一个变量i。

let 和 const

let 和 const 命令

ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

  1. let在{}中声明的变量只在代码块中有效(形成块级作用域)
{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1
  1. 不存在变量提升(let和const)

let命令所声明的变量一定要在声明后使用,否则报错。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
  1. 重复声明报错(let和const)
let value = 2;
let value = 2; //Uncaught SyntaxError: Identifier 'value' has already been declared
  1. 变量不会挂在顶层对象下面(let和const)

浏览器环境顶层对象是: window;
node环境顶层对象是: global

var a = 1;
// 如果在 Node环境,可以写成 global.a
// 或者采用通用方法,写成 this.a
window.a // 1

let b = 1;
window.b // undefined

const命令需要注意点

  1. 一旦声明,必须马上赋值
let p; var p1; // 不报错
const p3 = 'abc'
const p3; // 报错 没有赋值
  1. 一旦声明值就不能改变
const p = '不能改变';
p = '报错' //  Assignment to constant variable
  1. const本质是变量指针不能变
const foo = {};

// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only

const所说的一旦声明值就不能改变,实际上指的是:变量指向的那个内存地址所保存的数据不得改动

  • 对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。
  • 对于复合类型的数据(主要是对象和数组),变量指向的内存地址,地址保存的是一个指针,const只能保证指针是固定的(总是指向同一个地址),它内部的值是可以改变的(不要以为const就安全了!)

暂时性死区

只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

暂时性死区和不能变量提升的意义在于:

为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。

本章内容总结

var 和 let、const的区别

  1. 块级作用域
  2. 不存在变量提升
  3. 暂时性死区
  4. 不可重复声明
  5. let、const声明的全局变量不会挂在顶层对象下面

const需要注意点

  1. let可以先声明稍后再赋值,而const在 声明之后必须马上赋值,否则会报错。
  2. const 简单类型一旦声明就不能再更改,复杂类型(数组、对象等)指针指向的地址不能更改,内部数据可以更改。

参考文章

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容