资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/JavaScript实现继承

JavaScript实现继承

岳光 / 2685人阅读

摘要：使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。总结实现继承有种方式原型链继承借用构造函数继承组合继承原型式继承寄生式继承寄生组合式继承寄生组合式继承是大家公认的最好的实现引用类型继承的方法。

简介

本文不准备深入细节，主要是对《JavaScript高级程序设计中》介绍的JS如何实现继承做一个总结，毕竟好记性不如烂笔头。文末会附带一张神图，搞清楚这张图，原型链也就没有什么问题了。

ES5实现继承的六种方式 1. 原型链

基本思想：

利用原型链让一个引用类型继承另一个引用类型的属性和方法。

function SuperType () {
  this.property = true;
}

SuperType.prototype.getSuperValue = function () {
  return this.property;  
};

// 子类 SubType
function SubType () {
  this.subProperty = false;
}

SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
  return this.subProperty;
};

// 实例
var instance = new SubType();
console.log(instance);
console.log(instance.getSuperValue());                            // true
console.log(instance instanceof SubType);                         // true
console.log(instance instanceof SuperType);                       // true
console.log(instance instanceof Object);                          // true
console.log(SubType.prototype.isPrototypeOf(instance));           // true
console.log(SuperType.prototype.isPrototypeOf(instance));         // true
console.log(Object.prototype.isPrototypeOf(instance));            // true

缺点：

1. 来自原型对象的引用属性是所有实例共享的。

2. 创建子类实例时，无法向父类构造函数传参。

举例如下：

// 1. 来自原型对象的引用属性是所有实例共享的

// 父类
function SuperType () {
  this.colors = ["red", "blue", "green"];
}

// 子类
function SubType () {

}
SubType.prototype = new SuperType();

// 实例
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);        // ["red", "blue", "green", "black"]
var instance2 = new SubType();
console.log(instance2.colors);        // ["red", "blue", "green", "black"]

// 因为修改colors是修改的SubType.prototype.colors，所以所有的实例都会更新
// 2. 创建子类实例时，无法向父类构造函数传参

// 调用父类是在 SubType.prototype = new SuperType()
// 新建子类实例调用 new SubType()
// 所以无法再new SubType() 的时候给父类 SuperType() 传参
2. 借用构造函数

基本思想：

在子类构造函数的内部通过call()以及apply()调用父类构造函数。

// 父类 SuperType
function SuperType (name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
  
  this.getName = function () {
      return this.name;
  }
}

// 子类
function SubType (name) {
  // 继承了SuperType，同时还传递了参数
  SuperType.call(this, name);

  // 实例属性
  this.age = 20;
}

// 实例
var instance1 = new SubType("Tom");
instance1.colors.push("black");
console.log(instance1.name);               // "Tom"
console.log(instance1.getName());          // "Tom"
console.log(instance1.age);                // 20
console.log(instance1.colors);             // ["red", "blue", "green", "black"]
var instance2 = new SubType("Peter");
console.log(instance2.name);               // "Peter"
console.log(instance2.getName());          // "Peter"
console.log(instance2.age);                // 20
console.log(instance2.colors);             // ["red", "blue", "green"]

可以看到，借用构造函数实现继承，解决了原型链继承的两个问题，既可以在新建子类实例的时候给父类构造函数传递参数，也不会造成子类实例共享父类引用变量。

但是你注意到了吗，这里我们把父类方法也写在了SuperType()构造函数里面，可以像前面一样写在SuperType.prototype上吗？

答案是不可以，必须写在SuperType()构造函数里面。因为这里是通过调用SuperType.call(this)来实现继承的，并没有通过new生成一个父类实例，所以如果写在prototype上，子类是无法拿到的。

缺点：

1. 如果方法都在构造函数中定义，那么就无法复用函数。每次构建实例时都会在实例中保留方法函数，造成了内存的浪费，同时也无法实现同步更新，因为每个实例都是多带带的方法函数。如果方法写在prototype上，就只会有一份，更新时候会做到同步更新。

3. 组合继承

基本思想：

将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。

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

// 父类
function SuperType (name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function () {
  console.log(this.name);
}

// 子类
function SubType (name, age) {
  // 继承父类实例属性
  SuperType.call(this, name);
  
  // 子类实例属性
  this.age = age;
}

SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
  console.log(this.age);
};

// 实例
var instance1 = new SubType("Tom", 20);
instance1.colors.push("black");
console.log(instance1.colors);                  // ["red", "blue", "green", "black"]
instance1.sayName();                            // "Tom"
instance1.sayAge();                             // 20

var instance2 = new SubType("Peter", 30);
console.log(instance2.colors);                  // ["red", "blue", "green"]
instance2.sayName();                            // "Peter"
instance2.sayAge();                             // 30

缺点：

1. 调用了两次父类构造函数，一次通过SuperType.call(this)调用，一次通过new SuperType()调用。

4. 原型式继承

基本思想：

不使用严格意义上的构造函数，借助原型可以基于已有的对象创建新的对象，同时还不必因此创建自定义类型。

// 在object函数内部，先创建了一个临时的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个临时类型的一个新实例。
// 从本质上讲，object()对传入其中的对象执行了一次浅复制。

function object (o) {
  function F() {}
  F.prototype = o;
  return new F();
}


var person = {
  name: "Tom",
  friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

console.log(anotherPerson.friends);               // ["Shelby", "Court", "Van", "Rob", "Barbie"]
console.log(yetAnotherPerson.friends);            // ["Shelby", "Court", "Van", "Rob", "Barbie"]
console.log(person.friends);                      // ["Shelby", "Court", "Van", "Rob", "Barbie"]

ECMAScript5中新增了一个方法Object.create(prototype, descripter)接收两个参数：

prototype（必选），用作新对象的原型对象

descripter（可选），为新对象定义额外属性的对象

在传入一个参数的情况下，Object.create()与前面写的object()方法的行为相同。

var person = {
  name: "Tom",
  friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.create(person, {
    name: {
        value: "Linda",
        enumerable: true
    }
});
yetAnotherPerson.friends.push("Barbie");

console.log(anotherPerson.friends);               // ["Shelby", "Court", "Van", "Rob", "Barbie"]
console.log(yetAnotherPerson.friends);            // ["Shelby", "Court", "Van", "Rob", "Barbie"]
console.log(person.friends);                      // ["Shelby", "Court", "Van", "Rob", "Barbie"]

缺点：

1. 和原型链继承一样，所有子类实例共享父类的引用类型。

5. 寄生式继承

基本原理：

寄生式继承是与原型式继承紧密相关的一种思路，创建一个仅用于封装继承过程的函数，该函数内部以某种形式来做增强对象，最后返回对象。

function object (o) {
  function F() {}
  F.prototype = o;
  return new F();
}

function createAnother (o) {
  var clone = object(o);
  clone.sayHi = function () {
    console.log("Hi");
  }
  return clone;
}

var person = {
  name: "Tom",
  friends: ["Shelby", "Court", "Van"] 
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi();                              // "Hi"
anotherPerson.friends.push("Rob");
console.log(anotherPerson.friends);              // ["Shelby", "Court", "Van", "Rob"]
var yerAnotherPerson = createAnother(person);
console.log(yerAnotherPerson.friends);              // ["Shelby", "Court", "Van", "Rob"]

缺点：

1. 和原型链式继承一样，所有子类实例共享父类引用类型。

2. 和借用构造函数继承一样，每次创建对象都会创建一次方法。

6. 寄生组合式继承

基本思想：

将寄生式继承和组合继承相结合，解决了组合式继承中会调用两次父类构造函数的缺点。

组合继承是JavaScript最常用的继承模式，它最大的问题就是无论在什么情况下，都会调用两次父类构造函数：一次是在创建子类原型的时候，另一次是在子类构造函数内部。

// 组合继承
function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function () {
  alert(this.name);
};
function SubType(name, age) {
  SuperType.call(this, name); //第二次调用 SuperType()
  this.age = age;
}
SubType.prototype = new SuperType(); //第一次调用 SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
  alert(this.age);
};

组合继承在第一次调用SuperType构造函数时，SubType.prototype会得到两个属性：name和colors；它们都是 SuperType 的实例属性，只不过现在位于 SubType的原型中。当调用SubType构造函数时，又会调用一次SuperType构造函数，这一次又在新对象上创建了实例属性name和colors。于是，这两个属性就屏蔽了原型中的两个同名属性。

所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。

其背后的基本思路是：不必为了指定子类型的原型而调用父类的构造函数，我们需要的无非就是父类原型的一个副本而已。本质上，就是使用寄生式继承来继承父类的prototype，然后再将结果指定给子类的prototype。

寄生组合式继承的基本模型如下：

function inheritPrototype(SubType, SuperType) {
    var prototype = object(SuperType.prototype);        // 创建对象
    prototype.constructor = SubType;    // 增强对象
    SubType.prototype = prototype;      // 指定对象
    
}

实现一个完整的寄生组合式继承：

function object(o) {
  function F() { }
  F.prototype = o;
  return new F();
}

function inheritPrototype(SubType, SuperType) {
  var prototype = object(SuperType.prototype);        // 创建对象
  prototype.constructor = SubType;    // 增强对象
  SubType.prototype = prototype;      // 指定对象 
}

// 父类
function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function () {
  console.log(this.name);
};

// 子类
function SubType(name, age) {
  // 继承父类实例属性
  SuperType.call(this, name);

  // 子类实例属性
  this.age = age;
}

// 继承父类方法
inheritPrototype(SubType, SuperType);

// 子类方法
SubType.prototype.sayAge = function () {
  console.log(this.age);
};

// 实例
var instance1 = new SubType("Tom", 20);
instance1.colors.push("black");
instance1.sayAge();                                   // 20
instance1.sayName();                                  // "Tom"
console.log(instance1.colors);                        // ["red", "blue", "green", "black"]

var instance2 = new SubType("Peter", 30);
instance2.sayAge();                                   // 30
instance2.sayName();                                  // "Peter"
console.log(instance2.colors);                        // ["red", "blue", "green"]

寄生组合式继承的高效率体现在它只调用了一次SuperType构造函数，并且因此避免了再SubType.prototype上面创建不必要的、多余的属性。与此同时，原型链还能保持不变。因此，还能够正常使用instanceof和isPrototypeOf()。

开发人员普遍认为寄生组合式继承是引用类型最理想的继承方式。

ES6实现继承 
// 父类
class SuperType {
  constructor(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }

  sayName() {
    console.log(this.name);
  };
}

// 子类
class SubType extends SuperType {
  constructor(name, age) {
    // 继承父类实例属性和prototype上的方法
    super(name);
    
    // 子类实例属性
    this.age = age;
  }

  // 子类方法
  sayAge() {
    console.log(this.age);
  }
}

// 实例
var instance1 = new SubType("Tom", 20);
instance1.colors.push("black");
instance1.sayAge();                                   // 20
instance1.sayName();                                  // "Tom"
console.log(instance1.colors);                        // ["red", "blue", "green", "black"]

var instance2 = new SubType("Peter", 30);
instance2.sayAge();                                   // 30
instance2.sayName();                                  // "Peter"
console.log(instance2.colors);                        // ["red", "blue", "green"]

用ES6的语法来实现继承非常的简单，下面是把这段代码放到Babel里转码的结果图片：

可以看到，底层其实也是用寄生组合式继承来实现的。

总结

ES5实现继承有6种方式：

原型链继承

借用构造函数继承

组合继承

原型式继承

寄生式继承

寄生组合式继承

寄生组合式继承是大家公认的最好的实现引用类型继承的方法。

ES6新增class和extends语法，用来定义类和实现继承，底层也是采用了寄生组合式继承。

附图：

欢迎关注我的公众号

海外云主机 GPU服务器 Javascript实现继承 javascript如何实现继承 javascript继承 python实现继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97151.html

相关文章

  • 讲清楚之 javascript 对象继承

    摘要：中的继承并不是明确规定的，而是通过模仿实现的。继承中的继承又称模拟类继承。将函数抽离到全局对象中，函数内部直接通过作用域链查找函数。这种范式编程是基于作用域链，与前面讲的继承是基于原型链的本质区别是属性查找方式的不同。 这一节梳理对象的继承。 我们主要使用继承来实现代码的抽象和代码的复用，在应用层实现功能的封装。 javascript 的对象继承方式真的是百花齐放，属性继承、原型继承、...

    Jonathan Shieber 评论0 收藏0

  • javascript的继承你了解多少？

    摘要：和构造函数前面提到，是个内置隐藏属性，虽然在可以通过访问，但是其设计本意是不可被读取和修改的，那么我们如何利用原型链来建立继承关系提供了关键字。到这儿，思路就清晰了，怎么让对象和对象的相连实现继承只需把的构造函数的连接到就行了。 什么是继承? 大多数人使用继承不外乎是为了获得这两点好处，代码的抽象和代码的复用。代码的抽象就不用说了，交通工具和汽车这类的例子数不胜数，在传统的OO语言中(...

    baishancloud 评论0 收藏0

  • 理解JavaScript的核心知识点：原型

    摘要：首先，需要来理清一些基础的计算机编程概念编程哲学与设计模式计算机编程理念源自于对现实抽象的哲学思考，面向对象编程是其一种思维方式，与它并驾齐驱的是另外两种思路过程式和函数式编程。 JavaScript 中的原型机制一直以来都被众多开发者（包括本人）低估甚至忽视了，这是因为绝大多数人没有想要深刻理解这个机制的内涵，以及越来越多的开发者缺乏计算机编程相关的基础知识。对于这样的开发者来说 J...

    iKcamp 评论0 收藏0

  • JavaScript中的继承

    摘要：前言作为中最重要的内容之一，继承问题一直是我们关注的重点。如果一个类别继承自另一个类别，就把这个称为的子类，而把称为的父类别也可以称是的超类。 前言 作为 JavaScript 中最重要的内容之一，继承问题一直是我们关注的重点。那么你是否清晰地知道它的原理以及各种实现方式呢 阅读这篇文章，你将知道： 什么是继承 实现继承有哪几种方式 它们各有什么特点 这里默认你已经清楚的知道构造函...

    guyan0319 评论0 收藏0

  • javascript继承 --- 多种继承方式解析(ES5)

    摘要：继承前言作为一门轻量级的脚本语言在和的横空出世之后将其推向的新的高度虽然中出现的新的生成对象的类语法格式但依然为的语法糖而我们依然有必要从的原生实现入手来了解它的继承实现方式给出了更加简洁的固定的类声明方式有兴趣的可以查看阮一峰的入门下面给 javascript继承 前言 javascript作为一门轻量级的脚本语言在ES6和node.js的横空出世之后将其推向的新的高度,虽然 ES6...

    yankeys 评论0 收藏0

发表评论

登陆后可评论

0条评论

岳光

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<