福衢寿车持续首要依赖原型链来达成的,JavaScr

2019-09-21 19:55栏目:前端开发
TAG:

一篇小说精通JS承接——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends

2018/08/02 · JavaScript · 继承

原稿出处: 那是你的玩具车吗   

说实在话,从前自个儿只必要了然“寄生组合承接”是最好的,有个祖传代码模版用就行。近来因为有的作业,多少个星期以来径直心弛神往想整理出来。本文以《JavaScript高档程序设计》上的内容为骨架,补充了ES6 Class的相干内容,从自个儿以为更易于精晓的角度将接二连三那件事陈说出来,希望大家能具备收获。

一连是面向对象编制程序中又一百般关键的定义,JavaScript支持落到实处持续,不帮忙接口承接,达成三番两次首要依附原型链来实现的。

JavaScript 各样持续格局

2017/06/20 · JavaScript · 继承

初稿出处: Xuthus Blog   

持续是面向对象编程中又一要命重大的概念,JavaScript扶助促成三番五次,不援助接口承继,完结持续首要信赖原型链来完成的。

1. 后续分类

先来个全部影象。如图所示,JS中承袭能够服从是还是不是选拔object函数(在下文中会提到),将一连分成两有个别(Object.create是ES5新增添的办法,用来标准化那么些函数)。

其间,原型链承继和原型式承袭有一致的得失,构造函数承袭与寄生式传承也互相照管。寄生组合承接基于Object.create, 同期优化了整合承袭,成为了应有尽有的接续格局。ES6 Class Extends的结果与寄生组合承接基本一致,不过完毕方案又略有差异。

下边马上步入正题。

图片 1

原型链

原型链

先是得要掌握什么是原型链,在一篇小说看懂proto和prototype的涉嫌及界别中讲得不得了详尽

原型链承接基本思维正是让三个原型对象指向另一个品类的实例

function SuperType() { this.property = true } SuperType.prototype.getSuperValue = function () { return this.property } function SubType() { this.subproperty = false } SubType.prototype = new SuperType() SubType.prototype.getSubValue = function () { return this.subproperty } var instance = new SubType() console.log(instance.getSuperValue()) // true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function SuperType() {
  this.property = true
}
SuperType.prototype.getSuperValue = function () {
  return this.property
}
function SubType() {
  this.subproperty = false
}
SubType.prototype = new SuperType()
SubType.prototype.getSubValue = function () {
  return this.subproperty
}
var instance = new SubType()
console.log(instance.getSuperValue()) // true

代码定义了七个体系SuperType和SubType,每一种项目分别有一个性能和一个方式,SubType承接了SuperType,而继续是经过创办SuperType的实例,并将该实例赋给SubType.prototype达成的。

福寿无疆的本来面目是重写原型对象,代之以贰个新类型的实例,那么存在SuperType的实例中的全数属性和章程,今后也存在于SubType.prototype中了。

大家清楚,在创建一个实例的时候,实例对象中会有二个里边指针指向创造它的原型,实行关联起来,在此处代码SubType.prototype = new SuperType(),也会在SubType.prototype创立一个之中指针,将SubType.prototype与SuperType关联起来。

故此instance指向SubType的原型,SubType的原型又指向SuperType的原型,继而在instance在调用getSuperValue()方法的时候,会顺着那条链从来往上找。

丰盛形式

在给SubType原型增多方法的时候,假如,父类上也可能有平等的名字,SubType将会覆盖这些方法,到达重新的指标。 然而以此点子依然留存于父类中。

纪事不能够以字面量的花样丰富,因为,下面说过通超过实际例承继本质上便是重写,再利用字面量情势,又是一回重写了,但这一次重写未有跟父类有任何关联,所以就能导致原型链截断。

function SuperType() { this.property = true } SuperType.prototype.getSuperValue = function () { return this.property } function SubType() { this.subproperty = false } SubType.prototype = new SuperType() SubType.prototype = { getSubValue:function () { return this.subproperty } } var instance = new SubType() console.log(instance.getSuperValue()) // error

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function SuperType() {
  this.property = true
}
SuperType.prototype.getSuperValue = function () {
  return this.property
}
function SubType() {
  this.subproperty = false
}
SubType.prototype = new SuperType()
SubType.prototype = {
  getSubValue:function () {
   return this.subproperty
  }
}
var instance = new SubType()
console.log(instance.getSuperValue())  // error

问题

单独的利用原型链承接,首要难题根源包括援引类型值的原型。

function SuperType() { this.colors = ['red', 'blue', 'green'] } function SubType() { } SubType.prototype = new SuperType() var instance1 = new SubType() var instance2 = new SubType() instance1.colors.push('black') console.log(instance1.colors) // ["red", "blue", "green", "black"] console.log(instance2.colors) // ["red", "blue", "green", "black"]

1
2
3
4
5
6
7
8
9
10
11
function SuperType() {
  this.colors = ['red', 'blue', 'green']
}
function SubType() {
}
SubType.prototype = new SuperType()
var instance1 = new SubType()
var instance2 = new SubType()
instance1.colors.push('black')
console.log(instance1.colors)  // ["red", "blue", "green", "black"]
console.log(instance2.colors) // ["red", "blue", "green", "black"]

在SuperType构造函数定义了一个colors属性,当SubType通过原型链承袭后,那些本性就能够现出SubType.prototype中,就跟特地创造了SubType.prototype.colors同样,所以会导致SubType的富有实例都会分享那天性情,所以instance1修改colors这一个引用类型值,也会呈现到instance第22中学。

2. 接续格局

上海教室上半区的原型链承继,构造函数承继,组合承继,英特网内容比很多,本文不作详细描述,只提出重视。这里给出了自家感到最轻巧通晓的一篇《JS中的承接(上)》。假若对上半区的内容面生,能够先看那篇小说,再回来继续读书;要是已经比较掌握,这一部分能够高速略过。另,上半区大气借出了yq前端的一篇三番伍回文章[1]。

第一得要领悟怎么是原型链,在一篇小说看懂proto和prototype的涉及及界别中讲得老大详尽

借用构造函数

此措施为了消除原型中包含引用类型值所拉动的主题材料。

这种方法的想想正是在子类构造函数的当中调用父类构造函数,能够借助apply()和call()方法来改换目的的实践上下文

function SuperType() { this.colors = ['red', 'blue', 'green'] } function SubType() { // 继承SuperType SuperType.call(this) } var instance1 = new SubType() var instance2 = new SubType() instance1.colors.push('black') console.log(instance1.colors) // ["red", "blue", "green", "black"] console.log(instance2.colors) // ["red", "blue", "green"]

1
2
3
4
5
6
7
8
9
10
11
12
function SuperType() {
  this.colors = ['red', 'blue', 'green']
}
function SubType() {
  // 继承SuperType
  SuperType.call(this)
}
var instance1 = new SubType()
var instance2 = new SubType()
instance1.colors.push('black')
console.log(instance1.colors)  // ["red", "blue", "green", "black"]
console.log(instance2.colors) // ["red", "blue", "green"]

在新建SubType实例是调用了SuperType构造函数,那样来说,就能在新SubType指标上施行SuperType函数中定义的具有目的开始化代码。

结果,SubType的种种实例就能够怀有温馨的colors属性的别本了。

传递参数

借助构造函数还应该有贰个优势便是足以传递参数

function SuperType(name) { this.name = name } function SubType() { // 继承SuperType SuperType.call(this, 'Jiang') this.job = 'student' } var instance = new SubType() console.log(instance.name) // Jiang console.log(instance.job) // student

1
2
3
4
5
6
7
8
9
10
11
12
function SuperType(name) {
  this.name = name
}
function SubType() {
  // 继承SuperType
  SuperType.call(this, 'Jiang')
 
  this.job = 'student'
}
var instance = new SubType()
console.log(instance.name)  // Jiang
console.log(instance.job)   // student

问题

一旦一味注重构造函数,方法都在构造函数中定义,因而函数无法达到规定的标准复用

2.1 原型式传承

主导:将父类的实例作为子类的原型

SubType.prototype = new SuperType() // 全部涉嫌到原型链承袭的继续格局都要修改子类构造函数的针对性,不然子类实例的布局函数会指向SuperType。 SubType.prototype.constructor = SubType;

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

可取:父类方法能够复用

缺点:

  • 父类的引用属性会被有着子类实例分享
  • 子类创设实例时不可能向父类传递参数

原型链承袭基本观念正是让贰个原型对象指向另一个项指标实例

构成承袭(原型链+构造函数)

结合承继是将原型链承袭和构造函数结合起来,进而发挥双方之长的一种形式。

思路正是利用原型链完毕对原型属性和艺术的接轨,而经过借用构造函数来实现对实例属性的一连。

那样,既通过在原型上定义方法达成了函数复用,又能够确认保证每种实例都有它协和的性质。

function SuperType(name) { this.name = name this.colors = ['red', 'blue', 'green'] } SuperType.prototype.sayName = function () { console.log(this.name) } function SubType(name, job) { // 承接属性 SuperType.call(this, name) this.job = job } // 承继方法 SubType.prototype = new SuperType() SubType.prototype.constructor = SuperType SubType.prototype.sayJob = function() { console.log(this.job) } var instance1 = new SubType('Jiang', 'student') instance1.colors.push('black') console.log(instance1.colors) //["red", "blue", "green", "black"] instance1.sayName() // 'Jiang' instance1.sayJob() // 'student' var instance2 = new SubType('J', 'doctor') console.log(instance2.colors) // //["red", "blue", "green"] instance2.sayName() // 'J' instance2.sayJob() // 'doctor'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function SuperType(name) {
  this.name = name
  this.colors = ['red', 'blue', 'green']
}
SuperType.prototype.sayName = function () {
  console.log(this.name)
}
function SubType(name, job) {
  // 继承属性
  SuperType.call(this, name)
 
  this.job = job
}
// 继承方法
SubType.prototype = new SuperType()
SubType.prototype.constructor = SuperType
SubType.prototype.sayJob = function() {
  console.log(this.job)
}
var instance1 = new SubType('Jiang', 'student')
instance1.colors.push('black')
console.log(instance1.colors) //["red", "blue", "green", "black"]
instance1.sayName() // 'Jiang'
instance1.sayJob()  // 'student'
var instance2 = new SubType('J', 'doctor')
console.log(instance2.colors) // //["red", "blue", "green"]
instance2.sayName()  // 'J'
instance2.sayJob()  // 'doctor'

这种形式幸免了原型链和构造函数继承的毛病,融合了他们的亮点,是最常用的一种持续格局。

2.2 构造函数承继

中央:将父类构造函数的内容复制给了子类的构造函数。那是持有继续中独一多个不涉及到prototype的两次三番。

SuperType.call(SubType);

1
SuperType.call(SubType);

可取:和原型链承继完全翻转。

  • 父类的引用属性不会被分享
  • 子类营造实例时能够向父类传递参数

短处:父类的办法不能够复用,子类实例的点子每趟都以单独创造的。

function SuperType() {

原型式传承

借助原型能够凭仗已有个别对象创设新对象,同时还不用为此创建自定义类型。

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

1
2
3
4
5
function object(o) {
  function F() {}
  F.prototype = o
  return new F()
}

在object函数内部,先创建八个一时的构造函数,然后将盛传的指标作为这些构造函数的原型,最终回到这几个有时类型的三个新实例。

实为上来讲,object对传播在那之中的指标实践了二次浅复制。

var person = { name: 'Jiang', friends: ['Shelby', 'Court'] } var anotherPerson = object(person) console.log(anotherPerson.friends) // ['Shelby', 'Court']

1
2
3
4
5
6
var person = {
  name: 'Jiang',
  friends: ['Shelby', 'Court']
}
var anotherPerson = object(person)
console.log(anotherPerson.friends)  // ['Shelby', 'Court']

这种方式要去你不能够不有八个目标作为另叁个对象的根基。

在那么些例子中,person作为另一个对象的基本功,把person传入object中,该函数就会回到八个新的靶子。

以此新目的将person作为原型,所以它的原型中就包罗贰在那之中央类型和一个征引类型。

据此意味着要是还大概有其余八个指标关系了person,anotherPerson修改数组friends的时候,也会展示在这一个目的中。

Object.create()方法

ES5由此Object.create()方法则范了原型式承袭,还行多少个参数,贰个是用作新对象原型的靶子和三个可选的为新对象定义额外属性的对象,行为无差距于,基本用法和方面包车型地铁object同样,除了object不能承受第一个参数以外。

var person = { name: 'Jiang', friends: ['Shelby', 'Court'] } var anotherPerson = Object.create(person) console.log(anotherPerson.friends) // ['Shelby', 'Court']

1
2
3
4
5
6
var person = {
  name: 'Jiang',
  friends: ['Shelby', 'Court']
}
var anotherPerson = Object.create(person)
console.log(anotherPerson.friends)  // ['Shelby', 'Court']

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属性,进而覆盖了子类原型中的同名参数。这种被遮住的场合导致了品质上的荒芜。

  this.property = true

寄生式承接

寄生式承袭的思路与寄生构造函数和工厂形式类似,即开立一个仅用于封装承接进度的函数。

function createAnother(o) { var clone = Object.create(o) // 创设四个新对象 clone.sayHi = function() { // 增添措施 console.log('hi') } return clone // 再次来到这一个目的 } var person = { name: 'Jiang' } var anotherPeson = createAnother(person) anotherPeson.sayHi()

1
2
3
4
5
6
7
8
9
10
11
12
function createAnother(o) {
  var clone = Object.create(o) // 创建一个新对象
  clone.sayHi = function() { // 添加方法
    console.log('hi')
  }
  return clone  // 返回这个对象
}
var person = {
  name: 'Jiang'
}
var anotherPeson = createAnother(person)
anotherPeson.sayHi()

基于person再次来到了一个新目的anotherPeson,新对象不独有具备了person的习性和艺术,还大概有本人的sayHi方法。

在显要思考对象并非自定义类型和构造函数的动静下,那是贰个有效的格局。

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);

}

寄生组合式承接

在前面说的组合形式(原型链+构造函数)中,承接的时候供给调用四回父类构造函数。

父类

function SuperType(name) { this.name = name this.colors = ['red', 'blue', 'green'] }

1
2
3
4
function SuperType(name) {
  this.name = name
  this.colors = ['red', 'blue', 'green']
}

先是次在子类构造函数中

function SubType(name, job) { // 承袭属性 SuperType.call(this, name) this.job = job }

1
2
3
4
5
6
function SubType(name, job) {
  // 继承属性
  SuperType.call(this, name)
 
  this.job = job
}

其次次将子类的原型指向父类的实例

// 承接方法 SubType.prototype = new SuperType()

1
2
// 继承方法
SubType.prototype = new SuperType()

当使用var instance = new SubType()的时候,会爆发两组name和color属性,一组在SubType实例上,一组在SubType原型上,只不超过实际例上的遮光了原型上的。

使用寄生式组合情势,能够避开那几个标题。

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

基本思路:不必为了钦定子类型的原型而调用父类的构造函数,我们须求的只是就是父类原型的贰个别本。

精神上正是选择寄生式承继来承继父类的原型,在将结果内定给子类型的原型。

function inheritPrototype(subType, superType) { var prototype = Object.create(superType.prototype) prototype.constructor = subType subType.prototype = prototype }

1
2
3
4
5
function inheritPrototype(subType, superType) {
  var prototype = Object.create(superType.prototype)
  prototype.constructor = subType
  subType.prototype = prototype
}

该函数完成了寄生组合承接的最简便易行款式。

以此函数接受多少个参数,三个子类,多少个父类。

首先步成立父类原型的别本,第二步将开创的副本加多constructor属性,第三部将子类的原型指向这一个别本。

function SuperType(name) { this.name = name this.colors = ['red', 'blue', 'green'] } SuperType.prototype.sayName = function () { console.log(this.name) } function SubType(name, job) { // 传承属性 SuperType.call(this, name) this.job = job } // 承接inheritPrototype(SubType, SuperType) var instance = new SubType('Jiang', 'student') instance.sayName()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function SuperType(name) {
  this.name = name
  this.colors = ['red', 'blue', 'green']
}
SuperType.prototype.sayName = function () {
  console.log(this.name)
}
function SubType(name, job) {
  // 继承属性
  SuperType.call(this, name)
 
  this.job = job
}
// 继承
inheritPrototype(SubType, SuperType)
var instance = new SubType('Jiang', 'student')
instance.sayName()

补充:直接接纳Object.create来落到实处,其实就是将上边封装的函数拆开,那样演示能够更易于驾驭。

function SuperType(name) { this.name = name this.colors = ['red', 'blue', 'green'] } SuperType.prototype.sayName = function () { console.log(this.name) } function SubType(name, job) { // 承接属性 SuperType.call(this, name) this.job = job } // 继承 SubType.prototype = Object.create(SuperType.prototype) // 修复constructor SubType.prototype.constructor = SubType var instance = new SubType('Jiang', 'student') instance.sayName()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function SuperType(name) {
  this.name = name
  this.colors = ['red', 'blue', 'green']
}
SuperType.prototype.sayName = function () {
  console.log(this.name)
}
function SubType(name, job) {
  // 继承属性
  SuperType.call(this, name)
 
  this.job = job
}
// 继承
SubType.prototype = Object.create(SuperType.prototype)
// 修复constructor
SubType.prototype.constructor = SubType
var instance = new SubType('Jiang', 'student')
instance.sayName()

ES6新添了二个方法,Object.setPrototypeOf,可以直接开立关联,並且不要手动增添constructor属性。

// 继承 Object.setPrototypeOf(SubType.prototype, SuperType.prototype) console.log(SubType.prototype.constructor === SubType) // true

1
2
3
// 继承
Object.setPrototypeOf(SubType.prototype, SuperType.prototype)
console.log(SubType.prototype.constructor === SubType) // true

1 赞 2 收藏 评论

图片 2

2.5 寄生式承继

主导:使用原型式承接获得三个对象对象的浅复制,然后加强那么些浅复制的工夫。

利弊:仅提供一种思路,没什么可取

function createAnother(original){ var clone=object(original); //通过调用函数创建一个新指标 clone.sayHi = function(){ //以某种格局来加强这些指标 alert("hi"); }; return clone; //再次回到那几个指标} var person = { name: "Nicolas", 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"

SuperType.prototype.getSuperValue = function () {

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);
}

利弊:那是一种完美的一连格局。

  return this.property

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中不是。

}

3. 总结

  • ES6 Class extends是ES5接续的语法糖
  • JS的持续除了构造函数承接之外都依照原型链创设的
  • 能够用寄生组合继承完成ES6 Class extends,可是照旧会有微小的异样

function SubType() {

参照文章:

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

[2]《JavaScript高档编制程序》

1 赞 收藏 评论

图片 3

  this.subproperty = false

}

SubType.prototype = new SuperType()

SubType.prototype.getSubValue = function () {

  return this.subproperty

}

var instance = new SubType()

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

代码定义了八个类型SuperType和SubType,各个体系分别有壹天性格和三个方法,SubType承接了SuperType,而三番五次是由此创办SuperType的实例,并将该实例赋给SubType.prototype达成的。

金玉满堂的本来面目是重写原型对象,代之以一个新类型的实例,那么存在SuperType的实例中的全体属性和议程,今后也存在于SubType.prototype中了。

咱俩精通,在创造三个实例的时候,实例对象中会有贰在那之中间指针指向创设它的原型,举办关联起来,在那边代码SubType.prototype = new SuperType(),也会在SubType.prototype创立二个里面指针,将SubType.prototype与SuperType关联起来。

就此instance指向SubType的原型,SubType的原型又指向SuperType的原型,继而在instance在调用getSuperValue()方法的时候,会顺着那条链一直往上找。

丰硕艺术

在给SubType原型加多方法的时候,假若,父类上也可以有同等的名字,SubType将会覆盖这么些情势,到达重新的目标。 可是这么些法子依然留存于父类中。

纪事不能够以字面量的款式丰裕,因为,上面说过通超过实际例继承本质上正是重写,再接纳字面量格局,又是三遍重写了,但这一次重写未有跟父类有其余关联,所以就能够促成原型链截断。

function SuperType() {

  this.property = true

}

SuperType.prototype.getSuperValue = function () {

  return this.property

}

function SubType() {

  this.subproperty = false

}

SubType.prototype = new SuperType()

SubType.prototype = {

  getSubValue:function () {

  return this.subproperty

  }

}

var instance = new SubType()

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

问题

偏偏的运用原型链承继,主要难题源于包罗援用类型值的原型。

function SuperType() {

  this.colors = ['red', 'blue', 'green']

}

function SubType() {

}

SubType.prototype = new SuperType()

var instance1 = new SubType()

var instance2 = new SubType()

instance1.colors.push('black')

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

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

在SuperType构造函数定义了贰个colors属性,当SubType通过原型链承继后,这几个天性就晤面世SubType.prototype中,就跟特意成立了SubType.prototype.colors同样,所以会促成SubType的装有实例都会分享那特性格,所以instance1修改colors这一个援引类型值,也会显示到instance2中。

借用构造函数

此办法为了减轻原型中包含援用类型值所推动的标题。

这种办法的想想便是在子类构造函数的里边调用父类构造函数,能够借助apply()和call()方法来更动指标的进行上下文

function SuperType() {

  this.colors = ['red', 'blue', 'green']

}

function SubType() {

  // 继承SuperType

  SuperType.call(this)

}

var instance1 = new SubType()

var instance2 = new SubType()

instance1.colors.push('black')

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

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

在新建SubType实例是调用了SuperType构造函数,那样来讲,就能在新SubType目的上推行SuperType函数中定义的富有指标发轫化代码。

结果,SubType的每个实例就能怀有友好的colors属性的别本了。

传递参数

注重构造函数还大概有一个优势正是能够传递参数

function SuperType(name) {

  this.name = name

}

function SubType() {

  // 继承SuperType

  SuperType.call(this, 'Jiang')

  this.job = 'student'

}

var instance = new SubType()

console.log(instance.name)  // Jiang

console.log(instance.job)  // student

问题

一经唯有依附构造函数,方法都在构造函数中定义,由此函数不或者直达复用

结合继承(原型链+构造函数)

组成继承是将原型链承继和构造函数结合起来,进而发挥两岸之长的一种情势。

思路正是应用原型链完毕对原型属性和情势的继续,而透过借用构造函数来落到实处对实例属性的一而再。

与上述同类,既通过在原型上定义方法实现了函数复用,又可以保证各种实例都有它和煦的性质。

function SuperType(name) {

  this.name = name

  this.colors = ['red', 'blue', 'green']

}

SuperType.prototype.sayName = function () {

  console.log(this.name)

}

function SubType(name, job) {

  // 承袭属性

  SuperType.call(this, name)

  this.job = job

}

// 承接方法

SubType.prototype = new SuperType()

SubType.prototype.constructor = SuperType

SubType.prototype.sayJob = function() {

  console.log(this.job)

}

var instance1 = new SubType('Jiang', 'student')

instance1.colors.push('black')

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

instance1.sayName() // 'Jiang'

instance1.sayJob()  // 'student'

var instance2 = new SubType('J', 'doctor')

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

instance2.sayName()  // 'J'

instance2.sayJob()  // 'doctor'

这种情势制止了原型链和构造函数承袭的毛病,融入了他们的独到之处,是最常用的一种持续方式。

原型式承接

依傍原型可以依据已有的对象创设新指标,同一时间还不用为此创建自定义类型。

function object(o) {

  function F() {}

  F.prototype = o

  return new F()

}

在object函数内部,先创立叁个不常的构造函数,然后将盛传的靶子作为这一个构造函数的原型,最终回到这一个有的时候类型的二个新实例。

真相上来讲,object对传播在那之中的目的实施了三次浅复制。

var person = {

  name: 'Jiang',

  friends: ['Shelby', 'Court']

}

var anotherPerson = object(person)

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

这种格局要去你不能够不有二个目标作为另三个对象的功底。

在那个例子中,person作为另多个对象的基础,把person传入object中,该函数就能回到三个新的靶子。

以此新目的将person作为原型,所以它的原型中就包蕴三个主导类型和二个援引类型。

进而意味着假设还会有别的叁个目的关系了person,anotherPerson修改数组friends的时候,也会展现在这么些目的中。

Object.create()方法

ES5由此Object.create()方法则范了原型式传承,还行八个参数,几个是用作新对象原型的目的和贰个可选的为新目的定义额外属性的指标,行为一样,基本用法和地点的object同样,除了object不可能接受第2个参数以外。

var person = {

  name: 'Jiang',

  friends: ['Shelby', 'Court']

}

var anotherPerson = Object.create(person)

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

寄生式传承

寄生式承接的思路与寄生构造函数和工厂形式类似,即创设八个仅用于封装承继进程的函数。

function createAnother(o) {

  var clone = Object.create(o) // 创设贰个新对象

  clone.sayHi = function() { // 增加艺术

    console.log('hi')

  }

  return clone  // 重临那个目的

}

var person = {

  name: 'Jiang'

}

var anotherPeson = createAnother(person)

anotherPeson.sayHi()

据书上说person重回了一个新目的anotherPeson,新对象不止有着了person的性质和艺术,还会有温馨的sayHi方法。

在关键思虑对象并不是自定义类型和构造函数的情状下,那是三个卓有功用的形式。

寄生组合式承接

在头里说的组成形式(原型链+构造函数)中,承袭的时候须要调用一回父类构造函数。

父类

function SuperType(name) {

  this.name = name

  this.colors = ['red', 'blue', 'green']

}

第三遍在子类构造函数中

function SubType(name, job) {

  // 承继属性

  SuperType.call(this, name)

  this.job = job

}

第二回将子类的原型指向父类的实例

// 承袭方法

SubType.prototype = new SuperType()

当使用var instance = new SubType()的时候,会产生两组name和color属性,一组在SubType实例上,一组在SubType原型上,只不超过实际例上的屏蔽了原型上的。

利用寄生式组合形式,能够规避那个难题。

这种情势通过借用构造函数来承袭属性,通过原型链的混成方式来持续方法。

基本思路:不必为了内定子类型的原型而调用父类的构造函数,大家须求的一味正是父类原型的贰个别本。

本质上就是应用寄生式承接来承接父类的原型,在将结果钦命给子类型的原型。

function inheritPrototype(subType, superType) {

  var prototype = Object.create(superType.prototype)

  prototype.constructor = subType

  subType.prototype = prototype

}

该函数完结了寄生组合承接的最简单易行款式。

以此函数接受五个参数,一个子类,三个父类。

率先步创立父类原型的副本,第二步将创立的别本增多constructor属性,第三部将子类的原型指向那个别本。

function SuperType(name) {

  this.name = name

  this.colors = ['red', 'blue', 'green']

}

SuperType.prototype.sayName = function () {

  console.log(this.name)

}

function SubType(name, job) {

  // 承袭属性

  SuperType.call(this, name)

  this.job = job

}

// 继承

inheritPrototype(SubType, SuperType)

var instance = new SubType('Jiang', 'student')

instance.sayName()

增加补充:间接行使Object.create来兑现,其实就是将地点封装的函数拆开,那样演示能够更便于精晓。

function SuperType(name) {

  this.name = name

  this.colors = ['red', 'blue', 'green']

}

SuperType.prototype.sayName = function () {

  console.log(this.name)

}

function SubType(name, job) {

  // 承袭属性

  SuperType.call(this, name)

  this.job = job

}

// 继承

SubType.prototype = Object.create(SuperType.prototype)

// 修复constructor

SubType.prototype.constructor = SubType

var instance = new SubType('Jiang', 'student')

instance.sayName()

ES6新扩张了贰个方法,Object.setPrototypeOf,能够直接创立关联,並且并不是手动增多constructor属性。

// 继承

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

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

版权声明:本文由大奖888-www.88pt88.com-大奖888官网登录发布于前端开发,转载请注明出处:福衢寿车持续首要依赖原型链来达成的,JavaScr