Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ES6-let const #19

Open
OPY-bbt opened this issue Nov 20, 2019 · 4 comments
Open

ES6-let const #19

OPY-bbt opened this issue Nov 20, 2019 · 4 comments

Comments

@OPY-bbt
Copy link
Owner

OPY-bbt commented Nov 20, 2019

No description provided.

@OPY-bbt
Copy link
Owner Author

OPY-bbt commented Nov 20, 2019

let

块作用域

{
  let a = 10;
  var b = 1;
}
a; // ReferenceError: a is not defined.
b;

babel 之后

"use strict";

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

@OPY-bbt
Copy link
Owner Author

OPY-bbt commented Nov 20, 2019

不存在变量名提升

var 和 let、const 的不同之处在于后两者是在编译时才初始化,所以会存在死区。

暂时性死区(temporal dead zone)

var tmp = 123;
if (true) {
  tmp = 1; // referenceError
  let tmp;
}

值得注意的typeof运算符在碰到死区时,也会报referenceError,如果一个变量没有被声明,反而不会报错

不允许重复声明

为什么需要块级作用域

var tmp = new Date();

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

f();

块级作用域内声明函数

函数声明类似于var,即会提升到全局作用域或函数作用域的头部。

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function
// 浏览器的 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

@OPY-bbt
Copy link
Owner Author

OPY-bbt commented Nov 20, 2019

const

const A = 1;
A = 2;

// after babel
"use strict";

function _readOnlyError(name) { throw new Error("\"" + name + "\" is read-only"); }

var A = 1;
A = (_readOnlyError("A"), 2);

@OPY-bbt
Copy link
Owner Author

OPY-bbt commented Nov 20, 2019

顶层对象

浏览器里是window,Node里是global。ES5中顶层对象和全局变量是等价的。
从ES6开始顶层对象和全局变量脱钩。但是为了保持兼容性。var、function声明的还是顶层对象属性。let、const、class声明的全局变量不属于顶层对象的属性。

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

let b = 1;
window.b // undefined

值得注意的是,babel没有实现这个特性

let b = 1;
console.log(window.b);

// after babel
"use strict";

var b = 1;
console.log(window.b);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant