传统形式的继承 ----- > 原型链
如下代码是 father 、 me 和 son 三者之间的继承关系，me 继承自father，son 继承自 me，代码如下
function Father(){
}
Father.prototype.lastName = 'han'
function Me(){
}
Me.prototype = new Father()
function Son(){
this.name = 'hehe'
}
Son.prototype = new Me()
var son = new Son()
console.log(son.lastName) // han
Son.prototype.lastName = 'liu'
console.log(son.lastName) // liu
console.log(son.name) // hehe
上面的代码表明
- 子代的对象可以继承它父辈们的属性和方法，并且，修改其中某个构造函数自身的属性，不会影响到父辈们身上的属性
- 当子代对象需要它原型链上的某个属性时，它先在自身查找，自身没有这个属性，会沿原型链一级一级地向上查找，直至找到为止。
- 子代对象会继承他的所有父辈们的所有属性和方法
借用其他构造函数的继承方式
如下代码有两个构造函数，其中一个函数完全涵盖了另一个构造函数的所有方法
function Person(name, age, sex){
this.name = name
this.age = age
this.sex = sex
}
function Student(name, age, sex, grade){
this.name = name
this.age = age
this.sex = sex
this.grade = grade
}
如果再写一次这个Student构造函数，比较麻烦，而且有很多重复，这时可以借用Person构造函数
代码如下：
function Person(name, age, sex){
this.name = name
this.age = age
this.sex = sex
}
function Student(name, age, sex, grade){
Person.call(this, name, age, sex)
this.grade = grade
}
var s1 = new Student('han', 12, 'male', 10)
console.log(s1) // {name: "han", age: 12, sex: "male", grade: 10}
一个函数在 使用new方法的时候：相当于隐式的产生了这样的过程：
function Person(name, age, sex){
var _this = {
__proto__: Person.prototype
}
_this.name = name
_this.age = age
_this.sex = sex
return _this
}
var p1 = Person('han', 12, 'male')
上面使用 call ，就是在指定 Person 函数内的this必须是我这个Person函数将要构造出的对象
这样写的优缺点：
- 优点：减少了代码的重复
- 缺点：增加了性能损耗，因为增加了一个函数的调用
而且它并没有继承构造函数的原型
共享原型
这种方法比较简单粗暴
代码如下
function Father(){}
Father.prototype.name = 'han'
function Me(){}
Me.prototype = Father.prototype
var me = new Me()
console.log(me.name) // han
直接让Me.prototype = Father.prototype ，Me 就可以继承Father的原型上的属性了
但是，因为Me.prototype 和 Father.prototype 是一个对象，也就是说是一个引用值，它们都指向同一个内存空间，修改其中一个，另一个也会变
function Father(){}
Father.prototype.name = 'han'
var father = new Father()
console.log(father.name) // han
function Me(){}
Me.prototype = Father.prototype
Me.prototype.name = 'liu'
var me = new Me()
console.log(father.name) // liu
console.log(me.name) // liu
古老的圣杯模式
因为直接让两个元素的原型相等，会使得它们的
原理是做一个中间层，不让两个对象之间直接赋值
代码如下
function Father(){}
Father.prototype.name = 'han'
var father = new Father()
// 开始转化
function F(){}
F.prototype = Father.prototype
var f = new F()
Me.prototype = f
// 结束转化
function Me(){}
var me = new Me()
Me.prototype.age = 12
console.log(father.age) // undefined
console.log(me.age) // 12
把这个过程做成一个函数
function Father(){}
Father.prototype.name = 'han'
var father = new Father()
function inherit(Target, Origin){
function F(){}
F.prototype = Origin.prototype
Target.prototype = new F()
}
inherit(Me, Father)
function Me(){}
var me = new Me()
Me.prototype.age = 12
console.log(father.age) // undefined
console.log(me.age) // 12
因为 new 出来的是一个新的对象，有不同的内存地址，所以不会出现上面的情况
这样可以做到既可以有父辈的属性和方法，改变自己的时候，也不会影响父辈的属性
不过还有一点点小问题，就是构造出来的Me.prototype上的 construtor 仍然是Father函数
function Father(){}
Father.prototype.name = 'han'
var father = new Father()
function inherit(Target, Origin){
function F(){}
F.prototype = Origin.prototype
Target.prototype = new F()
}
inherit(Me, Father)
function Me(){}
var me = new Me()
Me.prototype.age = 12
console.log(Father.prototype.constructor) // Father(){}
console.log(Me.prototype.constructor) // Father(){}
为了让Me.prototype 的constructor指向它自己的函数，需要再进行一次改造
function Father(){}
Father.prototype.name = 'han'
var father = new Father()
function inherit(Target, Origin){
function F(){}
F.prototype = Origin.prototype
Target.prototype = new F()
Target.prototype.constructor = Target // 这是新添加的一行代码
Target.prototype.uber = Origin.prototype // 添加超类，就是继承最终的源头
}
inherit(Me, Father)
function Me(){}
var me = new Me()
Me.prototype.age = 12
console.log(Father.prototype.constructor) // Father(){}
console.log(Me.prototype.constructor) // Me(){}
有一个叫YUI的库是这样写inherit函数的
var inherit = function (Target, Origin){
function F(){}
return function(){
F.prototype = Origin.prototype
Target.prototype = new F()
Target.prototype.constructor = Target
Target.prototype.uber = Origin.prototype
}
}
因为 function F 是一个中间变量，所以，这里使用一个闭包，将其私有化。但是功能是一样的
网友评论