Bootstrap

js原型和原型链继承

继承

通俗来说,就是子类能够继承父类构造函数及原型对象上的属性和方法。那么怎么实现继承呢?

1. 原型继承

实现原理:因为实例对象上有构造函数和他的原型对象上的所有属性和方法,被所有实例共享
代码实现
父类为 Person,子类为Student

function Person() {
     this.name = '小明';
     this.has = ['车', '房'];
   }
   Person.prototype.getName = function () {
     console.log("我的名字是:" + this.name);
   }

   function Student() {
     this.major = "English";
   }
   Student.prototype = new Person();
   Student.prototype.constructor = Student;
   // 以下测试代码
   var student1 = new Student();
   student1.has.push("存款"); //s99行
   console.log(student1)

原型继承带来的问题:

  • 不能传参给父类
  • 父类属性是引用类型, 会被子类篡改
    这里 s99 行给子类 Student 的 has 属性增加了一个“存款”,父类Person的has属性也改了。

2. 构造函数继承

实现原理:在子类构造函数中直接调用父类构造函数
代码实现
父类为 Person,子类为Student,以下几种实现方法同上。

function Person(args) {
     this.name = '小明';
     this.has = ['车', '房'];
   }
   Person.prototype.getName = function () {
     console.log("我的名字是:" + this.name);
   }

   function Student(args) {
     Person.call(this,args) //调用父类构造函数,并修改this指向为Student
     this.major = "English"; //这里涉及原型链继承会先找自己身上有没有该属性,找不到再沿着原型链向上找。所以子类自己属性放在上一行代码的下面。如果有同名属性,覆盖上级
   }
   // 以下测试代码
   var student1 = new Student('学生1');
   student1.has.push("存款");
   console.log(student1)

构造函数继承解决了原型继承的问题,但也有不足:

  • 不能继承父类原型对象 prototype 上的方法

3. 组合式继承

实现原理:将以上两种方法组合起来使用
代码实现

function Person(args) {
     this.name = '小明';
     this.has = ['车', '房'];
   }
   Person.prototype.getName = function () {
     console.log("我的名字是:" + this.name);
   }

   function Student(args) {
     Person.call(this,args)
     this.major = "English";
   }

   Student.prototype = new Person();
   Student.prototype.constructor = Student;
   // 以下测试代码
   var student1 = new Student('学生1');
   student1.has.push("存款");
   console.log(student1)

问题:父类构造函数被执行了两次

3. 寄生组合式继承

实现原理:在组合式继承的基础上,使用Object.create创建空对象,并实现继承。

A = Object.create( B ) 会创建一个新对象,并使 A 的原型,指向 B
A.__proto__ === B

代码实现

function Person(args) {
     this.name = '小明';
     this.has = ['车', '房'];
   }
   Person.prototype.getName = function () {
     console.log("我的名字是:" + this.name);
   }

   function Student(args) {
     Person.call(this,args)
     this.major = "English";
   }
   
   Student.prototype = Object.create(Person.prototype); 
   Student.prototype.constructor = Student;
   // 以下测试代码
   var student1 = new Student('学生1');
   student1.has.push("存款");
   console.log(student1)

原型链图示

原型链示例

;