let 和 const 命令
image.png
let命令,const命令
块级作用域,顶层对象的属性,globalThis对象
let命令式用来公告变量,用法与var相似
let公告的变量,只在命令所在的代码块中有效
{ let a = 1; var b = 2;}a // 无效,报错 ReferenceError: a is not defined.b // 显示 2
let 公告的变量只在它所在的代码块中有效
实例:
for (let i = 0; i < 10; i++) { // ...}console.log(i);// ReferenceError: i is not defined
var a = [];for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); };}a[6](); // 10
i指向的就是全局的i
所有数组a的成员里面的i,指向的都是同一个i
var a = [];for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); };}a[6](); // 6
公告的变量仅在块级作用域内有效
JavaScript 引擎
for循环
设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
for (let i = 0; i < 3; i++) { let i = 'abc'; console.log(i);}// abc// abc// abc
函数内部的变量i与循环变量i不在同一个作用域
不存在变量提升
let不存在变量提升,var会发生变量提升
var命令
var命令会发生“变量提升”现象,即变量可以在公告之前使用,值为undefined。
let命令改变了这种语法行为,它所公告的变量肯定要在公告后使用,否则报错。
// var 的情况console.log(foo); // 输出undefinedvar foo = 3;// let 的情况console.log(bar); // 报错referenceErrorlet bar = 3;
暂时性死区:
let和const命令存在暂时性死区
只需块级作用域内存在let命令
它所公告的变量就绑定了这个区域
不受外部的影响
var tmp = 123;if (true) { tmp = 'abc'; // ReferenceError let tmp;}
暂时性死区
if (true) { // TDZ开始 tmp = 'abc'; // ReferenceError console.log(tmp); // ReferenceError let tmp; // TDZ结束 console.log(tmp); // undefined tmp = 123; console.log(tmp); // 123}
“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。
typeof x; // ReferenceErrorlet x;
假如一个变量没有被公告,使用typeof反而不会报错。
typeof undeclared_variable // "undefined"
假如没有let不会错,有let就会报死区
function bar(x = y, y = 2) { return [x, y];}bar(); // 报错
有些“死区”比较隐蔽,不太容易发现。
x已经公告了
function bar(x = 2, y = x) { return [x, y];}bar(); // [2, 2]
var的行为不同
// 不报错var x = x;// 报错let x = x;// ReferenceError: x is not defined
暂时性死区的本质
只需一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到公告变量的那一行代码出现,才可以获取和使用该变量。
不允许重复公告
let不允许在相同作用域内,重复公告同一个变量。
// 报错function func() { let a = 10; var a = 1;}// 报错function func() { let a = 10; let a = 1;}
function func(arg) { let arg;}func() // 报错function func(arg) { { let arg; }}func() // 不报错
块级作用域
为什么需要块级作用域?
ES5 只有全局作用域和函数作用域
内层变量可能会覆盖外层变量
var tmp = new Date();function f() { console.log(tmp); if (false) { var tmp = 'hello world'; }}f(); // undefined
变量提升,导致内层的tmp变量覆盖了外层的tmp变量。
用来计数的循环变量泄露为全局变量。
var s = 'hello';for (var i = 0; i < s.length; i++) { console.log(s[i]);}console.log(i); // 5
变量i只用来控制循环,循环结束后,它并没有消失
露成了全局变量
ES6的块级作用域
function f1() { let n = 5; if (true) { let n = 10; } console.log(n); // 5}
外层代码块不受内层代码块的影响
ES6 允许块级作用域的任意嵌套
{{{{ {let insane = 'Hello World'} console.log(insane); // 报错}}}};
内层作用域可以定义外层作用域的同名变量。
{{{{ let insane = 'Hello World'; {let insane = 'Hello World'}}}}};
块级作用域的出现
匿名立即执行函数表达式不再必要了
// IIFE 写法(function () { var tmp = ...; ...}());// 块级作用域写法{ let tmp = ...; ...}
块级作用域与函数公告
ES5 规定,函数只能在顶层作用域和函数作用域之中公告,不能在块级作用域公告。
// 情况一if (true) { function f() {}}// 情况二try { function f() {}} catch(e) { // ...}
根据 ES5 的规定都是非法的。
浏览器没有遵守规定,为了兼容以前的旧代码,所以能运行,不会报错。
支持在块级作用域之中公告函数
ES6 引入了块级作用域
function f() { console.log('I am outside!'); }(function () { if (false) { // 重复公告一次函数f function f() { console.log('I am inside!'); } } f();}());
ES5 中运行,会得到“I am inside!”
“变量提升”
实际运行的代码如下
// ES5 环境function f() { console.log('I am outside!'); }(function () { function f() { console.log('I am inside!'); } if (false) { } f();}());
ES6 浏览器
在 ES6 浏览器中,都会报错
// 浏览器的 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
- 允许在块级作用域内公告函数
- 函数公告相似于var,即会提升到全局作用域或者函数作用域的头部
- 函数公告还会提升到所在的块级作用域的头部
浏览器的 ES6 环境中
实际运行
// 浏览器的 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
// 块级作用域内部的函数公告语句,建议不要使用{ let a = 'secret'; function f() { return a; }}// 块级作用域内部,优先使用函数表达式{ let a = 'secret'; let f = function () { return a; };}
写成函数表达式,而不是函数公告语句。
ES6 的块级作用域必需有大括号
// 第一种写法,报错if (true) let x = 1;// 第二种写法,不报错 块级作用域成立if (true) { let x = 1;}
严格模式
// 不报错'use strict';if (true) { function f() {}}// 报错'use strict';if (true) function f() {}
const命令
const公告一个只读的常量。一旦公告,常量的值就不能改变。
改变常量的值会报错
const一旦公告变量,就必需立即初始化
只公告不赋值,就会报错
只在公告所在的块级作用域内有效
if (true) { const MAX = 5;}MAX // Uncaught ReferenceError: MAX is not defined
const命令公告的常量是不提升,存在暂时性死区,只能在公告的位置后面使用。
if (true) { console.log(MAX); // ReferenceError const MAX = 5;}
不可重复公告
var message = "Hello!";let age = 25;// 以下两行都会报错const message = "Goodbye!";const age = 30;
本质
const本质是指向的内存地址
指向的那个内存地址所保存的数据不得改动
复合类型的数据
指向的数据结构是不是可变的,就完全不能控制了
const foo = {};// 为 foo 增加一个属性,可以成功foo.prop = 123;foo.prop // 123// 将 foo 指向另一个对象,就会报错foo = {}; // TypeError: "foo" is read-only
const a = [];a.push('Hello'); // 可执行a.length = 0; // 可执行a = ['Dave']; // 报错
假如真的想将对象冻结,应该使用Object.freeze方法。
const foo = Object.freeze({});// 常规模式时,下面一行不起作用;// 严格模式时,该行会报错foo.prop = 123;
一个将对象彻底冻结的函数
var constantize = (obj) => { Object.freeze(obj); Object.keys(obj).forEach( (key, i) => { if ( typeof obj[key] === 'object' ) { constantize( obj[key] ); } });};
公告变量
import命令和class命令
var命令和function命令
let和const命令
顶层对象的属性
在浏览器环境指的是window对象
在 Node 指的是global对象
window.a = 1;a // 1a = 2;window.a // 2
ES5 之中,顶层对象的属性与全局变量是等价的。
window对象有实体含义,指的是浏览器的窗口对象,顶层对象是一个有实体含义的对象,也是不合适的。
var命令和function命令公告的全局变量,仍旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令公告的全局变量,不属于顶层对象的属性
var a = 1;// 假如在 Node 的 REPL 环境,可以写成 global.a// 或者者采用通用方法,写成 this.awindow.a // 1let b = 1;window.b // undefined
globalThis对象
浏览器里面,顶层对象是window,但 Node 和 Web Worker 没有window。
浏览器和 Web Worker 里面,self也指向顶层对象,但是 Node 没有self。
Node 里面,顶层对象是global,但其余环境都不支持。
种勉强可以使用的方法// 方法一(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作为顶层对象
学习目标:阮一峰ECMAScript 6 入门学习
若本号内容有做得不到位的地方(比方:涉及版权或者其余问题),请及时联络我们进行整改就可,会在第一时间进行解决。
请点赞!由于你们的赞同/鼓励是我写作的最大动力!
欢迎关注达叔小生的简书!
这是一个有质量,有态度的博客
博客
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » let 和 const 命令