【查漏-js】7.面向对象之继承
由于 es 函数没有签名, 在函数中无法实现OO语言的接口继承,只支持实现继承。
原型链继承
原型链继承,就是把一个函数的原型等于另一个函数的实例。
原型链继承的缺点:
- 在通过原型来实现继承时,原型实际上会变成另一个类型的实例。于是,原先的实例属性也就顺理成章地变成了现在的原型属性了。
- 创建子类型的实例时,不能向父类型的构造函数中传递参数。
示例: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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66// 找老婆函数
function LookingForAWife() {
// 一个女孩
function Girl() {
this.name = 'Arutoria';
this.age = 20;
this.job = '护士';
this.dating = false; // 是否在恋爱中
}
// 一个女朋友
function GirlFriend() {
this.belong = 'haise';
}
// 一个老婆
function Wife() {
this.husband = 'haise';
}
// 获取女孩信息
Girl.prototype.getGirlInfo = function () {
return {
name: this.name,
age: this.age,
job: this.job,
dating: this.dating // 是否在恋爱中
};
}
var girl = new Girl();
// 动态原型模式
if (!girl.dating) {
GirlFriend.prototype = girl; // 如果女孩没对象,就做女朋友的原型
} else {
console.log('没戏');
// 清空看中的女孩
return girl = null;
}
// 追求做女朋友
var girlFriend = new GirlFriend();
girlFriend.__proto__.dating = true // 如果追求上就女孩就是在恋爱过程中了
// 动态原型模式
if (girlFriend.belong === 'haise') {
Wife.prototype = girlFriend; // 判断女朋友是不是爱自己,如果是就作为妻子的原型
} else {
console.log('结婚没戏');
// 清空女朋友节省内存
return girlFriend = null;
}
var wife = new Wife(); // 结婚做老婆
console.log(wife.name); // 老婆的名字
console.log(wife.age); // 老婆的年龄
console.log(wife.job); // 老婆的工作
console.log('爱我?', wife.dating); // 老婆是否爱我
console.log('属于', wife.belong); // 老婆的归属
console.log('丈夫', wife.husband); // 老婆的丈夫
console.log(wife.getGirlInfo()); // { name: 'Arutoria', age: 20, job: '护士', dating: true }
}
LookingForAWife();
借用构造函数
在子类型构造函数的内部调用父类型构造函数。
问题:
- 方法都在构造函数中定义,因此函数复用就无从谈起了
- 在超类型的原型中定义的方法,对子类型而言也是不可见的,结果所有类型都只能使用构造函数模式
1 | function Girl(name) { |
组合继承
组合继承是将原型链和借用构造函数组合在一起,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。
这种继承方式比较常用,原因是结合了原型链继承和借用构造函数继承,各自的优点。
示例: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// 添加女孩构造函数
function Girl(name) {
this.name = name;
this.job = ["护士", "空姐", "教师"];
}
// 给女孩构造函数的原型对象上添加方法,打印this下的name属性
Girl.prototype.sayName = function () {
console.log(this.name);
};
// 添加女朋友构造函数,借用女孩构造函数并call this,这样就可以把女孩的this指向女朋友。
function GirlFriend(name, age) {
//继承属性
Girl.call(this, name);
this.age = age;
}
GirlFriend.prototype = new Girl(); // 使用原型链
GirlFriend.prototype.constructor = GirlFriend; // 重写原型丢失的构造函数
// 女朋友原型对象上添加说年龄函数,
GirlFriend.prototype.sayAge = function () {
console.log(this.age);
};
// 使用女朋友构造函数
var girl1 = new GirlFriend("Arutoria", 20);
console.log('Arutoria的职业是:' + girl1.job); // Arutoria的职业是:护士,空姐,教师
girl1.sayName(); // Arutoria
girl1.sayAge(); // 20
原型式继承
原型式在es5被规范化, 使用Object.create()
方法,方法接收两个参数:一 个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。
示例:1
2
3
4
5
6
7
8
9
10
11
12
13var Girl = {
name: 'Arutoria',
job: ["护士", "空姐", "教师"],
}
var girlFriend = Object.create(Girl, {
name: {
value: "Amia"
}
});
console.log(girlFriend.name); // Amia
console.log(girlFriend.job) // [ '护士', '空姐', '教师' ]
寄生式继承
寄生式继承的思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真地是它做了所有工作一样返回对象。
示例:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17function createGirlFriend(original) {
var clone = new Object(original); //通过调用函数创建一个新对象
clone.sayHi = function () {
console.log("hi");
};
return clone;
}
var Girl = {
name: 'Arutoria',
job: ["护士", "空姐", "教师"],
}
var girl = createGirlFriend(Girl);
girl.sayHi(); //"hi"
console.log(girl.name); // Arutoria
console.log(girl.job); // [ '护士', '空姐', '教师' ]
寄生组合式继承
组合继承是js最常用的继承模式,组合继承最大的问题就是无论在什么情况下,都会调用两次构造函数:一次是在创建子类型原型时,另一次是在子类型构造函数内部。
1 | function object(o) { |
本文作者: haise
本文地址: https://www.shifeng1993.com/2019/01/16/loophole7/
版权声明: 转载请注明出处!