js常用的继承方式

栏目: JavaScript · 发布时间: 5年前

内容简介：我们这里列举几种常见的继承方式用原型链实现对原型属性和方法的继承，用借用构造函数技术来实现实例属性的继承。如此，实现了继承了父类的原型上面的方法，也继承了父类的构造函数上面的属性。而且多个子类之间对父类修改属性互不影响。

我们这里列举几种常见的继承方式

组合继承（继承构造函数和原型链）
寄生组合继承（继承构造函数和原型链）
ES6 继承方式

组合继承

用原型链实现对原型属性和方法的继承，用借用构造函数技术来实现实例属性的继承。

function Parent(name) {
  this.name = name;
  this.colors = ["red", "green", "blue"];
}
// 父类原型上的方法，可以继承给子类
Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  // 调用父类的实例，实现构造函数的继承，继承父类的属性
  Parent.call(this, name);
  this.age = age;
}

// 继承父类的原型链，此时子类的原型已经继承了父类
// 但是子类的构造函数也变成了父类构造函数
Child.prototype = new Parent();
// 重新指定子类的构造函数为子类自己的构造函数
Child.prototype.constructor = Child;
// 子类的原型上添加自己的方法
Child.prototype.sayAge = function() {
  console.log(this.age);
};

var instance1 = new Child("hmm", "23");
instance1.sayAge(); // '23'
instance1.sayName(); // 'hmm'
instance1.color.push("black"); // ['red', 'green', 'blue', 'black'];

var instance2 = new Child("liLei", "25");
instance2.sayAge(); // '25'
instance2.sayName(); // 'liLei'
instance2.color.push("pink"); // ['red', 'green', 'blue', 'pink'];

如此，实现了继承了父类的原型上面的方法，也继承了父类的构造函数上面的属性。而且多个子类之间对父类修改属性互不影响。

缺点：

子类在继承父类构造函数的时候调用了一次父类构造函数 Parent.call(this, name) ,子类的构造函数上加了俩个属性 name/color
子类在继承父类原型的时候调用了一次 Child.prototype = new Parent(); ,给子类的原型上加了俩个属性 name/color

js常用的继承方式

缺点就是子类的构造函数和原型上存在了相同的属性和方法

寄生组合继承

在子类继承父类原型的时候不调用 new Parent() ，而是创建父类原型的副本，然后实现继承。

function inheritPrototype(child, parent) {
  var prototype = Object.create(parent.prototype); // 创建对象，创建父类原型的一个副本
  prototype.constructor = child; // 增强对象，弥补因重写原型而失去的默认的constructor 属性
  child.prototype = prototype; // 指定对象，将新创建的对象赋值给子类的原型
}

function Parent(name) {
  this.name = name;
  this.colors = ["red", "green", "blue"];
}
// 父类原型上的方法，可以继承给子类
Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  // 调用父类的实例，实现构造函数的继承，继承父类的属性
  Parent.call(this, name);
  this.age = age;
}
// 将父类原型指向子类
inheritPrototype(Child, Parent);
// 子类的原型上添加自己的方法
Child.prototype.sayAge = function() {
  console.log(this.age);
};

var instance1 = new Child("hmm", "23");
instance1.sayAge(); // '23'
instance1.sayName(); // 'hmm'
instance1.color.push("black"); // ['red', 'green', 'blue', 'black'];

var instance2 = new Child("liLei", "25");
instance2.sayAge(); // '25'
instance2.sayName(); // 'liLei'
instance2.color.push("pink"); // ['red', 'green', 'blue', 'pink'];

我们来看一看 instance1 的构造函数和原型上是否还有相同的属性 name/colors
js常用的继承方式我们看到子类的原型上没有出现多余的属性，因为我们只在子类的构造函数中使用了 Parent.call(this) 来实现继承，原型上我们是创建了一个父类原型的副本来实现继承的。

ES6 继承

ES6 的继承依靠关键字 extends ,我们先来新建一个 ES6 的类。

class Reactangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  get area() {
    return this.calcArea();
  }
  calcArea() {
    return this.height * this.width;
  }
}

const reactangle = new Reactangle(10, 20);
console.log(reactangle.area); // 200

// 继承
class Square extends Reactangle {
  constructor(length) {
    super(length, length); // 正方形
  }
  get area() {
    return this.height * this.width;
  }
}

const square = new Square(10);
console.log(square.area); // 100

以上所述就是小编给大家介绍的《js常用的继承方式》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

计算机科学概论（第11版）

J. Glenn Brookshear / 刘艺、肖成海、马小会、毛倩倩 / 人民邮电出版社 / 2011-10-1 / 69.00元

本书多年来一直深受世界各国高校师生的欢迎，是美国哈佛大学、麻省理工学院、普林斯顿大学、加州大学伯克利分校等许多著名大学的首选教材，对我国的高校教学也产生了广泛影响。本书以历史眼光，从发展的角度、当前的水平以及现阶段的研究方向等几个方面，全景式描绘了计算机科学各个子学科的主要领域。在内容编排上，本书很好地兼顾了学科广度和主题深度，把握了最新的技术趋势。本书用算法、数据抽象等核心思想贯穿各......一起来看看《计算机科学概论（第11版）》这本书的介绍吧!

码农工具