前几天整理了有关JavaScript继承的几种方式,今天就一并的从印象笔记中整理上来。


原型链继承
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function SuperType () {
this.property = true
}
SuperType.prototype.getSuperValue = function() {
return this.property
}
function SubType() {
this.subproperty = false
}

// 此处继承
SubType.prototype = new SuperType()

// 此处也在原型中写了自己的getSubValue方法
SubType.prototype.getSubValue = function() {
return this.subproperty
}
var instance = new SubType()
alert(instance.getSuperValue) //true

// 此处重新定义了超类型中的该方法
SubType.prototype.getSuperValue = function () { return false
}
alert(instance.getSuperValue()) //false




借用构造函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function SuperType () {
this.colors = ['red', 'blue', 'green']
}

function SubType() {
//继承SuperType,此处继承/借助构造函数
SuperType.call(this)
}

var instance1 = new SubType()
instance1.colors.push('black')
alert(instance.colors) //'red','blue','green','black'

var instance2 = new SubType()
alert(instance2.colors) //'red','blue','green'

// 如何传递参数??

function SuperType(name) {
this.name = name
}

function SubType() {
// 此处继承,并传递具体name值
SuperType.call(this, 'Jayant')
this.age = 29
}

var instance = new SubType()
alert(instance.name) // Jayant
alert(instance.age) //29




组合继承 结合原型链与构造函数,思路为:使用原型链实现对原型属性和方法的继承,又实用构造函数实现对实例属性的继承
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function SuperType(name) {
this.name = name
this.colors = ['red', 'green', 'blue']
}

SuperType.prototype.sayName = function() {
alert(this.name)
}

function SubType(name, age) {
// 构造继承属性 !第一次调用SuperType
SuperType.call(this,name)
this.age = age
}

// 原型链继承 !第二次调用SuperType
SubType.prototype = new SuperType()

SubType.prototype.constructor = SubType

SubType.prototypr.sayAge = function() {
alert(this.age)
}
var instance1 = new SubType('Jayant', 23)
instance1.colors.push('black')

alert(instance1.colors) //'red','blue','green',black'
instance1.sayName() //Jayant
instance1.sayAge() // 23

vat instance2 = new SubType('Grey', 27)

alert(instance2.colors) //'red','blue','green'
instance2.sayName() // 'Grey'
instance2.sayAge() //27




寄生式继承
1
2
3
4
5
6
7
8
function createAnthor(original) {
var clone = object(original)
// 添加新方法
clone.sayHi = function() {
alert('Hi')
}
return clone
}


在上边例子中,createAnther()函数接收一个参数,将要作为新对象基础的对象,然后将对象(original)传递给object()函数,将返回的结果赋值给Clone
再为clone对象添加一个新方法sayHi(),最后返回给clone对象。

1
2
3
4
5
6
var person = {
name: 'Nicholas',
friends: ['shelby', 'court', 'van']
}
var anthorPerson = createAnther(person)
antherPerson.sayHi() //Hi




寄生组合式继承 为避免如同组合继承的方式,会调用两次超类型构造函数,衍生出了寄生组合继承方式

大致思路:

1
2
3
4
5
6
7
8
function inheritPrototype(subType, superType) {
//创建对象
var prototype = object(superType.prototype)
//增强对象
prototype.constructor = subType
//指定对象
subType.prototype = prototype
}


实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function SuperType(name) {
this.name = name
this.colors = ['red', 'blue', 'green']
}
SuperType.prototype.sayName = function(){
alert(this.name)
}
function SubType(name, age) {
SuperType.call(this, name)
this.age = age
}
inheritPrototype(SubType, SuperType)

SubType.prototype.sayAge = function () {
alert(this.age)
}



优势在于只调用一次父类构造函数,并且将子构造函数,父构造函数传入方法中,复制一遍父类型的原型,并为其添加constructor属性