前言
一共有三篇，这一篇写在JS中只存在对象与原型链的情况下实现代码复用。
内容来源于《你不知道的js》《阮一峰ES6入门》《JavaScript语言精粹》《JavaScript高级程序设计》《JavaScript设计模式》《JavaScript模式》《MDN web文档》
本博客没有什么有价值的知识，仅作总结梳理之用，初学者可以看看。
只有对象的世界
在静态强类型语言中，继承可能是唯一复用代码的方法，但是在JS中，有更简洁的的方法，其中包括借用、绑定、复制属性、原型链链接、以及从多个对象中混入(mixin)。在JS中不存在类，只存在对象，所以我们只要关注对象与对象之间的关系就行了。所以此节的继承的含义变为 对象继承了另一个对象的属性。上一节的含义是子类继承了父类的属性并且实例化生成子类实例。
借用
有时候需要某个对象中的一两个方法，想要重用这些方法的时候又不希望与源对象产生继承关系，可以通过借用方法来实现。call()、apply()、bind()
let foo = {
a: 2,
b: function () {
return this.a
}
}
let bar = {
a: 5
}
foo.b.call(bar) //? 5
在foo和bar不产生原型链接的情况下，bar调用了foo中的b方法，上篇SuperType.call(this, name)也是采用了这种方法。
克隆与混合
深拷贝与浅拷贝
因为JS中有基础类型和引用类型，如果分别将属性赋值过去，那两个对象的引用属性如数组和方法对象还是共用的一个。
简单的实现浅拷贝
function copy( targetObj,sourceObj ) {
for (const key in sourceObj) {
if (sourceObj.hasOwnProperty(key)) {
// 如果不希望发生覆盖可以 if (!(key in targetObj))只复制不存在于targetObj的属性
targetObj[key] = sourceObj[key];
}
}
return targetObj;
}
let foo = {
a: 1,
c: [1,2,3]
}
let bar = copy({a:2,b:3},foo)
let baz = copy({},foo)
bar.c.push(4)
baz.a //? 1
bar.a //? 1
bar.b //? 3
bar.c //? [1,2,3,4]
foo.c //?[1,2,3,4]
Object.getOwnPropertyNames(bar) //?['a','b','c']
引用类型共用所以修改数组c都会变，同名属性会被覆盖。而且拷贝的属性是有限制的，只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）。ES6新增的对象结构赋值可以简单的实现此操作
let aClone = { ...a }
ES6新增的Object.assign也是这个功能，只不过更加复杂一些，Object.assign(target, source1, source2)可以有很多源对象。也就实现了混合。
可以用来
- 为对象添加属性和方法
- 克隆对象
- 合并多个对象
- 为属性制定默认值
const DEFAULTS = {
logLevel: 0
};
function foo(options) {
options = Object.assign({}, DEFAULTS, options);
console.log(options)
}
foo({logLevel: 1})
深克隆
- 利用利用
JSON对象中的parse和stringify。
let foo = {
a: 2,
b: function () {
return 3
},
c: [1,2,3]
}
let bar = JSON.parse(JSON.stringify(foo))
foo.b() //?3
bar.a //?2
bar.c.push(4)
foo.c //?[1,2,3]
bar.c //?[1,2,3,4]
Object.getOwnPropertyNames(bar) //?[a,c]
可以看到函数丢了，序列化JavaScript对象时，所有函数和原型成员会被有意忽略，但是数组和对象都会被完整保留，在复制JSON对象时这个方法可以使用。
- 递归
function copyDeep(targetObj,sourceObj) {
toStr = Object.prototype.toString
astr = '[object Array]'
for (const key in sourceObj) {
if (sourceObj.hasOwnProperty(key)) {
if (typeof sourceObj[key] === 'object') {
targetObj[key] = (toStr.call(sourceObj[i]) === astr ? [] :{})
copyDeep(targetObj[key],sourceObj[key])
} else {
targetObj[key] = sourceObj[key]
}
}
}
}
简单的实现一下，这个代码很有问题。实际运用中最好使用lodash库来进行深克隆
不克隆
简单想一下克隆的应用场景，一是数据持久化，二是在不可变对象的情况下修改对象。非要深度克隆遍历所有属性继承属性数组对象函数的情况很少。这样在第一种情况下可以用JSON很好的实现。第二种情况，可以使用库来实现，比如diffy-update或者Immutable.js。因为没有用过就不细说了，下次特意用一下再写。
Object.create
Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
let foo = {
a: 2,
b: function (params) {
return 3
}
}
let bar = Object.create(foo)
bar.a //? 2
bar.b() // 3
Object.getOwnPropertyDescriptors(bar) //? {}
和文章开头的例子一样，bar依然是个空白的对象，调用的方法都是沿着原型链向上查找的，为了不引起困惑让代码清晰。可以在bar上设置新方法调用的时候调用这个新方法。
bar.c = function () {
return this.b()
}
bar.c() //?3
这样我们可以调用在bar上切实存在的属性方法又来源于foo
行为委托
这种复用的实质是JS中只存在对象与对象的链接，像上文一样，我们可以通过让两个对象链接在一起，从而使一个能够使用另一个的方法。
一个栗子，虽然很想用前面那个改造，而且也可以实现，但是SuperType在此节语境下有歧义并且不符合本节只有对象的思路。
let Foo = {
init(name) {
this.name = name
},
identify() {
return this.name
}
}
let Bar = Object.create(Foo)
Bar.speak = function () {
console.log(`Hello, I am ${this.identify()}`)
}
let b1 = Object.create(Bar)
b1.init('b1')
let b2 = Object.create(Bar)
b2.init('b2')
b1.speak() //Hello I am b1
b2.speak() //Hello I am b2
这段代码中一共有四个对象，原型链接清晰明了。没有prototype对象也没有consructor的指向迷惑。这个原型图不需要画了，代码上就一目了然。
委托的应用
在《你不知道的js》上看的这种使用模式，在《js设计模式》上也有。有一些应用例子，但是复制粘贴也没意思，和typescript一样，没有在实际应用中使用过。这个也是等写几个demo后回来写。
总结
在js中还是用对象与原型链的方式比较舒服，没有任何歧义。
