【ES6】面试官最爱问你的let和const的命令

前言： 只有学的多，你才能追溯到事物的本身！正所谓，知己知彼，才能百战不殆！

es6 你需要知道的！
1，ECMAScript 和 javaScript 的关系：前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。
2，node与javascript的关系：Node.js 是 JavaScript 的服务器运行环境（runtime）。
3，Babel 转码器：将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。

let命令

1, 作用的范围：let声明的变量只在它所在的代码块有效。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

总结：在代码块之外调用let和var ,let会报错 var会返回到正确值，在for循环里面，let就相当于局部变量 ，let i=10，则这个i只能在循环里面用，出了循环之后就返回错误。而var就相当于全局变量 var i 在for循环之外也可以使用.

2, let不存在变量提升

1, var 存在变量提升，变量在声明之前使用的话，值为undefined
2, let不存在变量提升，变量在声明之前使用的话，会报错

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

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

3,暂时性死区

情况1：当块级作用域存在let命令，它所声明的变量就绑定到当前的块级作用域，不在受外部影响

var tmp = 123;//var声明全局作用域

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;//let绑定了块级作用域
}

注：存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

情况2：let命令声明变量tmp之前，都属于变量tmp的“死区”

f (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}
注：在没有声明之后就开始使用会返回错误

情况3：只要变量在还没有声明完成前使用，就会报错。
在变量x的声明语句还没有执行完成前，就去取x的值，导致报错”x 未定义“。

// 不报错
var x = x;

// 报错
let x = x;
// ReferenceError: x is not defined

总结：暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

4.不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。
函数内部不能重新声明参数

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}
eg:(函数内部)
function func(arg) {
  let arg;
}
func() // 报错

function func(arg) {
  {
    let arg;
  }
}
func() // 不报错

块级作用域

为什么需要块级作用域？

1，内层变量可能会覆盖外层变量。

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined
讲解：
函数内部经过变量提升则为：
var tmp;
console.log(tmp)//为undefined

2，用来计数的循环变量泄露为全局变量

var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5

ES6新增了块级作用域：

1，let具有块级作用域的作用域

function f1() {
  let n = 5;
  if (true) {

    let n = 10;
  }
  console.log(n); // 5
}

2，ES6 允许块级作用域的任意嵌套。

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 报错
}}}};

注：每一层都是一个单独的作用域，但是第四层无法读取第五层的内部变量

{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};

注：内层作用域可以定义外层作用域的同名变量。

块级作用与函数声明

函数能不能在块级作用域之中声明？

ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。
但浏览器为了兼容旧代码所以支持在块级作用域中声明函数 可运行 不会报错
ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。用法和let一样

注：ES6对于块级作用域内函数声明：
1，允许在块级作用域内声明函数。
2，函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
3，同时，函数声明还会提升到所在的块级作用域的头部。

eg:
/ 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

对于块级作用域：
1，块级作用域内部，优先使用函数表达式

eg:
// 块级作用域内部的函数声明语句，建议不要使用
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 块级作用域内部，优先使用函数表达式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

2，需要大括号，负责没有大括号，JavaScript 引擎就认为不存在块级作用域。

eg：
// 第一种写法，报错
if (true) let x = 1;

// 第二种写法，不报错
if (true) {
  let x = 1;
}

const命令

1,const声明一个只读的常量。一旦声明，常量的值就不能改变。
2,const来说，只声明不赋值，就会报错。
3,const的作用域与let命令相同：只在声明所在的块级作用域内有效。
4,const命令声明变量不提升
5，声明之前就使用，结果会报错
6，const和let一样不可重复声明

特殊部分：

const不可指向另一个对象，负责就会报错
总结：const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。

const foo = {};

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

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only
常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。

ES6声明变量的6种方法：

1，var命令
2，function命令
3，let命令
4，const命令
5，import命令
6，class命令

顶层对象的属性：

1，顶层对象，在浏览器环境指的是window对象
2，在 Node 指的是global对象（ES5 之中，顶层对象的属性与全局变量是等价的。）

由于window对象有实体含义，指的是浏览器的窗口对象以及和全局变量挂钩造成了很多问题
做出如下改变：
1，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；
2，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。

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

let b = 1;
window.b // undefined
注：全局变量a由var命令声明，所以它是顶层对象的属性；全局变量b由let命令声明，所以它不是顶层对象的属性，返回undefined。

globalThis属性

JavaScript 语言存在一个顶层对象，它提供全局环境（即全局作用域），所有代码都是在这个环境中运行。但是，顶层对象在各种实现里面是不统一的

1, 浏览器里面，顶层对象是window，但 Node 和 Web Worker 没有window。
2, 浏览器和 Web Worker 里面，self也指向顶层对象，但是 Node 没有self。
3, Node 里面，顶层对象是global，但其他环境都不支持。

注：同一段代码为了能够在各种环境，都能取到顶层对象，现在一般是使用this变量，但是有局限性。

1，全局环境中，this会返回顶层对象。但是，Node.js 模块中this返回的是当前模块，ES6 模块中this返回的是undefined。
2，函数里面的this，如果函数不是作为对象的方法运行，而是单纯作为函数运行，this会指向顶层对象。但是，严格模式下，这时this会返回undefined。
3，不管是严格模式，还是普通模式，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');
};

注：在语言标准的层面，引入globalThis作为顶层对象。也就是说，任何环境下，globalThis都是存在的，都可以从它拿到顶层对象，指向全局环境下的this。

完结

本篇文章只是自己学习笔记，如对你有帮助可关注我哦！

相信我能带给你的：会有不一样的惊喜！

最近很喜欢一首歌：想见你想见你想见你

关于我：

好物分享：
html5 看这一篇就够了！！！！.
零基础入门前端《一》.
零基础入门前端《二》.
零基础入门前端《三》.

我是凉心姑娘，欢迎来我的博客！你的一个赞👍，是我写下去的动力！