1、观察者模式
观察者模式(基于发布订阅模式) 有观察者,也有被观察者。
观察者需要放到被观察者列表中,被观察者的状态变化需要通知观察者。 内部基于发布订阅模式,收集观察者;状态变化后要主动通知观察者。

2、发布订阅模式
发布订阅的核心: 每次event. emit(发布),就会触发一次event.on(注册)。

观察者模式和发布订阅模式的区别
观察者模式和发布订阅模式最大的区别就是发布订阅模式有个事件调度中心,消除了发布者和订阅者之间的依赖。
从下图中可以看出,观察者模式中观察者和目标直接进行交互,而发布订阅模式中统一由调度中心进行处理,订阅者和发布者互不干扰。一方面实现了解耦,还有就是可以实现更细粒度的一些控制。比如发布者发布了很多消息,但是不想所有的订阅者都接收到,就可以在调度中心做一些处理,类似于权限控制之类的。还可以做一些节流操作。

vue数据双向绑定也用到了发布订阅模式
3、事件总线
eventBus其实是一个典型的观察订阅模式,我们需要实现:
1)订阅事件on;
2)触发事件emit;
3)移除事件off;

4、instanceof
instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
所以实现instanceof的思路就是判断右边变量的原型是否存在于左边变量的原型链上。
1)先取得当前类的原型,当前实例对象的原型链
3)一直循环(执行原型链的查找机制)
a、如果 一直找到Object.prototype.__proto__ == null,Object的基类(null)上面都没找到,则返回false;
b、如果 当前实例的原型链__proto__上找到了当前类的原型prototype,则返回true;
c、取得当前实例对象原型链的原型链(proto = proto.__proto__,沿着原型链一直向上查找)。

5、Object.create

6、call、apply和bind
1)call的实现

2)apply的实现

2)bind的实现

7、防抖和节流
1)防抖

2)节流

8、函数柯里化
9、new
a、创建一个空的JavaScript对象(即{});
b、空对象的_proto_指向构造函数的prototype,也就是将 obj.constructor 指向构造函数;
c、将this指向创建的对象上下文;
d、返回对象。

10、函数扁平化

网友评论