2.1 原型式继承

核心:将父类的实例作为子类的原型

SubType.prototype = new SuperType() //
所有涉及到原型链继承的继承方式都要修改子类构造函数的指向,否则子类实例的构造函数会指向SuperType。
SubType.prototype.constructor = SubType;

1
2
3
SubType.prototype = new SuperType()
// 所有涉及到原型链继承的继承方式都要修改子类构造函数的指向,否则子类实例的构造函数会指向SuperType。
SubType.prototype.constructor = SubType;

优点:父类方法可以复用

缺点:

  • 父类的引用属性会被所有子类实例共享
  • 子类构建实例时不能向父类传递参数

// 继承

2. 继承方式

上图上半区的原型链继承,构造函数继承,组合继承,网上内容比较多,本文不作详细描述,只指出重点。这里给出了我认为最容易理解的一篇《JS中的继承(上)》。如果对上半区的内容不熟悉,可以先看这篇文章,再回来继续阅读;如果已经比较熟悉,这部分可以快速略过。另,上半区大量借用了yq前端的一篇继承文章[1]。

  friends: [‘Shelby’, ‘Court’]

参考文章:

[1]《js继承、构造函数继承、原型链继承、组合继承、组合继承优化、寄生组合继承

[2]《JavaScript高级编程》

1 赞 收藏
评论

图片 1

  console.log(this.job)

3. 总结

  • ES6 Class extends是ES5继承的语法糖
  • JS的继承除了构造函数继承之外都基于原型链构建的
  • 可以用寄生组合继承实现ES6 Class extends,但是还是会有细微的差别

所以意味着如果还有另外一个对象关联了person,anotherPerson修改数组friends的时候,也会体现在这个对象中。

2.2 构造函数继承

核心:将父类构造函数的内容复制给了子类的构造函数。这是所有继承中唯一一个不涉及到prototype的继承。

SuperType.call(SubType);

1
SuperType.call(SubType);

优点:和原型链继承完全反过来。

  • 父类的引用属性不会被共享
  • 子类构建实例时可以向父类传递参数

缺点:父类的方法不能复用,子类实例的方法每次都是单独创建的。

SubType.prototype.constructor = SuperType

1. 继承分类

先来个整体印象。如图所示,JS中继承可以按照是否使用object函数(在下文中会提到),将继承分成两部分(Object.create是ES5新增的方法,用来规范化这个函数)。

其中,原型链继承和原型式继承有一样的优缺点,构造函数继承与寄生式继承也相互对应。寄生组合继承基于Object.create,
同时优化了组合继承,成为了完美的继承方式。ES6 Class
Extends的结果与寄生组合继承基本一致,但是实现方案又略有不同。

下面马上进入正题。

图片 2

在主要考虑对象而不是自定义类型和构造函数的情况下,这是一个有用的模式。

2.5 寄生式继承

核心:使用原型式继承获得一个目标对象的浅复制,然后增强这个浅复制的能力。

优缺点:仅提供一种思路,没什么优点

function createAnother(original){ var clone=object(original);
//通过调用函数创建一个新对象 clone.sayHi = function(){
//以某种方式来增强这个对象 alert(“hi”); }; return clone; //返回这个对象
} var person = { name: “Nicholas”, friends: [“Shelby”, “Court”, “Van”]
}; var anotherPerson = createAnother(person); anotherPerson.sayHi();
//”hi”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function createAnother(original){
    var clone=object(original);    //通过调用函数创建一个新对象
    clone.sayHi = function(){      //以某种方式来增强这个对象
        alert("hi");
    };
    return clone;                  //返回这个对象
}
 
var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};
 
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

instance1.sayName() // ‘Jiang’

一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends

2018/08/02 · JavaScript
· 继承

原文出处:
这是你的玩具车吗   

说实在话,以前我只需要知道“寄生组合继承”是最好的,有个祖传代码模版用就行。最近因为一些事情,几个星期以来一直心心念念想整理出来。本文以《JavaScript高级程序设计》上的内容为骨架,补充了ES6
Class的相关内容,从我认为更容易理解的角度将继承这件事叙述出来,希望大家能有所收获。

首先得要明白什么是原型链,在一篇文章看懂proto和prototype的关系及区别中讲得非常详细

2.7 ES6 Class extends

核心:
ES6继承的结果和寄生组合继承相似,本质上,ES6继承是一种语法糖。但是,寄生组合继承是先创建子类实例this对象,然后再对其增强;而ES6先将父类实例对象的属性和方法,加到this上面(所以必须先调用super方法),然后再用子类的构造函数修改this。

class A {} class B extends A { constructor() { super(); } }

1
2
3
4
5
6
7
class A {}
 
class B extends A {
  constructor() {
    super();
  }
}

ES6实现继承的具体原理:

class A { } class B { } Object.setPrototypeOf = function (obj, proto) {
obj.__proto__ = proto; return obj; } // B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype); // B 继承 A 的静态属性
Object.setPrototypeOf(B, A);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class A {
}
 
class B {
}
 
Object.setPrototypeOf = function (obj, proto) {
  obj.__proto__ = proto;
  return obj;
}
 
// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);
 
// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);
 

ES6继承与ES5继承的异同:

相同点:本质上ES6继承是ES5继承的语法糖

不同点:

  • ES6继承中子类的构造函数的原型链指向父类的构造函数,ES5中使用的是构造函数复制,没有原型链指向。
  • ES6子类实例的构建,基于父类实例,ES5中不是。

  // 继承属性

2.4 原型式继承

核心:原型式继承的object方法本质上是对参数对象的一个浅复制。

优点:父类方法可以复用

缺点:

  • 父类的引用属性会被所有子类实例共享
  • 子类构建实例时不能向父类传递参数

function object(o){ function F(){} F.prototype = o; return new F(); }
var person = { name: “Nicholas”, 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”); alert(person.friends);
//”Shelby,Court,Van,Rob,Barbie”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function object(o){
  function F(){}
  F.prototype = o;
  return new F();
}
 
var person = {
    name: "Nicholas",
    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");
alert(person.friends);   //"Shelby,Court,Van,Rob,Barbie"
 

ECMAScript 5 通过新增
Object.create()方法规范化了原型式继承。这个方法接收两个参数:一
个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。在传入一个参数的情况下,
Object.create()与 object()方法的行为相同。——《JAVASCript高级编程》

所以上文中代码可以转变为

var yetAnotherPerson = object(person); => var yetAnotherPerson =
Object.create(person);

1
var yetAnotherPerson = object(person); => var yetAnotherPerson = Object.create(person);

该函数实现了寄生组合继承的最简单形式。

2.6 寄生组合继承

刚才说到组合继承有一个会两次调用父类的构造函数造成浪费的缺点,寄生组合继承就可以解决这个问题。

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(){ alert(this.name); }; function
SubType(name, age){ SuperType.call(this, name); this.age = age; } //
核心:因为是对父类原型的复制,所以不包含父类的构造函数,也就不会调用两次父类的构造函数造成浪费
inheritPrototype(SubType, SuperType); SubType.prototype.sayAge =
function(){ alert(this.age); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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(){
    alert(this.name);
};
 
function SubType(name, age){
    SuperType.call(this, name);
    this.age = age;
}
// 核心:因为是对父类原型的复制,所以不包含父类的构造函数,也就不会调用两次父类的构造函数造成浪费
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
    alert(this.age);
}

优缺点:这是一种完美的继承方式。

  function F() {}

2.3 组合继承

核心:原型式继承和构造函数继承的组合,兼具了二者的优点。

function SuperType() { this.name = ‘parent’; this.arr = [1, 2, 3]; }
SuperType.prototype.say = function() { console.log(‘this is parent’) }
function SubType() { SuperType.call(this) // 第二次调用SuperType }
SubType.prototype = new SuperType() // 第一次调用SuperType

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function SuperType() {
    this.name = ‘parent’;
    this.arr = [1, 2, 3];
}
 
SuperType.prototype.say = function() {
    console.log(‘this is parent’)
}
 
function SubType() {
    SuperType.call(this) // 第二次调用SuperType
}
 
SubType.prototype = new SuperType() // 第一次调用SuperType

优点:

  • 父类的方法可以被复用
  • 父类的引用属性不会被共享
  • 子类构建实例时可以向父类传递参数

缺点:

调用了两次父类的构造函数,第一次给子类的原型添加了父类的name,
arr属性,第二次又给子类的构造函数添加了父类的name,
arr属性,从而覆盖了子类原型中的同名参数。这种被覆盖的情况造成了性能上的浪费。

此方法为了解决原型中包含引用类型值所带来的问题。

function object(o) {

}

  // 继承SuperType

基本思路:不必为了指定子类型的原型而调用父类的构造函数,我们需要的无非就是父类原型的一个副本。

  return this.subproperty

function SuperType() {

var anotherPerson = object(person)

}

function SubType() {

}

父类

console.log(anotherPerson.friends)  // [‘Shelby’, ‘Court’]

console.log(instance2.colors) // [“red”, “blue”, “green”]

  this.colors = [‘red’, ‘blue’, ‘green’]

function SuperType(name) {

function SuperType(name) {

console.log(instance1.colors)  // [“red”, “blue”, “green”, “black”]

  SuperType.call(this, ‘Jiang’)

console.log(SubType.prototype.constructor === SubType) // true

SubType.prototype.getSubValue = function () {

  var clone = Object.create(o) // 创建一个新对象

继承是面向对象编程中又一非常重要的概念,JavaScript支持实现继承,不支持接口继承,实现继承主要依靠原型链来实现的。

}

借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。

在给SubType原型添加方法的时候,如果,父类上也有同样的名字,SubType将会覆盖这个方法,达到重新的目的。
但是这个方法依然存在于父类中。

}

  }

function SubType(name, job) {

如果仅仅借助构造函数,方法都在构造函数中定义,因此函数无法达到复用

  this.colors = [‘red’, ‘blue’, ‘green’]

  return this.property

使用寄生式组合模式,可以规避这个问题。

  this.subproperty = false

本质上来说,object对传入其中的对象执行了一次浅复制。

var instance1 = new SubType(‘Jiang’, ‘student’)

}

添加方法

  prototype.constructor = subType

Object.setPrototypeOf(SubType.prototype, SuperType.prototype)

ES6新增了一个方法,Object.setPrototypeOf,可以直接创建关联,而且不用手动添加constructor属性。

}

    console.log(‘hi’)

代码定义了两个类型SuperType和SubType,每个类型分别有一个属性和一个方法,SubType继承了SuperType,而继承是通过创建SuperType的实例,并将该实例赋给SubType.prototype实现的。

function createAnother(o) {

console.log(instance2.colors) // [“red”, “blue”, “green”, “black”]

SuperType.prototype.sayName = function () {

在这个例子中,person作为另一个对象的基础,把person传入object中,该函数就会返回一个新的对象。

// 继承

  console.log(this.name)

  this.property = true

}

  return new F()

instance.sayName()

  name: ‘Jiang’,

在新建SubType实例是调用了SuperType构造函数,这样以来,就会在新SubType对象上执行SuperType函数中定义的所有对象初始化代码。

我们知道,在创建一个实例的时候,实例对象中会有一个内部指针指向创建它的原型,进行关联起来,在这里代码SubType.prototype
= new
SuperType(),也会在SubType.prototype创建一个内部指针,将SubType.prototype与SuperType关联起来。

}

  SuperType.call(this)

传递参数

var person = {

  var prototype = Object.create(superType.prototype)

  name: ‘Jiang’,

}

这种模式通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。

原型链

结果,SubType的每个实例就会具有自己的colors属性的副本了。

单纯的使用原型链继承,主要问题来自包含引用类型值的原型。

}

SubType.prototype = new SuperType()

}

  // 继承属性

function SubType() {

inheritPrototype(SubType, SuperType)

}

console.log(instance1.colors) //[“red”, “blue”, “green”, “black”]

寄生式继承的思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数。

第一次在子类构造函数中

原型链继承基本思想就是让一个原型对象指向另一个类型的实例

function SuperType(name) {

}

寄生式继承

补充:直接使用Object.create来实现,其实就是将上面封装的函数拆开,这样演示可以更容易理解。

}

console.log(instance.name)  // Jiang

var instance1 = new SubType()

function SuperType(name) {

寄生组合式继承

  this.colors = [‘red’, ‘blue’, ‘green’]

原型式继承

  console.log(this.name)

}

本质上就是使用寄生式继承来继承父类的原型,在将结果指定给子类型的原型。

console.log(instance.getSuperValue()) // true

  clone.sayHi = function() { // 添加方法

var instance = new SubType()

function SuperType(name) {

借助构造函数还有一个优势就是可以传递参数

问题

基于person返回了一个新对象anotherPeson,新对象不仅拥有了person的属性和方法,还有自己的sayHi方法。

  this.name = name

  // 继承SuperType

SubType.prototype = new SuperType()

  this.colors = [‘red’, ‘blue’, ‘green’]

var anotherPerson = Object.create(person)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图