本文所述内容:
- 由组合构造模式详解组合继承模式,及其问题所在,问题所产生的原因,解决问题的办法
- 合理的继承模式原理及瑕疵
1.组合继承模式
我们常说对于引用类型的数据,不能直接赋值修改,因为即使赋值给另外一个变量后,这个变量的值实际保存的是这个引用类型的指针,该指针依然指向的是这个引用类型所在堆中的值,换句话说,该指针指向引用类型原型。
我觉得这也是由于js原型链本身特性所造成的一种简单的继承。
前一篇文章我们有看到组合继承,就如创建对象的组合构造模式一样。
温习组合模式:
// 组合构造模式,即合并构造函数模式和原型模式
// 1. 这一步是构造函数模式
function Test(name){
this.name = name
}
// 2. 这一步是原型模式
Test.prototype = {
// 此处最好将原型指向构造函数本身,虽然影响不大,具体解释前一章节有说到
constructor: Test,
getName() {
console.log(this.name)
}
}
同理,组合继承也是类似(我们依旧假设继承与被继承的2个对象为Child
和Parent
),将Child
的原型重写并指向给Parent
实例的原型
// 组合继承,即借用构造函数和重写原型的方式
function Parent(name) {
this.name = name
this.colors = ['red', 'green']
}
Parent.prototype.getName = function() {
console.log(this.name)
}
function Child(name) {
// 1.借用了 Parent构造函数,将name和colors属性“引用到”Child构造函数中
// 这么做的目的是 使每个Child实例都拥有自己的name 和 colors
Parent.call(this, name)
}
// 2.将`Child`的原型重写并指向给`Parent`实例的原型
Child.prototype = new Parent()
这样便达到了Child
的所有实例,都拥有Parent
实例的属性和方法,且这些属性和方法不是共享的,是实例本身所拥有的。
但这样同样会带来一个问题,Parent的构造函数会运行2次
// 第一次,将`Child`的原型重写并指向给`Parent`实例的原型
Child.prototype = new Parent()
// 第二次,实例化Child的时候,会调用Child构造函数,
// 此时,会再次调用Parent构造函数,克隆一份name和colors到Child中
let ym = new Child('ym')
注意:这个问题不仅仅是Parent的构造函数会运行2次的问题,还有一个问题是,Parent构造函数中的name和colors会存在2份,因为每一次调用Parent构造函数都会创建Parent的实例。
第一份存在于ym
实例中,我们可以打印
let ym = new Child('ym')
ym.name // ym
ym.colors = // ['red', 'green']
如图所示
![6[@]0Z3$3U0WLG]JAJ`ZZLT.png](http://upload-images.jianshu.io/upload_images/3637499-b475a621659d6695.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
第二份存在于Child.prototype
![1E5]O@H$I0P36K)TMJ5O`{0.png](http://upload-images.jianshu.io/upload_images/3637499-c2eabef2ea19f882.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这里我们可以看到Child.prototype
中的name为undefined
,因为我们第一次初始化Parent时,并没有传参。
为了印证这一点,我们前一章说过,delete
操作符可以使得查找属性继续顺着原型链往上
,(delete是删除当前对象上的属性)
这时,我们在第一次初始化的时候传一个参数name 为 test
Child.prototype = new Parent('test')
然后再删除实例ym
上的name,调用getName
打印当前name值
delete ym.name
ym.getName() // test 符合预期
这个问题造成的原因前面也说过了,就是因为初始化了2次Parent构造函数。那究竟哪一次是多余的呢?答案是第一次。
2.合理的继承模式
想想继承是为了什么?就是为了拥有父类的所有属性和方法而又不造成原型链的“污染和浪费”,同时父类原型和子类原型又可以很好的扩展,那我们何不简单粗暴的把父类原型克隆一份,不需要使用prototype指来指去?,6月8日更新:克隆一份的说法是错误的理解,继承的核心是原型链,父类扩展后,子类也相应得到扩展,而克隆做不到。
也就是在第一次初始化的时候不使用new Parent()
,而是直接克隆一份Parent.prototype
赋值给Child.prototype
那么这里会有疑问,Parent的实例上的属性不就没有被Child继承了吗?答案是依旧被继承了,在第二次初始化的时候。
依旧是上面的例子改造,完整的示例:
function Parent(name) {
this.name = name
this.colors = ['red', 'green']
}
Parent.prototype.getName = function() {
console.log(this.name)
}
function Child(name) {
Parent.call(this, name)
}
Child.prototype = Object.create(Parent.prototype)
// 这里我们依旧手动指定构造函数,为了便于区分实例与构造函数的关系
Child.prototype.constructor = Child
let ym = new Child('ym')
console.log(ym)
Object.create() 方法使用指定的原型对象和其属性创建了一个新的对象。
另外,jquery的,更新:$.extend做深拷贝是实现不了继承的,Object.create第一个参数如果是原型,那么返回的新对象的原型也是指向这个参数原型的,所以原型链并没有断掉。$.extend(true, {}, {})
深拷贝我觉得也是可以的。
查看下结果:
发现这个方法也是有瑕疵的,查找的时候多了一层object,原因是Object.create
本身会返回一个新的对象实例,该实例的指针指向克隆的Parent.prototype
3.总结
继承的更合理的方式,是基于组合模式,去掉组合模式中多余的成分,即:
去掉第一次初始化Parent构造函数,使Parent的实例属性只存在于Child实例中
由于现在一般用ES6的特性写js,其中extends
继承是经常用的,但是原理还有待深究(期待下一篇吧)......或许,这才是最合理的继承方法。