阅读 79

JavaScript实现继承的几种方式

这是我参与8月更文挑战的第16天,活动详情查看: 8月更文挑战

JavaScript继承形式总结一波

1.原型链继承

做法:让父构造函数的实例指向子构造函数的原型对象。

优点:子类可以访问到父类原型上的属性和方法

缺点

  1. 子类实例无法向父类构造函数传参种传递参数
  2. 无法实现多继承

写法:

  // 原型链继承
   function Perosn() {
     this.name = '张三'
   }
   Perosn.prototype.getname = function () {
     return this.name
   }
   function Son() {}
   Son.prototype=new Perosn();
   let son=new Son();
   console.log(son.getname())
复制代码

2.构造函数继承

通过改变this指向的形式来执行父类的构造函数,并且可以将我们的参数参入。

优点

解决了子类构造函数向父类构造函数种传递参数

可以实现多继承(指向多个父类)

缺点

不能继承原型链上的属性和方法

写法:

  // 构造函数继承继承
   function Perosn(name) {
     this.name = name
   }
   Perosn.prototype.getname = function () {
     return this.name
   }
   function Son(name, age) {
     Perosn.call(this, name);
     this.age = age
   }
   let son = new Son('pp', 12)
   console.log(son.name, son.age)
复制代码

3. 组合继承

通过构造函数形式继承与原型的形式的组合形式。

优点

函数可以复用

不存在引用属性问题

可以继承属性和方法,并且可以继承原型的属性和方法

缺点

调用了两次父类,产生了两份实例

  // 组合继承
   function Perosn(name) {
     this.name = name
   }
   Perosn.prototype.getname = function () {
     return this.name
   }
   function Son(name, age) {
     Perosn.call(this, name);
     this.age = age
   }
   Son.prototype = new Perosn();
   Son.prototype.constractor = Son;
 ​
   let son=new Son('pp',12)
   console.log(son.name,son.age)
   console.log(son.getname())
复制代码

4.寄生组合继承

通过寄生的方式来修补组合式继承的不足,完美的实现继承

我们可以通过Object.Create()方法来避免产生两次实例

它的原理实际上就是内部有一个新的对象,将新的对象的实例指向父类的原型。

实现一个Object.create

   function CreateObj(obj) {
     function FN() {}
     FN.prototype=obj;
     return new FN();
   }
复制代码

实现寄生组合继承:

   function People(name, age) {
     this.name = name || 'wangxiao'
     this.age = age || 27
   }
   //父类方法
   People.prototype.eat = function () {
     return this.name + this.age + 'eat sleep'
   }
 ​
   function Son(name, age) {
     People.call(this, name, age)
   }
   // 继承父类的方法
   Son.prototype = Object.create(Son.prototype)
   Son.prototype.constractor=Son
 ​
   let son=new Son(123,123)
   console.log(son.age,son.name)
复制代码

5. ES6的继承

简洁好懂,不需要我们去手动处理原型对象

代码体现:

  class Person {
     constructor(name, age) {
       this.name = name;
       this.age = age
     }
     printName() {
       console.log(this.name)
     }
   }
 ​
   class Son extends Person {
     constructor(name, age) {
       super(name, age)
     }
   }
   let son = new Son(123, 123)
   console.log(son.name, son.age)
   son.printName()
复制代码

注意super关键字实际上就是实现了构造函数继承,相当于Person.call(this,name)

文章分类
前端
文章标签