let 和 const 命令

作者 : 开心源码 本文共5218个字,预计阅读时间需要14分钟 发布时间: 2022-05-13 共153人阅读

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
  1. 允许在块级作用域内公告函数
  2. 函数公告相似于var,即会提升到全局作用域或者函数作用域的头部
  3. 函数公告还会提升到所在的块级作用域的头部

浏览器的 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对象

  1. 浏览器里面,顶层对象是window,但 Node 和 Web Worker 没有window。

  2. 浏览器和 Web Worker 里面,self也指向顶层对象,但是 Node 没有self。

  3. 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 命令

发表回复