多态：同一操作作用于不同对象上面，可以产生不同的解释和不同的执行结果。给不同的对象发送同一个消息，这些对象会根据消息给出不同的反馈。
首先我们把不变的部分抽离出来，就是所有动物都会发出叫声
let makeSound = (animal) => { animal.sound() }
var Duck = function () {}
Duck.prototype.sound = () => { console.log(ggg) }
class Duck {
sound () {
}
}
- 类型检查和多态
现在使用java实现
public class Duck {
public void makeSound() {
// ggg
}
}
public class AnimalSound {
public void makeSound( Duck duck ) {
duck.makeSound();
}
}
此时，我们只能让鸭叫，为了解决这种问题，静态类型的面向对象语言可以设计为向上转型；当给一个类变量赋值时，这个变量的类型既可以这个类本身，也可以是使用这个类的超类。
使用继承得到多态效果，是让对象表现出多态性的最常用手段。
我们首先创建一个Animal抽象类，再分别让Duck和chicken都继承自Animal抽象类
js的根对象是Object.prototype
- 对象没有原型，只能说对象的构造器有原型，对象把请求委托给构造器的原型，
js给对象提供了一个proto的隐藏属性，proto默认会指向它的构造器的原型对象，proto就是就是对象和构造器原型对象联系起来的纽带。
当对象a需要继承对象b的能力时，可以让a的构造器的原型指向对象b，达到继承的效果
var obj = {}
function A() {}
A.prototype = obj
当我们期望得到一个类继承另一个类的时候的时候
function A () {}
A.prototype = { name: 'hhh' }
function B() {}
B.prototype = new A()
实例在查找属性时，先查找实例本身，在查找实例的构造函数，在查找构造函数的原型继承的构造函数的实例。。。。
原型链并不是无限长，终点是Object.prototype = undefined
通过Object.create(null)可以创建一个没有原型对象的对象
this, call, apply
js的this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。
func.apply(null, [1, 2, ,3])
func.call(null, 1, 2, 3) 改变函数里的this，后续的参数是func执行时的参数
第一个参数代表this在func中的指向
如果是null，浏览器默认指向null
document.getElementById = () => {}
func.prototype.bind = function(context) {
return () => {
this.call(context, ...arguments)
}
}
在bind函数内部，先把func函数引用保存，然后返回一个新的函数，执行func的时候，实际上执行的是新函数。在执行的内部才是执行原来的func函数，并且指定context对象为func函数体内的this。
- 借用其他对象的方法
- 借用构造函数
var A = function(name) {
this.name = name
}
var B = function() {
}
-
闭包
闭包和变量作用域，生存周期密切相关。函数执行会形成作用域，变量的搜索会随着执行函数的作用域链逐层搜索.
var Tv = {
open: function() {}
} 高阶函数
- 函数可以作为参数被传递
- 函数可以作为返回值输出
判断数据类型
var isString = (obj) => Object.prototype.toString.call(obj) == '[object string]'
var isArray = (obj) => Object.prototype.toString.call(obj) == '[Object array]'
var isNumber = (obj) => Object.prototype.toString.call(obj) == '[Object Number]'单例模式
var getString = function(fn) {
var ret;
return function() {
return ret || (ret = fn.apply(this,arguments))
}
}
- 高阶函数实现aop
在js中实现aop，都是把一个函数“动态植入”到另一个函数中，我们使用原型扩展
Function.prototypr.before = function(beforefn) {
var _self = this; // 这_sel里的this指向调用的对象
return function() {
beforeFn()
return _self.apply(this)
}
}
var func = function() {
console.log(2)
}
func = func.before(function() {
console.log(1)
}).after(function() { console.log(3) })
func()
调用before的是func这个函数
curry
let cost = (function(){
var args = []
return () => {
}
})()
var currying = function(fn) {
var args = []
return fucntion() {
// 根据参数判断是求值还是保存值
}
}
Function.prototype.uncurry = function() {
var self = this;
return function() {
var obj = Array.prototype.shift.call(arguments)
return self.apply(obj)
}
}
- 函数节流
面临的问题是函数被触发的频率太高。
throttle函数的原理是将即将被执行的函数用settimeout延迟一段时间执行。如果该次延迟执行还没有完成，则忽略接下来的函数请求。
var throttle = (fn, interval) => {
var self = fn;
timer, // 用一个标识标识定时器是否结束
firsttime
return (...args) => {
if (firsttime) {
self()
return firsttime = false
}
// 如果定时器存在，说明上一次的执行还没有结束
if (timer) {
return false
}
timer = setTimeout (() => {
// 每次定时器一执行就清除当前定时器
clearTimeout(timer)
timer = null;
}, interval || 500)
}
}
- 分时函数
函数被频繁调用时，可以使用节流，当一个列表中有成千上百的好友时，当创建列表时，要创建成千上百个的节点会让浏览器卡死
所以我们需要一个timechunk函数，它可以让创建节点的工作分批进行，比如1s创建一千个，改成每隔200ms创建8个节点。
var timeChunk = (ary, fn, count) => {
var obj, t;
var len=ary.length
var start = () => { }
return () => {
t = serInterval(() => {
if (!ary.length) { claearInterval(t) }
})
}
}
- 单例模式
单例模式的定义是：一个类只有一个实例，并提供一个全局的访问点
线程池，全局缓存，浏览器中的window对象唯一的登录浮窗,用一个变量标志当前是否已经为某个类创建过对象，下一次获取类的实例时，直接返回之前创建的对象
// 通过闭包保存单例标识
function A (name) { this.name = name }
A.prototype.getIns = (() => { var ins = null;return (name) => {
if (!ins) { ins = new A(name) } return ins
}})()
- 透明的单例模式
var Create = (() => {
var instance;
// 构造函数执行的时候，如果存在实例，则直接返回实例
var Create = function (html) {
if (instance) return instance
this.html = html
this.init = ()
return instance = this
}
Create.prototype.init = () => { var div = document.createElement('div')
div.innerHTML = this.html
document.body.appendChild(div)
}
return Create
})()
var a = new Create('sc')
var b = new Create('sv')
- 将创建instance从构造函数中抽离出来
var proxyCreate = (() => { var instance = null; return (html) => {
van instance;
if (!instance) instance = new Create(html)
return instance
} })()
策略模式
本质是多种途径达到目的地
策略模式的定义是：定义一系列算法，把它们一个个封装起来，并且可以使它们相互替换。使用策略模式计算奖金
一个策略模式至少由两部分组成。第一部分是策略类，策略类封装了具体的算法，并负责具体的计算过程。第二部分是环境类context，context接受客户的请求，随后把请求委托给策略类。context中要维持对某个策略对象的引用。
首先我们封装策略类，将具体的计算过程封装在策略类中.
var performanceS = function() {}
performanceS.prototype.calculate = function(salary) {
return salary * 4;
}
var performanceA = function() {}
performanceS.prototype.calculate = function(salary) {
return salary * 3;
}
var performanceB = function() {}
performanceS.prototype.calculate = function(salary) {
return salary * 2;
}
vae Bonus = function () {
this.salary = null;
this.stratery = null;
}
Bonus.prototype.setSalary = function(salary) { this.salary = salary }
Bonus.prototype.setStratery = function(stratery) { this.stratery = stratery }
Bonus.prototype.getBonus = function() { return this.stratery.calculate(this.salary) }
通过使用策略模式重构的代码，我们消除了源程序中大片的条件分支语句。
实现动画效果的原理
动画片是把一些差距不大的原画以较快的帧数播放表单校验
首先把校验封装成对象
var strategies = {
isNoneEmpty: (value, errorMsg) => { if (!value) return errorMsg},
minLength: () =>
}
var validataFunc = () => {
var validator = new Validator()
validator.add(regis.userName, 'isNoneEmpty', 'userName不能为空')
var errorMsg = validator.start()
return errorMsg
}
当我们往validator对象里添加完一系列的校验规则之后，通过start方法来启动校验，
var Validator = function(){ this.cache = [] }
Validator.prototype.add = (dom, rule, errorMsg) => {
var ary = rule
}
Validator.prototype.start = () => {
for (var i=0, validatorFunc; )
}
- 代理模式
代理模式是为一个对象提供一个代用品或者占位符
var Flower = function(){}
var xiaoming = {
sendFlower: function(target) {
var flower = new Flower()
target.receiveFlower(flower)
}
}
var B = {
receiveFlower: (flower) => {
A.listenGoodMood(() => {
A.receiveFlower(flower)
})
}
}
xiaoming.sendFlower(B)
保护代理和虚拟代理
代理B可以帮助代理A过滤掉一些请求，比如年龄太大，这种请求可以直接在代理B中被拒绝。这种代理叫保护代理。
另外，假设现实中的花价格不菲，new Flower也是一个代价昂贵的操作，可以放到A心情好的时候去创建。虚拟代理可以把一些开销很大的操作，延迟到真正需要的时候去创建。使用虚拟代理实现图片的预加载
代理和本体接口的一致性
如果有一天，我们不需要再预加载，那么就不再需要代理对象，可以直接选择请求本体。其中关键是代理对象和本体都对外提供了setSrc方法，在客户看来，代理对象和本体是一致的，代理接手请求的过程对于用户透明，用户不清楚代理和本体的区别，这样有两个好处：
- 用户可以放心的使用代理，它只关心是否能得到想要的结果。
- 在任何使用本体的地方都可以替换成使用代理
在java等语言中，代理和本体都需要显示的实现同一个接口，一方面接口保证了它们会使用同样的方法，另一方面，通过接口向上转型，避开编译器的类型检查，代理和本体将来可以被替换使用。
- 虚拟代理合并请求
- 虚拟代理在惰性加载中的应用
未真正加载js之前的代码
let cache = []
let minConsole = {
log: (...args) => {cache.push(() => { })}
}
当用户按下f2的时候
