原型链继承

  1. function Parent() {
  2. this.isShow = true
  3. this.info = {
  4. name: "yhd",
  5. age: 18,
  6. };
  7. }
  8. Parent.prototype.getInfo = function() {
  9. console.log(this.info);
  10. console.log(this.isShow); // true
  11. }
  12. function Child() {};
  13. Child.prototype = new Parent();
  14. let Child1 = new Child();
  15. Child1.info.gender = "男";
  16. Child1.getInfo(); // {name: "yhd", age: 18, gender: "男"}
  17. let child2 = new Child();
  18. child2.getInfo(); // {name: "yhd", age: 18, gender: "男"}
  19. child2.isShow = false
  20. console.log(child2.isShow); // false

原型链继承存在的问题:

  1. 父类的所有引用属性(info)会被所有子类共享,更改一个子类的引用属性,其他子类也会受影响
  2. 子类型实例不能给父类型构造函数传参
    原型链继承优点:
    1、父类方法可以复用

盗用构造函数继承(构造函数继承)

在子类构造函数中调用父类构造函数,可以在子类构造函数中使用call()apply()方法 通过使用call()apply()方法,Parent构造函数在为Child的实例创建的新对象的上下文执行了,就相当于新的Child实例对象上运行了Parent()函数中的所有初始化代码,结果就是每个实例都有自己的info属性。

借用构造函数实现继承解决了原型链继承的 2 个问题:引用类型共享问题以及传参问题。但是由于方法必须定义在构造函数中,所以会导致每次创建子类实例都会创建一遍方法。

  1. function Parent() {
  2. this.info = {
  3. name: "yhd",
  4. age: 19,
  5. }
  6. }
  7. function Child() {
  8. Parent.call(this)
  9. }
  10. let child1 = new Child();
  11. child1.info.gender = "男";
  12. console.log(child1.info); // {name: "yhd", age: 19, gender: "男"};
  13. let child2 = new Child();
  14. console.log(child2.info); // {name: "yhd", age: 19}

传递参数

相比于原型链继承,盗用构造函数的一个优点在于可以在子类构造函数中向父类构造函数传递参数。

  1. function Parent(name) {
  2. this.info = { name: name };
  3. }
  4. function Child(name) {
  5. //继承自Parent,并传参
  6. Parent.call(this, name);
  7. //实例属性
  8. this.age = 18
  9. }
  10. let child1 = new Child("yhd");
  11. console.log(child1.info.name); // "yhd"
  12. console.log(child1.age); // 18
  13. let child2 = new Child("wxb");
  14. console.log(child2.info.name); // "wxb"
  15. console.log(child2.age); // 18

在上面例子中,Parent构造函数接收一个name参数,并将他赋值给一个属性,在Child构造函数中调用Parent构造函数时传入这个参数, 实际上会在Child实例上定义name属性。为确保Parent构造函数不会覆盖Child定义的属性,可以在调用父类构造函数之后再给子类实例添加额外的属性

组合继承

组合继承综合了原型链继承和盗用构造函数继承(构造函数继承),将两者的优点结合了起来, 基本的思路就是使用原型链继承原型上的属性和方法,而通过构造函数继承实例属性,这样既可以把方法定义在原型上以实现重用,又可以让每个实例都有自己的属性 组合继承结合了原型链和盗用构造函数,将两者的优点集中了起来。基本的思路是使用原型链继承原型上的属性和方法,而通过盗用构造函数继承实例属性。这样既可以把方法定义在原型上以实现重用,又可以让每个实例都有自己的属性。

  1. function Parent(name) {
  2. this.name = name
  3. this.colors = ["red", "blue", "yellow"]
  4. }
  5. Parent.prototype.sayName = function () {
  6. console.log(this.name);
  7. }
  8. function Child(name, age) {
  9. // 继承父类属性
  10. Parent.call(this, name)
  11. this.age = age;
  12. }
  13. // 继承父类方法
  14. Child.prototype = new Parent();
  15. Child.prototype.sayAge = function () {
  16. console.log(this.age);
  17. }
  18. let child1 = new Child("yhd", 19);
  19. child1.colors.push("pink");
  20. console.log(child1.colors); // ["red", "blue", "yellow", "pink"]
  21. child1.sayAge(); // 19
  22. child1.sayName(); // "yhd"
  23. let child2 = new Child("wxb", 30);
  24. console.log(child2.colors); // ["red", "blue", "yellow"]
  25. child2.sayAge(); // 30
  26. child2.sayName(); // "wxb"

原型式继承

对参数对象的一种浅复制

  1. function objectCopy(obj) {
  2. function Fun() { };
  3. Fun.prototype = obj;
  4. return new Fun()
  5. }
  6. let person = {
  7. name: "yhd",
  8. age: 18,
  9. friends: ["jack", "tom", "rose"],
  10. sayName:function() {
  11. console.log(this.name);
  12. }
  13. }
  14. let person1 = objectCopy(person);
  15. person1.name = "wxb";
  16. person1.friends.push("lily");
  17. person1.sayName(); // wxb
  18. let person2 = objectCopy(person);
  19. person2.name = "gsr";
  20. person2.friends.push("kobe");
  21. person2.sayName(); // "gsr"
  22. console.log(person.friends); // ["jack", "tom", "rose", "lily", "kobe"]

优点 1. 父类方法可以引用 缺点 1. 父类的引用会被所有子类所共享 2. 子类实例不能向父类传参 PS ES5的Object.create()方法在只有第一个参数时,与这里的objectCopy()方法效果相同

class实现继承

  1. class Parent {
  2. constructor(name, sex) {
  3. this.name = name
  4. this.sex = sex
  5. }
  6. sing() {
  7. console.log(this.sex);
  8. }
  9. }
  10. class Child extends Parent {
  11. song() {
  12. super.sing();
  13. }
  14. tell() {
  15. console.log(super.name);
  16. }
  17. }
  18. let xx = new Child('xx', 'boy')
  19. xx.song() //boy
  20. xx.tell() //undefined