新的ECMA代码执行描述

在执行学习JavaScript代码执行过程中,我们学习了很多ECMA文档的术语:

  • 执行上下文栈:Execution Context Stack,用于执行上下文的栈结构;
  • 执行上下文:Execution Context,代码在执行之前会先创建对应的执行上下文;
  • 变量对象:Variable Object,上下文关联的VO对象,用于记录函数和变量声明;
  • 全局对象:Global Object,全局执行上下文关联的VO对象;
  • 激活对象:Activation Object,函数执行上下文关联的VO对象;
  • 作用域链:scope chain,作用域链,用于关联指向上下文的变量查找;

在新的ECMA代码执行描述中(ES5以及之上),对于代码的执行流程描述改成了另外的一些词汇:

  • 基本思路是相同的,只是对于一些词汇的描述发生了改变;
  • 执行上下文栈和执行上下文也是相同的

词法环境(Lexical Environments)

词法环境是一种规范类型,用于在词法嵌套结构中定义关联的变量、函数等标识符;

  • 一个词法环境是由环境记录(Environment Record)和一个外部词法环境(outer Lexical Environment)组成;
  • 一个词法环境经常用于关联一个函数声明、代码块语句、try-catch语句,当它们的代码被执行时,词法环境被创建出来;

也就是在ES5之后,执行一个代码,通常会关联对应的词法环境;

  • 那么执行上下文会关联哪些词法环境呢

LexicalEnvironment和VariableEnvironment

VariableEnvironment用于处理var和function声明的标识符:

环境记录(Environment Record)

在这个规范中有两种主要的环境记录值:声明式环境记录和对象环境记录。

  • 声明式环境记录:声明性环境记录用于定义ECMAScript语言语法元素的效果,如函数声明、变量声明和直接将标识符绑定与ECMAScript语言值关联起来的Catch子句。
  • 对象式环境记录:对象环境记录用于定义ECMAScript元素的效果,例如WithStatement,它将标识符绑定与某些对象的属性关联起来。

新ECMA描述内存图

let/const基本使用

在ES5中我们声明变量都是使用的var关键字,从ES6开始新增了两个关键字可以声明变量:let、const

  • let、const在其他编程语言中都是有的,所以也并不是新鲜的关键字;
  • 但是let、const确确实实给JavaScript带来一些不一样的东西;

let关键字:

  • 从直观的角度来说,let和var是没有太大的区别的,都是用于声明一个变量;

const关键字:

  • const关键字是constant的单词的缩写,表示常量、衡量的意思;
  • 它表示保存的数据一旦被赋值,就不能被修改;
  • 但是如果赋值的是引用类型,那么可以通过引用找到对应的对象,修改对象的内容;

注意:

  • 另外let、const不允许重复声明变量;

let/const作用域提升

let、const和var的另一个重要区别是作用域提升:

  • 我们知道var声明的变量是会进行作用域提升的;
  • 但是如果我们使用let声明的变量,在声明之前访问会报错;

那么是不是意味着foo变量只有在代码执行阶段才会创建的呢?

  • 事实上并不是这样的,我们可以看一下ECMA262对let和const的描述;
  • 这些变量会被创建在包含他们的词法环境被实例化时,但是是不可以访问它们的,直到词法绑定被求值;

      // 1.var 声明的变量会进行作用域的提升
      console.log(message);
      var message = "Hello World";

      // 2.let/const声明的变量: 没有作用域提升
      // 有提前创建出来,但是不能访问
      // console.log(address)
      console.log(info);
      let address = "广州市";
      const info = {};

暂时性死区 (TDZ)

我们知道,在let、const定义的标识符真正执行到声明的代码之前,是不能被访问的

  • 从块作用域的顶部一直到变量声明完成之前,这个变量处在暂时性死区(TDZ,temporal dead zone)

使用术语 “temporal” 是因为区域取决于执行顺序(时间),而不是编写代码的位置;

      // 1.暂时性死区

      /*      
      function foo() {
        console.log(bar, baz);
        console.log("Hello World");
        console.log("你好世界");
        let bar = "bar";
        let baz = "baz";
      }
      foo(); */

      // 2.暂时性死区和定义的位置没有关系,和代码执行的顺序有关系
      /*  function foo() {
        console.log(message);
      }
      let message = "Hello World";
      foo();
      console.log(message); */

      // 3.暂时性死区形成之后,在该区域内直观标识符不能访问
      let message = "Hello World";
      function foo() {
        console.log(message);
        let message = "哈哈哈";
      }
      foo();

let/const有没有作用域提升呢?

从上面我们可以看出,在执行上下文的词法环境创建出来的时候,变量事实上已经被创建了,只是这个变量是不能被访问的。

  • 那么变量已经有了,但是不能被访问,是不是一种作用域的提升呢?

事实上维基百科并没有对作用域提升有严格的概念解释,那么我们自己从字面量上理解;

  • 作用域提升:在声明变量的作用域中,如果这个变量可以在声明之前被访问,那么我们可以称之为作用域提升;
  • 在这里,它虽然被创建出来了,但是不能被访问,我认为不能称之为作用域提升;

所以我的观点是let、const没有进行作用域提升,但是会在解析阶段被创建出来。

Window对象添加属性

我们知道,在全局通过var来声明一个变量,事实上会在window上添加一个属性:

  • 但是let、const是不会给window上添加任何属性的。

那么我们可能会想这个变量是保存在哪里呢?

     // 1.var 定义的变量是会默认添加到window上的
      /* var message = "hello world";
      var address = "广州市";
      console.log(window.message);
      console.log(window.address); */

      /* let message = "你好世界";
      const address = "广州市";
      console.log(window.message);
      console.log(window.address); */

      // 3.let/var 分别声明变量
      var message = "你好世界";
      let address = "广州市";

var的块级作用域

JavaScript只会形成两个作用域:全局作用域和函数作用域。

ES5中放到一个代码中定义的变量,外面是可以访问的:

let/const的块级作用域

在ES6中新增了块级作用域,并且通过let、const、function、class声明的标识符是具备块级作用域的限制的:

但是我们会发现函数拥有块级作用域,但是外面依然是可以访问的:

  • 这是因为引擎会对函数的声明进行特殊的处理,允许像var一样在外界直接访问

块级作用域的应用

我来看一个实际的案例:获取多个按钮监听点击

使用let来实现:

      // 1.形成的词法环境
      /* var message = "Hello World";
      var age = 19;
      function foo() {}
      let address = "广州市";

      {
        var height = 1.66;
        let title = "教师";
        let info = "了解真相";
      } */

      // 2.监听按钮的点击
      const btnEls = document.querySelectorAll("button");
      /*  for (var i = 0; i < btnEls.length; i++) {
        var btnEl = btnEls[i];
        // btnEl.index = i;
        (function(m){
          btnEl.onclick = function () {
          console.log(`点击了${m}按钮`);
        };
        }(i))
      } */

      for (let i = 0; i < btnEls.length; i++) {
        var btnEl = btnEls[i];
        btnEl.onclick = function () {
          console.log(`点击了${i}按钮`);
        };
      }

var、let、const的选择

那么在开发中,我们到底应该选择使用哪一种方式来定义我们的变量呢?

对于var的使用:

  • 我们需要明白一个事实,var所表现出来的特殊性:比如作用域提升、window全局对象、没有块级作用域等都是一些历史遗留问题;
  • 其实是JavaScript在设计之初的一种语言缺陷;
  • 当然目前市场上也在利用这种缺陷出一系列的面试题,来考察大家对JavaScript语言本身以及底层的理解;
  • 但是在实际工作中,我们可以使用最新的规范来编写,也就是不再使用var来定义变量了;

对于let、const:

  • 对于let和const来说,是目前开发中推荐使用的;
  • 我们会优先推荐使用const,这样可以保证数据的安全性不会被随意的篡改;
  • 只有当我们明确知道一个变量后续会需要被重新赋值时,这个时候再使用let;
  • 这种在很多其他语言里面也都是一种约定俗成的规范,尽量我们也遵守这种规范;

字符串模板基本使用

在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的(ugly)。

ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接:

  • 首先,我们会使用符号来编写字符串,称之为模板字符串;
  • 其次,在模板字符串中,我们可以通过 ${expression} 来嵌入动态的内容;

标签模板字符串使用

模板字符串还有另外一种用法:标签模板字符串(Tagged Template Literals)。
我们一起来看一个普通的JavaScript的函数:

如果我们使用标签模板字符串,并且在调用的时候插入其他的变量:

  • 模板字符串被拆分了;
  • 第一个元素是数组,是被模块字符串拆分的字符串组合;
  • 后面的元素是一个个模块字符串传入的内容

      const name = "why";
      const age = 15;

      // 1.基本用法
      const info = `myu name is ${name}, age is ${age}`;
      console.log(info);

      // 2.标签模板字符串的用法
      function foo(...args) {
        console.log("参数:", args);
      }

      foo("why", 13, 1.65);
      foo`my name is ${name}, age is ${age}`;

React的styled-components库

函数的默认参数

在ES6之前,我们编写的函数参数是没有默认值的,所以我们在编写函数时,如果有下面的需求:

  • 传入了参数,那么使用传入的参数;
  • 没有传入参数,那么使用一个默认值;

而在ES6中,我们允许给函数一个默认值

      // 注意默认参数是不会对 null 进行处理的
      function foo(arg1 = "我是默认值", arg2 = "我也是默认值") {
        // 默认值写法1
        // arg1 = arg1 ? arg1 : "我是默认值";

        // 默认值写法2
        // arg1 = arg1 || "我是默认值";

        // 2.严谨的写法
        // arg1 = arg1 === undefined || arg1 === null ? "我是默认值" : arg1;

        // ES6之后新增语法: ??
        // arg1 = arg1 ?? "我是默认值";

        // 3.简便的写法: 默认参数
        
        console.log(arg1);
      }

      foo(123, 321);
      foo();
      foo(0);
      foo("");
      foo(false);
      foo(null);
      foo(undefined);

函数默认值的补充

默认值也可以和解构一起来使用:

另外参数的默认值我们通常会将其放到最后(在很多语言中,如果不放到最后其实会报错的):

  • 但是JavaScript允许不将其放到最后,但是意味着还是会按照顺序来匹配;

另外默认值会改变函数的length的个数,默认值以及后面的参数都不计算在length之内了。

      // 1.有默认参数的形参尽量写在后面
      // 2.有默认参数的形参,是不会计算在length'之内(并且后面所有的参数都不会计算在length之内)
      // 3.剩余参数也是放在后面(默认参数放在剩余参数之前)
      function foo(age, name = "why", ...args) {
        console.log(name, age);
      }

      foo(17, "abc", "cba", "nba");
      
      console.log(foo.length);
      // 1.解构
      const obj = { name: "why" };
      const { name = "what" } = obj;

      // 2.函数的默认值是一个对象
      /*   function foo(obj = {name: "why" ,age:13}) {
        console.log(obj.name,obj.age);
      } */

      /*
      function foo({ name, age } = { name: "why", age: 13 }) {
        console.log(name, age);
      } */

      function foo({ name = "why", age = 13 } = {}) {
        console.log(name, age);
      }

      foo();

函数的剩余参数

ES6中引用了rest parameter,可以将不定数量的参数放入到一个数组中:

  • 如果最后一个参数是 … 为前缀的,那么它会将剩余的参数放到该参数中,并且作为一个数组;

那么剩余参数和arguments有什么区别呢?

  • 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参;
  • arguments对象不是一个真正的数组,而rest参数是一个真正的数组,可以进行数组的所有操作;
  • arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构,而rest参数是ES6中提供并且希望以此来替代arguments的;

注意:剩余参数必须放到最后一个位置,否则会报错。

函数箭头函数的补充

在前面我们已经学习了箭头函数的用法,这里进行一些补充:

  • 箭头函数是没有显式原型prototype的,所以不能作为构造函数,使用new来创建对象;
  • 箭头函数也不绑定this、arguments、super参数;

      // 1.function 定义的对象是有两个原型的
      function foo() {}
      console.log(foo.prototype); // new foo() => f.__proto__ === foo.prototype
      console.log(foo.__proto__); // foo.__proto__ === Function.prototype

      // 2.箭头函数是没有显式原型的
      var bar = () => {};
      console.log(bar.__proto__ === Function.prototype);
      
      // 没有显式原型
      /* console.log(bar.prototype);
      var b = new bar(); */

展开语法

展开语法(Spread syntax):

  • 可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开;
  • 还可以在构造字面量对象时, 将对象表达式按key-value的方式展开;

展开语法的场景:

  • 在函数调用时使用;
  • 在数组构造时使用;
  • 在构建对象字面量时,也可以使用展开运算符,这个是在ES2018(ES9)中添加的新特性;

注意:展开运算符其实是一种浅拷贝;

      // 1.基本
      const names = ["abc", "cba", "nba", "mba"];
      const str = "hello";

      const newNames = [...names, "aaa", "bbb"];
      console.log(newNames);

      function foo(name1, name2, ...args) {
        console.log(name1, name2, args);
      }

      foo(...names);
      foo(...str);

      // ES9(2018)
      const obj = {
        name: "why",
        age: 16,
      };

      // foo(...obj); 错误用法 // 在函数调用时,用展开运算符,将对应展开数据,进行迭代
      // 可迭代对象: 数组/string/arguments
      const info = {
        ...obj,
        height: 1.67,
        address: "广州",
      };

      console.log(info);

引用赋值/浅拷贝/深拷贝

      const obj = {
        name: "why",
        age: 16,
        height: 1.74,
        friend: {
          name: "curry",
        },
      };
      
      // 1.引用赋值
      // const info1 = obj;

      // 2.浅拷贝
      /*
      const info2 = {
        ...obj,
      };
      
      info2.name = "what";
      console.log(obj.name);
      console.log(info2.name);
      // info2.friend.name = "jack";
      console.log(obj.friend.name);
      console.log(info2.friend.name);
      */
      
      // 3.深拷贝
      // 方式一:借助第三方库
      // 方式二:自己实现
      // 方式三:利用现有js机制JSON,实现深拷贝
      const info3 = JSON.parse(JSON.stringify(obj));
      console.log(info3.friend.name);
      info3.friend.name = "fuck";
      console.log(info3.friend.name);
      console.log(obj.friend.name);

数值的表示

在ES6中规范了二进制和八进制的写法:

另外在ES2021新增特性:数字过长时,可以使用_作为连接符

      // 1.进制
      console.log(100);
      console.log(0b100); // binary
      console.log(0o100); // octonary
      console.log(0x100); // hexadecimal

      // 2.长数字的表示
      const money = 100_0000_0000_0000;

Symbol的基本使用

Symbol是什么呢?Symbol是ES6中新增的一个基本数据类型,翻译为符号。

那么为什么需要Symbol呢?

  • 在ES6之前,对象的属性名都是字符串形式,那么很容易造成属性名的冲突;
  • 比如原来有一个对象,我们希望在其中添加一个新的属性和值,但是我们在不确定它原来内部有什么内容的情况下,很容易造成冲突,从而覆盖掉它内部的某个属性;
  • 比如我们前面在讲apply、call、bind实现时,我们有给其中添加一个fn属性,那么如果它内部原来已经有了fn属性了呢?
  • 比如开发中我们使用混入,那么混入中出现了同名的属性,必然有一个会被覆盖掉;

Symbol就是为了解决上面的问题,用来生成一个独一无二的值。

  • Symbol值是通过Symbol函数来生成的,生成后可以作为属性名;
  • 也就是在ES6中,对象的属性名可以使用字符串,也可以使用Symbol值;

Symbol即使多次创建值,它们也是不同的:Symbol函数执行后每次创建出来的值都是独一无二的;

我们也可以在创建Symbol值的时候传入一个描述description:这个是ES2019(ES10)新增的特性;

Symbol作为属性名

我们通常会使用Symbol在对象中表示唯一的属性名:

	/*
      // ES6 之前
      var obj = {
        name: "why",
      };

      // 添加新的属性 name
      function foo(obj) {
        obj.why = function () {};
      }

      foo(obj);
      obj.name = "what"; */

      // ES6之后可以使用Symbol生成一个独一无二的值
      const s1 = Symbol();
      const obj = {
        [s1]: "aaa",
      };
      console.log(obj);
      
      const s2 = Symbol();
      obj[s2] = "bbb";
      console.log(obj);

      function foo(obj) {
        const sKey = Symbol();
        obj[sKey] = function () {};
        delete obj[sKey];
      }

相同值的Symbol

前面我们讲Symbol的目的是为了创建一个独一无二的值,那么如果我们现在就是想创建相同的Symbol应该怎么来做呢?

  • 我们可以使用Symbol.for方法来做到这一点;
  • 并且我们可以通过Symbol.keyFor方法来获取对应的key

      const s1 = Symbol(); // aaa
      const s2 = Symbol(); // bbb

      // 1.加入对象中
      const obj = {
        name: "what",
        age: 18,
        [s1]: "aaa",
        [s2]: "bbb",
      };

      const obj1 = {};
      obj1[s1] = "aaa";
      obj1[s2] = "bbb";

      const obj2 = {};
      Object.defineProperty(obj2, s1, {
        value: "aaa",
      });

      // 2.获取 Symbol对应的key
      console.log(Object.keys(obj));
      console.log(Object.getOwnPropertySymbols(obj));
      const symbolKeys = Object.getOwnPropertySymbols(obj);
      for (const key of symbolKeys) {
        console.log(obj[key]);
      }

      // 3.description
      const s3 = Symbol("ccc");
      console.log(s3.description);
      const s4 = Symbol(s3.description);
      console.log(s3 === s4);

      // 如果相同的key,通过Symbol.for 可以生成相同的 Symbol 值
      const s5 = Symbol.for(s3.description);
      const s6 = Symbol.for(s3.description);
      console.log(s5 === s6);
      
      // 获取传入的key
      console.log(Symbol.keyFor(s5));

Set的基本使用

在ES6之前,我们存储数据的结构主要有两种:数组、对象。

  • 在ES6中新增了另外两种数据结构:Set、Map,以及它们的另外形式WeakSet、WeakMap。

Set是一个新增的数据结构,可以用来保存数据,类似于数组,但是和数组的区别是元素不能重复。

  • 创建Set我们需要通过Set构造函数(暂时没有字面量创建的方式):

我们可以发现Set中存放的元素是不会重复的,那么Set有一个非常常用的功能就是给数组去重。

Set的常见方法

Set常见的属性:

  • size:返回Set中元素的个数;

Set常用的方法:

  • add(value):添加某个元素,返回Set对象本身;
  • delete(value):从set中删除和这个值相等的元素,返回boolean类型;
  • has(value):判断set中是否存在某个元素,返回boolean类型;
  • clear():清空set中所有的元素,没有返回值;
  • forEach(callback, [, thisArg]):通过forEach遍历set;

另外Set是支持for of的遍历的

      // 1.创建Set
      const set = new Set();
      console.log(set);
      
      // 2.添加元素
      set.add(19);
      set.add(22);
      set.add(24);
      set.add(24);
      set.add(24);

      const info = {};
      const obj = {};
      set.add(info);
      set.add(obj);
      set.add(obj);
      
      console.log(set);

      // 3.应用场景: 数组的去重
      const names = ["abc", "cba", "nba", "cba", "nba"];
      const newNamesSet = new Set(names);
      const newNames = Array.from(newNamesSet);
      /* const newNames = [];
      for (const item of names) {
        if (!newNames.includes(item)) {
          newNames.push(item);
        }
      } */

      console.log(newNames);

      // 4.Set的其他属性和方法
      // 属性
      console.log(set.size);
      // 方法
      set.add(100);
      console.log(set);
      set.delete(obj);
      console.log(set);
      console.log(set.has(info));
      // set.clear();
      // console.log(set);
      set.forEach((item) => console.log(item));

      // 5.set支持for...of
      for (const item of set) {
        console.log(item);
      }

WeakSet使用

和Set类似的另外一个数据结构称之为WeakSet,也是内部元素不能重复的数据结构。

那么和Set有什么区别呢?

  • 区别一:WeakSet中只能存放对象类型,不能存放基本数据类型;
  • 区别二:WeakSet对元素的引用是弱引用,如果没有其他引用对某个对象进行引用,那么GC可以对该对象进行回收;

WeakSet常见的方法:

  • add(value):添加某个元素,返回WeakSet对象本身;
  • delete(value):从WeakSet中删除和这个值相等的元素,返回boolean类型;
  • has(value):判断WeakSet中是否存在某个元素,返回boolean类型;

WeakSet的应用

注意:WeakSet不能遍历

  • 因为WeakSet只是对对象的弱引用,如果我们遍历获取到其中的元素,那么有可能造成对象不能正常的销毁。
  • 所以存储到WeakSet中的对象是没办法获取的;

那么这个东西有什么用呢?

  • 事实上这个问题并不好回答,我们来使用一个Stack Overflow上的答案;

      // 1. Weak Reference 和 Strong Reference
      let obj1 = { name: "what" };
      let obj2 = { name: "why" };
      let obj3 = { name: "whose" };

      let arr = [obj1, obj2, obj3];
      obj1 = null;
      obj2 = null;
      obj3 = null;

      const set = new Set(arr);
      arr = null;

      // 2.WeakSet
      // 2.1 和set的区别:只能存放对象类型
      const weakSet = new WeakSet();
      weakSet.add(obj1);
      weakSet.add(obj2);
      weakSet.add(obj3);

      // 2.1 和set的区别:对对象的引用是弱引用
      
      // 3.WeakSet的应用
      const pWeakSet = new WeakSet();
      class Person {
        constructor() {
          pWeakSet.add(this);
        }

        running() {
          if (!pWeakSet.has(this)) {
            console.log("type is error: 调用的方式不对");
            return;
          }
          console.log("running~");
        }
      }

      const p = new Person();
      const runFn = p.running;
      runFn();
      const obj = { run: runFn };
      obj.run();

Map的基本使用

另外一个新增的数据结构是Map,用于存储映射关系。

但是我们可能会想,在之前我们可以使用对象来存储映射关系,他们有什么区别呢?

  • 事实上我们对象存储映射关系只能用字符串(ES6新增了Symbol)作为属性名(key);
  • 某些情况下我们可能希望通过其他类型作为key,比如对象,这个时候会自动将对象转成字符串来作为key;

那么我们就可以使用Map

Map的常用方法

Map常见的属性:

  • size:返回Map中元素的个数;

Map常见的方法:

  • set(key, value):在Map中添加key、value,并且返回整个Map对象;
  • get(key):根据key获取Map中的value;
  • has(key):判断是否包括某一个key,返回Boolean类型;
  • delete(key):根据key删除一个键值对,返回Boolean类型;
  • clear():清空所有的元素;
  • forEach(callback, [, thisArg]):通过forEach遍历Map;

Map也可以通过for of进行遍历

WeakMap的使用

和Map类型的另外一个数据结构称之为WeakMap,也是以键值对的形式存在的。

那么和Map有什么区别呢?

  • 区别一:WeakMap的key只能使用对象,不接受其他的类型作为key;
  • 区别二:WeakMap的key对对象想的引用是弱引用,如果没有其他引用引用这个对象,那么GC可以回收该对象;

WeakMap常见的方法有四个:

  • set(key, value):在Map中添加key、value,并且返回整个Map对象;
  • get(key):根据key获取Map中的value;
  • has(key):判断是否包括某一个key,返回Boolean类型;
  • delete(key):根据key删除一个键值对,返回Boolean类型;
      const info = { name: "why" };
      const info2 = { name: "why" };

      // 1.对象的局限性: 不可以使用复杂类型作为key
      const obj = {
        address: "广州市",
        [info]: "呵呵呵呵",
        [info2]: "呵呵呵呵",
      };
      
      console.log(obj);

      // 2.Map映射类型
      const map = new Map();
      map.set(info, "sss");
      map.set(info2, "aaa");
      console.log(map);

      // 3.Map常见属性和方法
      console.log(map.size);
      map.set(info, "ccc");
      console.log(map);
      console.log(map.get(info));

      // map.delete(info);
      console.log(map);
      console.log(map.has(info2));

      // map.clear();
      console.log(map);
      
      // forEach方法
      map.forEach((item) => console.log("map ", item));

      // for...of 遍历
      for (const item of map) {
        const [key, value] = item;
        console.log(key, value);
      }

WeakMap的应用

注意:WeakMap也是不能遍历的

  • 没有forEach方法,也不支持通过for of的方式进行遍历;

那么我们的WeakMap有什么作用呢?

      let obj1 = { name: "why" };
      let obj2 = { name: "what" };
      
      const weakMap = new WeakMap();

      // 1.weakMap的基本使用
      weakMap.set(obj1, "aaa");
      weakMap.set(obj2, "bbb");

      obj1 = null;
      obj2 = null;

Q.E.D.