ES6语法总汇—— let 和 const

自建博客文章链接:http://www.heblogs.cn/articleDetails/60fa1d88b69f2b0a1af64714

ECMAScript 6简介

ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

特性1:顶层对象的属性区别

var声明的变量会挂载在window上,而let和const声明的变量不会
顶层对象,在浏览器环境指的是window对象,在Node指的是global对象。ES5之中,顶层对象的属性与全局变量是等价的。下面代码中,顶层对象的属性赋值与全局变量的赋值,是同一件事。

var a = 1;
console.log(a,window.a);    // 1 1

let b = 10;
console.log(b,window.b);    // 10 undefined

const c = 100;
console.log(c,window.c);    // 1 undefined

特性2:块级作用域

let 和 const 所声明的变量,只在let 和 const命令所在的代码块内有效。

if (true) {
  var a = 10
  let b = 100;
}

console.log(a); // 10
console.log(b); // 报错ReferenceError
if (true) {
  var a = 10
  const PI = 3.1415;
}

console.log(a); // 10
console.log(PI ); // 报错ReferenceError

特性3:不存在变量提升

let 和 const 不像var那样会发生“变量提升”现象。所以,变量一定要在声明后使用,否则报错。

console.log(a); // 输出undefined
console.log(b); // 报错ReferenceError

var a= 10;
let b= 100;
console.log(a); // 输出undefined
console.log(PI); // 报错ReferenceError

var a= 10;
const PI = 3.1415;

特性4:暂时性死区

只要块级作用域内存在 let 和 const 命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。
ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
在代码块内,使用 let 和 const 命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称TDZ)。

var a = 100;
if (true) {
  // TDZ开始
  a= 'abc'; // ReferenceError
  console.log(a); // ReferenceError
  let a = 123; // TDZ结束
  console.log(a); // 123
}
var a = 100;
if (true) {
  // TDZ开始
  a= 'abc'; // ReferenceError
  console.log(a); // ReferenceError
  const a = 123; // TDZ结束
  console.log(a); // 123
}

特性5:不允许重复声明

let不允许在相同作用域内,重复声明同一个变量。const声明一个只读的常量。一旦声明,常量的值就不能改变。下面代码表明改变常量的值会报错。

// 报错
function () {
  let a = 10;
  var a = 1;
}
// 报错
function () {
  let a = 10;
  let a = 1;
}
const PI = 3.1415;
console.log(PI);// 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

特性6:const一旦声明变量,就必须立即初始化

const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。下面代码表示,对于const来说,只声明不赋值,就会报错。

const foo;// SyntaxError: Missing initializer in const declaration

补充:global 对象

具体参考:https://www.cnblogs.com/jjq-exchange/p/10105411.html

ES5的顶层对象,本身也是一个问题,因为它在各种实现里面是不统一的。
浏览器里面,顶层对象是window,但 Node 和 Web Worker 没有window。
浏览器和 Web Worker 里面,self也指向顶层对象,但是Node没有self。
Node 里面,顶层对象是global,但其他环境都不支持。
同一段代码为了能够在各种环境,都能取到顶层对象,现在一般是使用this变量,但是有局限性。

全局环境中,this会返回顶层对象。但是,Node模块和ES6模块中,this返回的是当前模块。
函数里面的this,如果函数不是作为对象的方法运行,而是单纯作为函数运行,this会指向顶层对象。但是,严格模式下,这时this会返回undefined。
不管是严格模式,还是普通模式,new Function(‘return this’)(),总是会返回全局对象。但是,如果浏览器用了CSP(Content Security Policy,内容安全政策),那么eval、new Function这些方法都可能无法使用。
综上所述,很难找到一种方法,可以在所有情况下,都取到顶层对象。下面是两种勉强可以使用的方法。

// 方法一
(typeof window !== 'undefined'? window: (typeof process === 'object' &&typeof require === 'function' &&typeof global === 'object')? global: this);

// 方法二
var getGlobal = function () {
  if (typeof self !== 'undefined') { return self; }
  if (typeof window !== 'undefined') { return window; }
  if (typeof global !== 'undefined') { return global; }
  throw new Error('unable to locate global object');
};
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hhua.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值