原文地址:http://www.cnblogs.com/liuhe688/p/5845561.html

let和const有很多相似之处,先说一说let吧。

1. let添加了块级作用域

我们知道,JavaScript是没有块级作用域的,如果在块内使用var声明一个变量,它在代码块外面仍旧是可见的:

if (true) {
var foo = 3;
}
console.log(foo); // 3 for (var i = 0; i < 9; i++) {
var j = i;
}
console.log(i); // 9
console.log(j); // 8

可以看到,在上面代码中,我们虽然是在块内声明的变量,但代码块执行完毕后,依然可以访问到相应的变量,说明JavaScript中没有块级作用域的。

而ES6规范给开发者带来了块级作用域,如果把var换成let命令,我们就可以获得一个块级变量:

if (true) {
let foo = 3;
}
console.log(foo); // Uncaught ReferenceError for (let i = 0; i < 9; i++) {
let j = i;
}
console.log(i); // Uncaught ReferenceError
console.log(j); // Uncaught ReferenceError

从上面代码可以看出,块内声明的变量,块外是不可见的,如果试图引用一个块内用let声明的变量,就会引发一个异常。

2. let约束了变量提升

在JavaScript中,变量提升是很常见的,例如下面这段代码:

function hoistVariable() {
console.log('foo:', foo); // foo: undefined
var foo = 3;
} hoistVariable();

在代码正式执行之前,编译器将会对代码进行预编译分析阶段,在这个阶段,当前作用域中的变量和函数,将被提升到作用域的顶部。(注:目前的JavaScript引擎大都对源代码进行了编译处理,并且预编译和提升是抽象出来的概念。)

经过预编译之后的代码逻辑如下所示:

function hoistVariable() {
var foo;
console.log('foo:', foo); // foo: undefined
foo = 3;
} hoistVariable();

ES6中的let命令规范了变量的声明,约束了变量提升,也就是说,我们必须先声明,然后才可以使用,下面者段代码将会报错:

function nonHoistingFunc() {
console.log('foo:', foo); // Uncaught ReferenceError
let foo = 3;
} nonHoistingFunc();

正确的使用方式是,永远将变量声明置于当前作用域顶部:

function nonHoistingFunc() {
let foo = 3;
console.log('foo:', foo); // 3
} nonHoistingFunc();

需要注意的是,不管是var还是let,预编译过程中,都发生了变量提升,但与var不同的是,ES6对let进行了约束,其规定,在真正的词法变量声明之前,以任何方式访问let变量都是不允许的,所以从开发人员角度来看,let禁止了变量提升这一行为。

关于这一点,大家可以参考ES6规范中“let和const变量的声明”。

3. let有暂时性死区

只要在块内存在let命令,那么这个变量就绑定到了当前块作用域,不再受外部变量的影响,下面代码将会引发一个错误:

var foo = 3;

if (true) {
foo = 5; // Uncaught ReferenceError
let foo;
}

ES6规定如果块内存在let命令,那么这个块就会成为一个封闭的作用域,并要求let变量先声明才能使用,如果在声明之前就开始使用,它并不会引用外部的变量。

如果把这里的let替换成var,由于不会形成块级作用域,变量的声明其实是与第一行重复了,相当于下面这段代码:

var foo;

foo= 3;

if (true) {
foo = 5;
}

4. let禁止重复声明变量

如上面所述,使用var可以重复声明变量,但let不允许在相同作用域内重复声明同一个变量,下面的代码会引发错误:

// SyntaxError
function func() {
let foo = 3;
var foo = 5;
} // SyntaxError
function func() {
let foo = 3;
let foo = 5;
} // SyntaxError
function func(arg) {
let arg;
}

5. let不会成为全局对象的属性

我们在全局范围内使用var声明一个变量时,这个变量会自动成为全局对象的属性(在浏览器和Node.js环境下,这个全局对象分别是window和global),但let是独立存在的变量,不会成为全局对象的属性:

var a = 3;
console.log(window.a); // 3 let b = 5;
console.log(window.b); // undefined

6. 最后:const命令

以上let所介绍的规则均适用于const命令,不同的是,const声明的变量不能重新赋值,也是由于这个规则,const变量声明时必须初始化,不能留到以后赋值,所以下面的代码是不合法的:

const a = 3;

a = 5;   // Uncaught TypeError: Assignment to constant variable

const b; // Uncaught SyntaxError: Missing initializer in const declaration

以上就是let和const的内容,可以看出,let和const大大改进了ES5的变量机制,使得JS更严谨和规范,随着ES6支持程度的提高,我们应该开始习惯let和const的使用了。

var/let/const区别何在??(转载)的更多相关文章

  1. let、var、const区别(表格比较)

    let.var.const区别(表格比较): 区别项 let var const 作用域 块级作用域 全局作用域或函数作用域 块级作用域 是否有变量提升 无 有 无 是否可重复声明 不可 可以 不可 ...

  2. var let const区别

      var let const 可否同一作用域下声明同名变量 可以 不可以 不可以 声明的变量是否会挂载到window上 会 不会 不会 声明变量是否存在变量提升 存在 不存在(变量必须声明之后才能使 ...

  3. 深度理解js中var let const 区别

    首先要理解js中作用域的概念 作用域:指的是一个变量的作用范围 1.全局作用域 直接写在script中的js代码,在js中,万物皆对象,都在全局作用域,全局作用域在页面打开时创建,在全局作用域中有一个 ...

  4. 在vue中let var 和const 区别

    let和const   使用方法: (1).有没有感觉到在     javascript  使用var会发生变量提升,即脚本开始运行时, 变量已经存在了,但是没有值,所以会输出undefined. 而 ...

  5. JavaScript—var lef const区别

    今天刚刚学JavaScript 因为以前学过.学起来也就轻松.今天在练习.流程控制语句的时候,用WebStrom 写的时候 var 声明变量的时候 下面老是有一条白线.开始以为是开发环境有问题 然后, ...

  6. 小程序里let和var以及const区别

    在JavaScript中有三种声明变量的方式:var.let.const. var:声明全局变量,换句话理解就是,声明在for循环中的变量,跳出for循环同样可以使用. [JavaScript] 纯文 ...

  7. Learn-JavaScript-with-MDN 系列文章: 01. var & let & const 对比

    Learn-JavaScript-with-MDN 系列文章: 01. var & let & const 对比 var & let & const 区别 https: ...

  8. JavaScript var, let, const difference All In One

    JavaScript var, let, const difference All In One js var, let, const 区别 All In One 是否存在 hoisting var ...

  9. js var & let & const All In One

    js var & let & const All In One js var & let & const 区别对比 var let const 区别 是否存在 hois ...

随机推荐

  1. linux系统调用之用户管理

    getuid 获取用户标识号 setuid 设置用户标志号 getgid 获取组标识号 setgid 设置组标志号 getegid 获取有效组标识号 setegid 设置有效组标识号 geteuid ...

  2. 线程相关函数(1)-pthread_create(), pthread_join(), pthread_exit(), pthread_cancel() 创建取消线程

    一. pthread_create() #include <pthread.h> int pthread_create(pthread_t *thread, const pthread_a ...

  3. 字符输入流 FileReader

    package cn.lideng.demo3; import java.io.FileNotFoundException; import java.io.FileReader; public cla ...

  4. consul介绍

    consul 是一个支持多数据中心分布式高可用,用于服务发现和配置共享的工具. consul与其它工具的不同,官方介绍如下: https://www.consul.io/intro/vs/index. ...

  5. 虚拟机centos无法连接外网时怎么处理

    1. 首先查看service 如果没有启动请启动这2个服务. 2. 在虚拟机那重启网络端口 ifdown ens33 ifup ens33

  6. 使用yum源的方式单机部署MySQL8.0.13

    使用yum源的方式单机部署MySQL8.0.13 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 基本上开源的软件都支持三种安装方式,即rmp方式安装,源码安装和二进制方式安装.在 ...

  7. Hbase学习01

    1.1  快速介绍 1.1.1 快速入门,单节点Hbase 本小节介绍单节点独立HBase的设置. 独立实例包含所有HBase守护进程 - Master,RegionServers和ZooKeeper ...

  8. 面向对象【day08】:异常处理(六)

    本节内容 1.概述 2.异常梳理 3.异常梳理流程图 4.异常大全 5.自定义异常 一.概述 异常处理是当程序出错了,但是我们又不想让用户看到这个错误,而且我在写程序的时候已经预料到了它可以出现这样的 ...

  9. 【转】C语言中的符号优先级

    转自: http://blog.csdn.net/huangblog/article/details/8271791 虽然在日常使用中,添加括号来明确规定运算符优先级是一种常识,但毕竟学校考试就喜欢考 ...

  10. http 动态路由

    main.go package main import ( "fmt" "http2/comm" "http2/test" "ne ...