意气风发篇小说精通JS世襲——原型链/布局函数/组合/原型式/寄生式/寄生组合/Class extends

2018/08/02 · JavaScript
· 继承

初稿出处:
这是您的玩具车吗   

说实在话,早前本身只供给理解“寄生组合世襲”是最佳的,有个祖传代码模版用就行。这两天因为部分业务,多少个星期以来直接耿耿于怀想收拾出来。本文以《JavaScript高等程序设计》上的剧情为骨架,补充了ES6
Class的相关内容,从作者觉着更易于领会的角度将一而再三翻五次那事陈诉出来,希望大家能具备收获。

JavaScript 四种持续形式

2017/06/20 · JavaScript
· 继承

原来的小讲出处: Xuthus
Blog   

世襲是面向对象编制程序中又生龙活虎特别主要的定义,JavaScript援救贯彻三番一遍,不援助接口世袭,完毕持续首要依据原型链来达成的。

1. 延续分类

先来个全部影像。如图所示,JS中三回九转能够依据是不是选拔object函数(在下文中会提到),将持续分成两片段(Object.create是ES5新扩张的章程,用来标准化那么些函数)。

里头,原型链世襲和原型式世襲有平等的优劣点,布局函数世襲与寄生式世袭也竞相看护。寄生组合世袭基于Object.create,
同一时候优化了组合世襲,成为了宏观的世袭方式。ES6 Class
Extends的结果与寄生组合世袭基本生机勃勃致,可是落实方案又略有不一致。

上面立刻进入正题。

home88一必发 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(卡塔尔(英语:State of Qatar)方法的时候,会顺着那条链一向往上找。

累积格局

在给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]。

借用布局函数

此办法为了化解原型中含有引用类型值所推动的主题材料。

这种办法的动脑筋便是在子类构造函数的内部调用父类架构函数,能够依附apply()和call(卡塔尔(英语:State of Qatar)方法来更动指标的推行上下文

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;

亮点:父类方法能够复用

缺点:

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

整合世襲(原型链+布局函数卡塔尔国

组合世襲是将原型链世襲和布局函数结合起来,从而发挥两岸之长的风流洒脱种格局。

思路便是接纳原型链达成对原型属性和措施的接二连三,而透过借用布局函数来贯彻对实例属性的一而再再而三。

如此,既通过在原型上定义方法完毕了函数复用,又能够确定保障各种实例都有它和睦的质量。

home88一必发,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 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(卡塔尔(英语:State of Qatar)方法则范了原型式世袭,能够承担五个参数,二个是用作新对象原型的靶子和三个可选的为新指标定义额外属性的对象,行为无差别于,基本用法和上边的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(卡塔尔 // 第2回调用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 createAnother(o卡塔尔国 { var clone = Object.create(o卡塔尔 //
创制一个新目的 clone.sayHi = function(卡塔尔(قطر‎ { // 增加模式 console.log(‘hi’卡塔尔} return clone // 再次回到那个指标 } var person = { name: ‘Jiang’ } var
anotherPeson = createAnother(person卡塔尔(英语:State of Qatar) 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);

寄生组合式世襲

在眼下说的组合格局(原型链+构造函数卡塔尔(英语:State of Qatar)中,袭承的时候须求调用四回父类构造函数。

父类

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卡塔尔(英语:State of Qatar) { // 继承属性 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 (卡塔尔(英语:State of Qatar) {
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 收藏
评论

home88一必发 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"

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(卡塔尔(英语:State of Qatar){ alert(this.name卡塔尔国; }; function
SubType(name, age卡塔尔(英语:State of Qatar){ 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);
}

利弊:那是豆蔻梢头种完美的继承格局。

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卡塔尔(英语:State of Qatar);

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,不过照旧会有一线的差别

参照文章:

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

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

1 赞 收藏
评论

home88一必发 2

相关文章