典型点总结

迭代器

https://zh.javascript.info/iterable

数组解构

https://zh.javascript.info/destructuring-assignment

JSON

https://zh.javascript.info/json#jsonparse

属性的读写性质

https://zh.javascript.info/property-descriptors

逐级defineProperty实验

var personA={
    name:'A',
    age:25,
    hobby:{
        basketball:'very well',
        piano:'so so'
    },
    secret:{
        s1:{
            name:'love',
            to:'person2'
        } 
    }
}
const observe = data => {
    if (!data || typeof data !== 'object') {
        return
    }
    Object.keys(data).forEach(key => {
      let currentValue = data[key]
      observe(currentValue)
      Object.defineProperty(data, key, {
        enumerable: true,
        configurable: false,
        get() {
          console.log(`getting ${key} value now, getting value is:`, currentValue)
          return currentValue
        },
        set(newValue) {
          currentValue = newValue
          console.log(`setting ${key} value now, setting value is`, currentValue)
        }
      })
    })
  }
  observe(data)

数组排序

看代码

系统方法

原型和继承

https://blog.51cto.com/14047134/2319663
简书

Proxy发布订阅

// 'use strict'
const myobservable = obj => new Proxy(obj, {set});
const queuedObservers = new Set();
const myobserve = fn => queuedObservers.add(fn);
function set(target, key, value, receiver) {
  //Reflect.set返回Boolean
  // const result = Reflect.set(target, key, value, receiver);
  target[key]=value
  queuedObservers.forEach(observer => observer());
  // 严格模式下，Proxy Handler的set需要返回真，否则将报错
  //非严格模式下，可以不用下面这行
  // return result;
}
// 实例
const person = myobservable({
  name: '张三',
  age: 20
});
function print() {
  console.log(`${person.name}, ${person.age}`)
}
myobserve(print);
person.name = '李四';
person.gh = '李四';
console.log(person)
// 输出

Proxy和Reflect发布订阅

// 'use strict'
const myobservable = obj => new Proxy(obj, {set});
const queuedObservers = new Set();
const myobserve = fn => queuedObservers.add(fn);
function set(target, key, value, receiver) {
  //Reflect.set返回Boolean
  const result = Reflect.set(target, key, value, receiver);
  queuedObservers.forEach(observer => observer());
  // 严格模式下，Proxy Handler的set需要返回真，否则将报错
  //非严格模式下，可以不用下面这行
  return result;
}
// 实例
const person = myobservable({
  name: '张三',
  age: 20
});
function print() {
  console.log(`${person.name}, ${person.age}`)
}
function print1() {
  console.log('hello')
}
myobserve(print);
myobserve(print1);
person.name = '李四';
person.gh = '李四';
// 输出