继承

项肜

原型链继承
点击查看代码

1. function Animal() {
2. this.colors = ['black', 'white']
3. }
4. Animal.prototype.getColor = function() {
5. return this.colors
6. }
7. function Dog() {}
8. Dog.prototype = new Animal()
9. let dog1 = new Dog()
10. dog1.colors.push('brown')
11. let dog2 = new Dog()
12. console.log(dog2.colors) // ['black', 'white', 'brown']

复制代码

原型链继承存在的问题：

• 问题1：原型-中包含的引⽤类型属性将被所有实例共享；
  
• 问题2：⼦类在实例化的时候不能给⽗类构造函数传参；
  

构造函数继承
点击查看代码

1. function Animal(name) {
2. this.name = name
3. this.getName = function() {
4. return this.name
5. }
6. }
7. function Dog(name) {
8. Animal.call(this, name)
9. }
10. Dog.prototype = new Animal()

复制代码

借⽤构造函数实现继承解决了原型链继承的 2 个问题：引⽤类型共享问题以及传参问题。但是由于
⽅法必须定义在构造函数中，所以会导致每次创建⼦类实例都会创建⼀遍⽅法。
组合继承
组合继承结合了原型链和盗⽤构造函数，将两者的优点集中了起来。基本的思路是使⽤原型链继承
原型上的属性和⽅法，⽽通过盗⽤构造函数继承实例属性。这样既可以把⽅法定义在原型上以实现
重⽤，⼜可以让每个实例都有⾃⼰的属性。
点击查看代码

1. function Animal(name) {
2. this.name = name
3. this.colors = ['black', 'white']
4. }
5. Animal.prototype.getName = function() {
6. return this.name
7. }
8. function Dog(name, age) {
9. Animal.call(this, name)
10. this.age = age
11. }
12. Dog.prototype = new Animal()
13. Dog.prototype.constructor = Dog
14. let dog1 = new Dog('奶昔', 2)
15. dog1.colors.push('brown')
16. let dog2 = new Dog('哈⾚', 1)
17. console.log(dog2)
18. // { name: "哈⾚", colors: ["black", "white"], age: 1 }

复制代码

组合寄生式继承(圣杯模式)
组合继承已经相对完善了，但还是存在问题，它的问题就是调⽤了 2 次⽗类构造函数，第⼀次是在
new Animal()，第⼆次是在 Animal.call() 这⾥。
所以解决⽅案就是不直接调⽤⽗类构造函数给⼦类原型赋值，⽽是通过创建空函数 F 获取⽗类原型
的副本。
寄⽣式组合继承写法上和组合继承基本类似，区别是如下这⾥：
点击查看代码

1. 删除：
2. Dog.prototype = new Animal()
3. Dog.prototype.constructor = Dog
5. 增加：
6. function F() {}
7. F.prototype = Animal.prototype
8. let f = new F()
9. f.constructor = Dog
10. Dog.prototype = f
12. 使用ES6中Object.create
13. 增加（不用增加上面那部分了）：
14. Dog.prototype = Object.create(Animal.prototype)
15. Dog.prototype.constructor = Dog

复制代码

ES6 class extends继承
点击查看代码

1. class Animal {
2. constructor(name) {
3. this.name = name
4. }
5. getName() {
6. return this.name
7. }
8. }
9. class Dog extends Animal {
10. constructor(name, age) {
11. super(name)
12. this.age = age
13. }
14. }

复制代码

来源:https://www.cnblogs.com/wan-cb/p/17680013.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！