首页 > 资讯 > 前端开发 > JavaScript >ES6中常见基本知识点的基本使用实例汇总

917

分享到

ES6中常见基本知识点的基本使用实例汇总

2024-04-02 19:04:59 917人浏览独家记忆

摘要

目录前言1、字面量的增强2、解构Destructuring3、let和const4、作用域5、模板子符串6、函数7、展开语法8、数值表示9、Symbol的基本使用10、Set11、W

前言

学习了coderwhy的javascript高级语法视频课的笔记

如有错误或者不合适的地方，敬请见谅，欢迎指出和拓展，谢谢各位了

1、字面量的增强

var name = 'xxx'
var age = 12
var obj = {
  // 1.property shorthand(属性的简写)
  name: name,
  age,

  // 2.method shorthand(方法的简写)
  foo: function () {
    console.log(1)
  },

  foo2: () => {
    console.log(2)
  },

  foo3() {
    console.log(3)
  },

  // 3.computed property name(计算属性名)
  [name + 123]: 'yyy'
}

obj.foo() //1
obj.foo2() //2
obj.foo3() //3
obj[name + 456] = 'zzz'
console.log(obj)
// {
//   name: 'xxx',
//   age: 12,
//   foo: [Function: foo],
//   foo2: [Function: foo2],
//   foo3: [Function: foo3],
//   xxx123: 'yyy',
//   xxx456: 'zzz'
// }

2、解构Destructuring

数组解构

var arr = ['aaa', 'bbb', 'ccc']
// 以前的做法
// var a1 = arr[0]
// var a2 = arr[1]
// var a3 = arr[2]

// 1、对数组的解构
var [a1, a2, a3] = arr
console.log(a1, a2, a3) //aaa bbb ccc

// 2、解构后面的元素
var [, , a4] = arr
console.log(a4) //ccc

// 3、解构出一个元素,后面的元素放到一个新数组中
var [a5, ...newArr] = arr
console.log(a5, newArr) //aaa [ 'bbb', 'ccc' ]

// 4、解构的默认值
var [a6, a7, a8, a9 = 'DDD'] = arr
console.log(a6, a7, a8, a9) //aaa bbb ccc ddd

对象解构

var obj = {
  name: 'xxx',
  age: 123,
  address: '广东'
}

//1、全部解构
var { name, age, address } = obj
console.log(name, age, address) //xxx 123 广东

//2、解构单个
var { age } = obj
console.log(age) //123

// 3、重新命名
var { age: newAge } = obj
console.log(newAge) //123

//4、解构的默认值
var { color: newColor = 'red' } = obj
console.log(newColor) //red

//5、函数中
function foo(o) {
  console.log(o.name, o.age) //xxx 123
}
foo(obj)

function foo2({ name, age }) {
  console.log(name, age) //xxx 123
}
foo2(obj)

function foo3({ name, age=456}) {
  console.log(name, age) //xxx 123
}
foo3(obj)

3、let和const

基本语法

// 1、从直观的角度来说，let和var是没有太大的区别的，都是用于声明一个变量
let bar = "bar"

// 2、const constant(常量/衡量)
const name = "abc"

// 3、
// 注意事项一: const本质上是传递的值不可以修改
// 但是如果传递的是一个引用类型(内存地址), 可以通过引用找到对应的对象, 去修改对象内部的属性, 这个是可以的
const obj = {
    foo: "foo"
}

obj2.foo = "aaa"
console.log(obj.foo)// aaa

// 4、
// 注意事项二: 通过let/const定义的变量名是不可以重复定义
// let foo = "abc"
// let foo = "cba"

作用域提升

在执行上下文的词法环境创建出来的时候，变量事实上已经被创建了，只是这个变量是不能被提前访问的。
那么我们自己从字面量上理解：在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升。

// 作用域提升: 能提前被访问
console.log(foo)// undefined
var foo = "foo"

// let/const他们是没有作用域提升
// foo被创建出来了, 但是不能被访问
// Reference(引用)Error: Cannot access 'foo' before initialization(初始化)
console.log(foo)
let foo = "foo"

let、const和window的关系

我们知道，在全局通过var来声明一个变量，事实上会在window上添加一个属性，但是let、const是不会给window上添加任何属性。
基于早期ECMA的版本规范：
- 每一个执行上下文会被关联到一个变量对象（variable object，VO），在源代码中的变量和函数声明会被作为属性添加到VO中。对与函数来说，参数也会被添加到VO中。
在最新的ECMA的版本规范中，对于一些词汇进行了修改：
- 每一个执行上下文会被关联到一个变量环境（VariableEnvironment，VE），在执行代码中的变量和函数声明会被作为环境记录（Environment Record）添加到变量环境中。对与函数来说，参数也会被环境记录添加到变量环境中。

也就是说我们声明的变量和环境记录是被添加到变量环境中的,但是标准没有规定这个对象是window对象或者其他对象,那么js引擎在解析的时候，其实会有自己的实现。比如v8中其实是通过VariableMap的一个hashmap来实现它们的存储的（VE->variables_）。

那么window对象呢？而window对象是早期的Go对象，在最新的实现中其实是浏览器添加的全局对象，并且一直保持了window和var之间值的相等性。

var a = 123
let b = 456

console.log(window.a) //123
console.log(window.b) //undefined

4、作用域

ES5作用域（ES5中没有块级作用域）

// 在ES5中只有两个东西会形成作用域
// 1.全局作用域

// 2.函数（局部）作用域
function foo() {
    var bar = "bar"
}

es6作用域（新增一个块级作用域）

// ES6的代码块级作用域
// 对let/const/function/class声明的类型是有效
{
  let foo = 'why'
  function demo() {
    console.log('demo function')
  }
  class Person {}
}

console.log(foo) // foo is not defined
// 不同的浏览器有不同实现的(大部分浏览器为了兼容以前的代码, 让function是没有块级作用域)
demo() //demo function
var p = new Person() // Person is not defined

// 1、if语句的代码就是块级作用域
if (true) {
  var foo = 'foo'
  let bar = 'bar'
}

console.log(foo) //foo
console.log(bar) //bar is not defined

// 2、switch语句的代码也是块级作用域
var color = 'red'
switch (color) {
  case 'red':
    var foo2 = 'foo'
    let bar2 = 'bar'
}

console.log(foo2) //foo
console.log(bar2) //bar2 is not defined

// 3、for语句的代码也是块级作用域
for (var i = 0; i < 10; i++) {
  console.log('Hello World' + i)
  // Hello World0
  // Hello World1
  // Hello World2
  // Hello World3
  // Hello World4
  // Hello World5
  // Hello World6
  // Hello World7
  // Hello World8
  // Hello World9
}
console.log(i) //10

for (let j = 0; j < 10; j++) {}

console.log(j) //j is not defined

块级作用域的应用场景

点击不同的button打印出不同的button编号的两种实现方法。

const btns = document.getElementsByTagName('button')
// 1、var没有块级作用域
for (var i = 0; i < btns.length; i++) {
  ;(function (n) {
    btns[i].onclick = function () {
      console.log('第' + n + '个按钮被点击')
    }
  })(i)
}

// 2、let有块级作用域
for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function () {
    console.log('第' + i + '个按钮被点击')
  }
}

块级作用域的补充

const names = ['abc', 'cba', 'nba']

// 1、不可以使用const，因为i的每次循环（生成一个块级作用域）都不一样，其实都是需要上一次的i进行i++赋值给下一个i
for (let i = 0; i < names.length; i++) {
  console.log(names[i])
}

// 2、for...of: ES6新增的遍历数组(对象)
// 因为每次遍历（生成一个块级作用域）的值都赋给一个item，所以不需要上一次item的值进行操作
for (const item of names) {
  console.log(item)
}

let和const的暂时性死区

在ES6中，我们还有一个概念称之为暂时性死区：它表达的意思是在一个代码中，使用let、const声明的变量，在声明之前，变量都是不可以访问的，我们将这种现象称之为 temporal dead zone（暂时性死区，TDZ）。

var foo = 'foo'

// 块级作用域
if (true) {
  console.log(foo) //Cannot access 'foo' before initialization

  let foo = 'abc'
}

var、let、const的选择

对于var的使用：
- 我们需要明白一个事实，var所表现出来的特殊性：比如作用域提升、window全局对象、没有块级作用域等都是一些历史遗留问题；
- 其实是JavaScript在设计之初的一种语言缺陷；
对于let、const：
- 对于let和const来说，是目前开发中推荐使用的；
- 我们会优先推荐使用const，这样可以保证数据的安全性不会被随意的篡改；
- 只有当我们明确知道一个变量后续会需要被重新赋值时，这个时候再使用let；
- 这种在很多其他语言里面也都是一种约定俗成的规范，尽量我们也遵守这种规范；

5、模板子符串

基本使用

// ES6之前拼接字符串和其他标识符
const name = 'why'
const age = 18
const height = 1.88

console.log('my name is ' + name + ', age is ' + age + ', height is ' + height)

// ES6提供模板字符串 ``
// 1、
const message = `my name is ${name}, age is ${age}, height is ${height}`
console.log(message)

// 2、
const info = `age double is ${age * 2}`
console.log(info)

// 3、
function doubleAge() {
  return age * 2
}

const info2 = `double age is ${doubleAge()}`
console.log(info2)

标签模板字符串

// 第一个参数依然是模块字符串中整个字符串, 只是被切成多块,放到了一个数组中
// 第二个参数是模块字符串中, 第一个 ${}
function foo(m, n, x) {
  console.log(m, n, x)
}

// 另外调用函数的方式: 标签模块字符串
foo`` //[ '' ] undefined undefined

foo`Hello World` //[ 'Hello World' ] undefined undefined

const name = 'why'
const age = 18
foo`Hello${name}Wo${age}rld` //[ 'Hello', 'Wo', 'rld' ] why 18

6、函数

函数的默认参数

// 1.ES6可以给函数参数提供默认值
function foo(m = 'aaa', n = 'bbb') {
  console.log(m, n)
}

foo(0)// 0 bbb

// 2.对象参数和默认值以及解构
function printInfo({ name, age } = { name: 'why', age: 18 }) {
  console.log(name, age)
}
printInfo({ name: 'kobe', age: 40 }) //kobe 40

// 另外一种写法
function printInfo1({ name = 'why', age = 18 } = {}) {
  console.log(name, age)
}
printInfo1() //why 18

// 3.有默认值的形参最好放到最后
function bar(x, y, z = 30) {
  console.log(x, y, z)
}

bar(10, 20) //10 20 30

// 4.有默认值的函数的length属性
function baz(x, y, z, m, n = 30) {
  console.log(x, y, z, m, n)
}

console.log(baz.length)// 4

函数的剩余次数

function foo(m, n, ...args) {
  console.log(m, n) //20 30
  console.log(args) //[ 40, 50, 60 ]
  console.log(arguments) //[Arguments] { '0': 20, '1': 30, '2': 40, '3': 50, '4': 60 }
}

foo(20, 30, 40, 50, 60)

//function foo (...args,m, n)
// rest paramaters必须放到最后
// Rest parameter must be last fORMal parameter

箭头函数

箭头函数是没有显式原型的，所以不能作为构造函数，使用new来创建对象。

function foo() {}

console.log(foo.prototype) //{}
const f = new foo()
console.log(f.__proto__) //{}

var bar = () => {
  console.log(this, arguments) //箭头函数本身没有
}

console.log(bar.prototype) //undefined
const f2 = new bar() //bar is not a constructor

7、展开语法

const names = ['abc', 'cba', 'nba']
const name = 'why'
const info = { name: 'why', age: 18 }

// 1.函数调用时
function foo(x, y, z) {
  console.log(x, y, z)
}

// foo.apply(null, names)
foo(...names) //abc cba nba
foo(...name) //w h y

// 2.构造数组时
const newNames = [...names, ...name]
console.log(newNames) //[ 'abc', 'cba', 'nba', 'w', 'h', 'y' ]

// 3.构建对象字面量时ES2018(ES9)
const obj = { ...info, address: '广州市', ...names }
console.log(obj)
// {
//     '0': 'abc',
//     '1': 'cba',
//     '2': 'nba',
//     name: 'why',
//     age: 18,
//     address: '广州市'
//   }

展开语法是浅拷贝

const info = {
  name: 'why',
  friend: { name: 'kobe' }
}

const obj = { ...info, name: 'coderwhy' }
// console.log(obj)
obj.friend.name = 'james'

console.log(info.friend.name) //james

8、数值表示

const num1 = 100 // 十进制
// b -> binary
const num2 = 0b100 // 二进制
// o -> octonary
const num3 = 0o100 // 八进制
// x -> hexadecimal
const num4 = 0x100 // 十六进制

console.log(num1, num2, num3, num4) //100 4 64 256

// 大的数值的连接符(ES2021 ES12),该写法方便阅读
const num = 10_000_000_000_000_000
console.log(num) //10000000000000000

9、Symbol的基本使用

在ES6之前，对象的属性名都是字符串形式，那么很容易造成属性名的冲突，比如原来有一个对象，我们希望在其中添加一个新的属性和值，但是我们在不确定它原来内部有什么内容的情况下，很容易造成冲突，从而覆盖掉它内部的某个属性；
Symbol是ES6中新增的一个基本数据类型，翻译为符号，用来生成一个独一无二的值，Symbol即使多次创建值，它们也是不同的。Symbol值是通过Symbol函数来生成的，生成后可以作为属性名也就是在ES6中，对象的属性名可以使用字符串，也可以使用Symbol值；
我们也可以在创建Symbol值的时候传入一个描述description，这个是ES2019（ES10）新增的特性。

// 1.ES6之前, 对象的属性名(key)
var obj = {
  name: 'why',
  friend: { name: 'kobe' },
  age: 18
}
obj['newName'] = 'james'
console.log(obj) //{ name: 'why', friend: { name: 'kobe' }, age: 18, newName: 'james' }

// 2.ES6中Symbol的基本使用
const s1 = Symbol()
const s2 = Symbol()
console.log(s1 === s2) //false

// ES2019(ES10)中, Symbol还有一个描述(description)
const s3 = Symbol('aaa')
console.log(s3.description) //aaa

// 3.Symbol值作为key
// 3.1.在定义对象字面量时使用
const obj2 = {
  [s1]: 'abc',
  [s2]: 'cba'
}

// 3.2.新增属性
obj2[s3] = 'nba'

// 3.3.Object.defineProperty方式
const s4 = Symbol()
Object.defineProperty(obj2, s4, {
  enumerable: true,
  configurable: true,
  writable: true,
  value: 'mba'
})

console.log(obj2[s1], obj2[s2], obj2[s3], obj2[s4]) //abc cba nba mba
// 注意: 不能通过.语法获取
console.log(obj2.s1) //undefined

// 4.使用Symbol作为key的属性名,在遍历/Object.keys等中是获取不到这些Symbol值
// 需要Object.getOwnPropertySymbols来获取所有Symbol的key
console.log(Object.keys(obj2)) //[]
console.log(Object.getOwnPropertyNames(obj2)) //[]
console.log(Object.getOwnPropertySymbols(obj2)) //[ Symbol(), Symbol(), Symbol(aaa), Symbol() ]
const sKeys = Object.getOwnPropertySymbols(obj2)
for (const sKey of sKeys) {
  console.log(obj2[sKey])
  // abc
  // cba
  // nba
  // mba
}

// 5.Symbol.for(key)/Symbol.keyFor(symbol)
const sa = Symbol.for('aaa')
const sb = Symbol.for('aaa')
console.log(sa === sb) //true

const key = Symbol.keyFor(sa)
console.log(key) //aaa
const sc = Symbol.for(key)
console.log(sa === sc) //true

10、Set

在ES6之前，我们存储数据的结构主要有两种：数组、对象，在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。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结构
var set = new Set()
set.add(2)
set.add(2)
set.add(30)
set.add(40)
set.add(2)
set.add(230)
console.log(set) //Set(4) { 2, 30, 40, 230 }

// 2.添加对象时特别注意:
// 这是两个不同的变量
set.add({})
set.add({})
console.log(set) //Set(6) { 2, 30, 40, 230, {}, {} }

// obj存储的是地址，set存储的元素不重复
const obj = {}
set.add(obj)
set.add(obj)
console.log(set) //Set(7) { 2, 30, 40, 230, {}, {}, {} }

// 3.对数组去重(去除重复的元素)
const arr = [43, 10, 26, 30, 43, 26, 10]
// 3.1第一种方法
// const newArr = []
// for (const item of arr) {
//   if (newArr.indexOf(item) !== -1) {
//     newArr.push(item)
//   }
// }

// 3.2第二种方法
const arrSet = new Set(arr)
// const newArr = Array.from(arrSet)
const newArr = [...arrSet]
console.log(newArr) //[ 43, 10, 26, 30 ]

// 4.size属性
console.log(arrSet.size) //4

// 5.Set的方法
// add
arrSet.add(1000)
console.log(arrSet) //Set(5) { 43, 10, 26, 30, 1000 }

// delete
arrSet.delete(43)
console.log(arrSet) //Set(4) { 10, 26, 30, 1000 }

// has
console.log(arrSet.has(100)) //false

// clear
// arrSet.clear()
console.log(arrSet) //Set(0) {}

// 6.对Set进行遍历
arrSet.forEach(item => {
  console.log(item)
  //   10
  //   26
  //   30
  //   1000
})

for (const item of arrSet) {
  console.log(item)
  //   10
  //   26
  //   30
  //   1000
}

11、WeakSet

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

那么和Set有什么区别呢？
- 区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；
- 区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；
WeakSet常见的方法：
- add(value)：添加某个元素，返回WeakSet对象本身；
- delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
- has(value)：判断WeakSet中是否存在某个元素，返回boolean类型。

const weakSet = new WeakSet()

// 1.区别一: 只能存放对象类型
// TypeError: Invalid value used in weak set
// weakSet.add(10)

// 2.区别二: 对对象是一个弱引用
let obj = {
  name: 'why'
}

const set = new Set()
// 建立的是强引用
set.add(obj)

// 建立的是弱引用
weakSet.add(obj)
console.log(weakSet)// WeakSet { <items unknown> }

// 3.WeakSet的应用场景
const personSet = new WeakSet()
class Person {
  constructor() {
    personSet.add(this)
  }

  running() {
    if (!personSet.has(this)) {
      throw new Error('不能通过非构造方法创建出来的对象调用running方法')
    }
    console.log('running~', this) //running~ Person {}
  }
}

let p = new Person()
p.running()

// 抛出异常
// p.running.call({ name: 'why' })

如果obj=null，虽然0xa00对象还有引用。但是由于是弱引用，GC还是会回收0xa00对象。

12、Map

新增的数据结构是Map，用于存储映射关系，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？
- 事实上我们对象存储映射关系只能用 字符串（ES6新增了Symbol） 作为属性名（key）；
- 某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；
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进行遍历。

// 1.JavaScript中对象中是不能使用对象来作为key的
const obj1 = { name: 'why' }
const obj2 = { name: 'kobe' }

const info = {
  [obj1]: 'aaa',
  [obj2]: 'bbb'
}

console.log(info) //{ '[object Object]': 'bbb' }

// 2.Map就是允许我们对象类型来作为key的
// 构造方法的使用
const map = new Map()
map.set(obj1, 'aaa')
map.set(obj2, 'bbb')
map.set(1, 'ccc')
console.log(map)
// Map(3) {
//     { name: 'why' } => 'aaa',
//     { name: 'kobe' } => 'bbb',
//     1 => 'ccc'
//  }

const map2 = new Map([
  [obj1, 'aaa'],
  [obj2, 'bbb'],
  [2, 'ddd']
])
console.log(map2)
// Map(3) {
//     { name: 'why' } => 'aaa',
//     { name: 'kobe' } => 'bbb',
//     2 => 'ccc'
//  }

// 3.常见的属性和方法
console.log(map2.size) //3

// set
map2.set('why', 'eee')
console.log(map2)
// Map(4) {
//     { name: 'why' } => 'aaa',
//     { name: 'kobe' } => 'bbb',
//     2 => 'ddd',
//     'why' => 'eee'
//  }

// get(key)
console.log(map2.get('why')) //eee

// has(key)
console.log(map2.has('why')) //true

// delete(key)
map2.delete('why')
console.log(map2)
// Map(3) {
//     { name: 'why' } => 'aaa',
//     { name: 'kobe' } => 'bbb',
//     2 => 'ddd'
// }

// clear(),全部清空
// map2.clear()
// console.log(map2)

// 4.遍历map
map2.forEach((item, key) => {
  console.log(item, key)
  // aaa { name: 'why' }
  // bbb { name: 'kobe' }
  // ddd 2
})

for (const item of map2) {
  console.log(item[0], item[1])
  // { name: 'why' } aaa
  // { name: 'kobe' } bbb
  // 2 ddd
}

for (const [key, value] of map2) {
  console.log(key, value)
  // { name: 'why' } aaa
  // { name: 'kobe' } bbb
  // 2 ddd
}

13、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 obj = {name: "obj1"}
// 1.WeakMap和Map的区别二:弱引用
const map = new Map()
map.set(obj, "aaa")

const weakMap = new WeakMap()
weakMap.set(obj, "aaa")

// 2.区别一: 不能使用基本数据类型
// weakMap.set(1, "ccc")

// 3.常见方法
// get方法
console.log(weakMap.get(obj))//aaa

// has方法
console.log(weakMap.has(obj))//true

// delete方法
console.log(weakMap.delete(obj))//true
// WeakMap { <items unknown> }
console.log(weakMap)//WeakMap { <items unknown> }

使用场景：响应式原理中的WeakMap的使用（简单实现）

// 应用场景(vue3响应式原理)
const obj1 = {
  name: 'why',
  age: 18
}

function obj1NameFn1() {
  console.log('obj1NameFn1被执行')
}

function obj1NameFn2() {
  console.log('obj1NameFn2被执行')
}

function obj1AgeFn1() {
  console.log('obj1AgeFn1')
}

function obj1AgeFn2() {
  console.log('obj1AgeFn2')
}

const obj2 = {
  name: 'kobe',
  height: 1.88,
  address: '广州市'
}

function obj2NameFn1() {
  console.log('obj1NameFn1被执行')
}

function obj2NameFn2() {
  console.log('obj1NameFn2被执行')
}

// 1.创建WeakMap
const weakMap = new WeakMap()

// 2.收集依赖结构
// 2.1.对obj1收集的数据结构
const obj1Map = new Map()
obj1Map.set('name', [obj1NameFn1, obj1NameFn2])
obj1Map.set('age', [obj1AgeFn1, obj1AgeFn2])
weakMap.set(obj1, obj1Map)

// 2.2.对obj2收集的数据结构
const obj2Map = new Map()
obj2Map.set('name', [obj2NameFn1, obj2NameFn2])
weakMap.set(obj2, obj2Map)

// 3.如果obj1.name发生了改变
// Proxy/Object.defineProperty
obj1.name = 'james'
const targetMap = weakMap.get(obj1)
const fns = targetMap.get('name')
fns.forEach(item => item())
// obj1NameFn1被执行
// obj1NameFn2被执行