const o = {
  fn: () => {
    console.log(this)
  },
  fn1() {
    console.log(this)
  },
  fn2() {

    const fn2a = () => {
      console.log(this)
    }
    return fn2a()
  }
}
o.fn()
o.fn1()
o.fn2()
var f = o.fn2;
f()
var o2 = { f: o.fn2 }
o2.f()


// https://juejin.cn/post/7035257186565488670
// https://www.bilibili.com/video/BV1qD4y1G7YK/?spm_id_from=333.788&vd_source=6295663755b5924d0280f874eacbe51d
// 17min

class A {
  a = 1;
  constructor({ a }) {
    this.a = a
  };
  f = () => { };
  fn() {
    console.log(1)
  }
}
A.prototype.fn()

class A { }
class B extends A {
  constructor() { }
}
new B()

// Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

class A { }
class B extends A {
  constructor() {
    super()
  }
}
new B()
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/constructor

// 一条记忆实体(内容)
// 一条备忘
// 仅仅描述一条实体的类。【用value通用，各种数据都能备忘]
class Memento {
    constructor(value) {
        this.value = value;
    }
}
// 多条备忘的集合
// 提供([仅从顶部新增、删除])添加备忘 撤销备忘 ,无删除
class MementosStorage {
    constructor(memento) {
        // TODO Memento 类型校验
        this.value = [memento]
    }
    get length() {
        return this.value.length
    }
    // do 
    add(memento) {
        return this.value.push(memento)
    }
    // --> undo
    remove(memento) {
        return this.value.pop(memento)
    }
}

class MementosManager {
    constructor(memento) {
        this.storage = this.value = new MementosStorage(memento)
    }
    addMemento(memento) {
        return this.storage.add(memento);
    }
    undo() {
        return this.storage.remove();
    }
    getMemento(index = this.storage.length - 1) {
        return this.storage.value[index]
    }
    motify(index = this.storage.length - 1, memento) {
        this.storage.value[index] = memento
    }
}

const li = {
    name: "li",
    phone: 15120065082
}
const zhang={
    name: "zhang",
    phone: 1
}
const wang={
    name: "wang",
    phone: 2
}
const zhao ={
    name: "zhao",
    phone: 3
}
const manager = new MementosManager(li);
var item = manager.getMemento()
console.log('item init', item)  // {name: "li", phone: 15120065082}

manager.addMemento(zhang)
var item = manager.getMemento()
console.log('item after add', item) // {name: "zhang", phone: 1}

manager.addMemento(wang)
var item = manager.getMemento()
console.log('item after add', item) // {name: "wang",phone: 2}

manager.addMemento(zhao)
var item = manager.getMemento()
console.log('item after add', item) // {name: "zhao", phone: 3}

manager.undo()
var item = manager.getMemento()
console.log('item after undo',item); // {name: "wang", phone: 2}

manager.undo()
var item = manager.getMemento()
console.log('item after undo',item); // {name: "zhang", phone: 1}

manager.undo()
var item = manager.getMemento()
console.log('item after undo',item); // {name: "li", phone: 15120065082}

const start1 = Date.now()

function debounce(fn, delay = 5000) {
  let timer = null;
  // 闭包
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      timer = null
      fn()
    }, delay)
  }
}

const f = () => { console.log('执行了当前函数', Date.now() - start1) }

const df = debounce(f, 5000)

//模拟每次点击
const clk = _ => new Promise((resolve) => {
  setTimeout(() => {
    df()
    console.log('clk')
    resolve()
  }, 1000)
});

// 每次点击间隔1000ms,对应的闭包还没放到宏队列
// 在1000ms内，下次点击会立刻清掉上次点击的定时器，四次点击造成前三次都被清除了
// 直到第四次执行,在

const start = Date.now()
console.log('开始')
//第一次点击
console.log('clk')
df();

// 开始
// clk
// 执行了当前函数 5004


// (async function () {
//   console.log('第一次点击耗时', Date.now() - start);
//   //第一次点击
//   await clk();
//   console.log('第二次点击耗时', Date.now() - start)
//   //第二次点击
//   await clk();
//   console.log('第三次点击耗时', Date.now() - start)
//   //第四次点击
//   await clk();
//   console.log('第四次点击耗时', Date.now() - start)
// })()
// 开始
// clk
// 第一次点击耗时 4
// clk
// 第二次点击耗时 1008
// clk
// 第三次点击耗时 2010
// clk
// 第四次点击耗时 3012
// 执行了当前函数 8011


// 优点：防抖可以防止多次抖动执行一次
// 弊端：最后一次延迟delay执行