寄生组合,javascript中的继承

一篇小说掌握JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends

2018/08/02 · JavaScript
· 继承

皇家赌场手机版,原版的书文出处:
那是你的玩具车吗   

说实在话,此前本身只必要理解“寄生组合继承”是最好的,有个祖传代码模版用就行。近日因为有的工作,多少个星期以来直接一遍各处挂念想整理出来。本文以《JavaScript高级程序设计》上的始末为骨架,补充了ES6
Class的连锁内容,从自作者以为更便于明白的角度将延续那件事叙述出来,希望大家能抱有收获。

继承是面向对象编制程序中又三千0分关键的定义,JavaScript支持落到实处一而再,不帮衬接口继承,实现持续首要借助原型链来达成的。

JavaScript 八种持续格局

2017/06/20 · JavaScript
· 继承

原稿出处: Xuthus
Blog   

此起彼伏是面向对象编制程序中又一非凡首要的概念,JavaScript协助促成接二连三,不协助接口继承,完毕一而再重要依靠原型链来完毕的。

 前文说过,组合继承是javascript最常用的接续方式,可是,它也有自身的不足:组合继承无论在哪些景况下,都会调用三回父类构造函数,二遍是在创造子类原型的时候,另贰遍是在子类构造函数内部.子类最后会蕴藏父类对象的凡事实例属性,但大家只可以在调用子类构造函数时重写那么些属性.请再看三回组合继承的例子:

1. 后续分类

先来个全部印象。如图所示,JS中再三再四能够遵从是还是不是采纳object函数(在下文中会提到),将持续分成两片段(Object.create是ES5新增的点子,用来规范化这一个函数)。

其间,原型链继承和原型式继承有同样的得失,构造函数继承与寄生式继承也相互照应。寄生组合继承基于Object.create,
同时优化了整合继承,成为了到家的继续格局。ES6 Class
Extends的结果与寄生组合继承基本一致,可是贯彻方案又略有区别。

上面立时进入正题。

皇家赌场手机版 1

原型链

原型链

第②得要知道哪些是原型链,在一篇小说看懂proto和prototype的涉嫌及界别中讲得卓殊详尽

原型链继承基本考虑就是让二个原型对象指向另2个门类的实例

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,种种种类分别有贰本性质和3个方式,SubType继承了SuperType,而持续是经过创制SuperType的实例,并将该实例赋给SubType.prototype达成的。

贯彻的本来面目是重写原型对象,代之以3个新类型的实例,那么存在SuperType的实例中的全数属性和方法,今后也存在于SubType.prototype中了。

咱俩了然,在开立八个实例的时候,实例对象中会有1个之中指针指向成立它的原型,进行关联起来,在那边代码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构造函数定义了2个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属性的副本了。

传送参数

寄生组合,javascript中的继承。借助于构造函数还有二个优势就是足以传递参数

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;

优点:父类方法能够复用

缺点:

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

原型链继承基本思想便是让二个原型对象指向另1个类别的实例

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

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

思路便是应用原型链达成对原型属性和章程的后续,而由此借用构造函数来落到实处对实例属性的接轨。

那样,既通过在原型上定义方法实现了函数复用,又可以保险每一种实例都有它和谐的质量。

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’

那种方式幸免了原型链和构造函数继承的欠缺,融合了他们的独到之处,是最常用的一种持续形式。

function SuperType(name){

2.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()
}

寄生组合,javascript中的继承。在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作为另3个目的的底子,把person传入object中,该函数就会回去三个新的靶子。

其一新目标将person作为原型,所以它的原型中就带有三个基本类型和1个引用类型。

之所以意味着假设还有其它叁个对象关系了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’]

       this.name=name;

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() // 第3回调用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) //
创造2个新对象 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方法。

在事关重庆大学考虑对象而不是自定义类型和构造函数的意况下,那是3个管用的情势。

       this.friends=[“gay1″,”gay2”];  

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
}

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

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

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

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

动用寄生式组合方式,可以避开那个标题。

那种格局通过借用构造函数来继承属性,通过原型链的混成情势来持续方法。

基本思路:不必为了钦命子类型的原型而调用父类的构造函数,大家供给的独自就是父类原型的3个副本。

精神上就是选取寄生式继承来一而再父类的原型,在将结果钦命给子类型的原型。

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
}

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

那一个函数接受三个参数,3个子类,三个父类。

首先步成立父类原型的副本,第③步将成立的副本添加constructor属性,第2部将子类的原型指向这些副本。

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 寄生式继承

中央:使用原型式继承取得3个对象对象的浅复制,然后增强那几个浅复制的力量。

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

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"

SuperType.prototype.getSuperValue = function () {

SuperType.prototype.sayName=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

       alert(this.name);

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() {

funciton SubType(name,age){

参照文章:

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

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

1 赞 收藏
评论

皇家赌场手机版 3

  this.subproperty = false

      SuperType.call(this,name); //第三回调用SuperType();

}

      this.age=age;  

SubType.prototype = new SuperType()

}

SubType.prototype.getSubValue = function () {

SubType.prototype=new SuperType();  //第3次调用SuperType()

  return this.subproperty

SubType.prototype.sayAge=function(){

}

      alert(this.age);

var instance = new SubType()

};

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

复制代码

代码定义了三个体系SuperType和SubType,每一个门类分别有1个属性和一个艺术,SubType继承了SuperType,而持续是因此制造SuperType的实例,并将该实例赋给SubType.prototype完结的。

  在第三遍调用SuperType构造函数时,SubType.prototype会得到两性子子:name和friends,他们都是SuperType的实例属性.只可是今后身处SubType的原型中.当调用SubType构造函数时,又会调用三遍SuperType构造函数,那二次又在新指标上制造了实例属性name和friends.于是,那五个属性就屏蔽了原型中的四个同名属性.

福寿双全的昆仑山真面目是重写原型对象,代之以贰个新品类的实例,那么存在SuperType的实例中的全部属性和格局,现在也存在于SubType.prototype中了。

 

我们驾驭,在开创一个实例的时候,实例对象中会有三个之中指针指向创造它的原型,进行关联起来,在此处代码SubType.prototype
= new
SuperType(),也会在SubType.prototype创制贰个里边指针,将SubType.prototype与SuperType关联起来。

  结果是,有两组name和friends属性,一组在SubType的实例上,一组在SubType的原型上.那便是调用两回SuperType构造函数的结果.而昨日,找到了解决那个题材的方式:寄生组合式继承.

因而instance指向SubType的原型,SubType的原型又指向SuperType的原型,继而在instance在调用getSuperValue()方法的时候,会沿着那条链平昔往上找。

 

拉长措施

  寄生组合式继承:通过借用构造函数来继续属性,通过原型链的混成格局来一而再方法.思路:不必为了钦定子类的原型而调用父类的构造函数,大家所须要的单独正是父类原型的1个副本而已.本质上,正是利用寄生式继承来持续父类的原型,然后在将结果钦赐给子类的原型:

在给SubType原型添加方法的时候,如若,父类上也有一样的名字,SubType将会覆盖这么些措施,达到重新的指标。
但是那个艺术仍旧存在于父类中。

 

牢记不能够以字面量的方式丰盛,因为,上边说过通超过实际例继承本质上就是重写,再利用字面量情势,又是一回重写了,但这一次重写没有跟父类有别的涉及,所以就会促成原型链截断。

function inheritPrototype(subType,superType){

function SuperType() {

      var prototype=object(superType.prototype);
//创设父类原型的贰个副本 等同于使用Object.create(superType.prototype)

  this.property = true

      prototype.constructor=subType;  
//为副本添加constructor属性,弥补重写原型而错过的constructor属性

}

      subType.prototype=prototype; //将创设的指标(副本)赋值给子类的原型

SuperType.prototype.getSuperValue = function () {

}

  return this.property

  那样,大家就足以通过调用inheritPrototype()函数,替换前面例子中为子类原型的赋值语句了:

}

 

function SubType() {

复制代码

  this.subproperty = false

function inheritPrototype(subType,superType){

}

      var prototype=Object.create(superType.prototype);
//创立父类原型的贰个副本 等同于使用Object.create(superType.prototype)

SubType.prototype = new SuperType()

      prototype.constructor=subType;  
//为副本添加constructor属性,弥补重写原型而错过的constructor属性

SubType.prototype = {

      subType.prototype=prototype; //将创制的靶子(副本)赋值给子类的原型

  getSubValue:function () {

}

  return this.subproperty

function SuperType(name){

  }

      this.name=name;

}

      this.friends=[“gay1″,”gay2”];

var instance = new SubType()

}

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

SuperType.prototype.sayName=function(){

问题

      alert(this.name);

只是的采纳原型链继承,首要难题源于包蕴引用类型值的原型。

};

function SuperType() {

function SubType(name,age){

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

      SuperType.call(this,name);  //继承SuperType

}

      this.age=age;       //扩展出age属性

function SubType() {

}

}

inheritPrototype(SubType,SuperType);

SubType.prototype = new SuperType()

SubType.prototype.sayAge=function(){

var instance1 = new SubType()

       alert(this.age);

var instance2 = new SubType()

};//扩展出sayAge方法

instance1.colors.push(‘black’)

 

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

var person1=new SubType(“nUll”,25);

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

var person2=new SubType(“mywei”,25);

在SuperType构造函数定义了一个colors属性,当SubType通过原型链继承后,这么些天性就会产出SubType.prototype中,就跟专门成立了SubType.prototype.colors一样,所以会促成SubType的具备实例都会共享这一个天性,所以instance1修改colors这几个引用类型值,也会浮现到instance第22中学。

person1.friends.push(“gay3”);

借用构造函数

person1.sayName();

此方法为了化解原型中带有引用类型值所带来的难点。

person1.sayAge();

那种办法的怀想正是在子类构造函数的中间调用父类构造函数,可以借助apply()和call()方法来改变目的的施行上下文

alert(person1.friends);    //gay1,gay2,gay3

function SuperType() {

alert(person2.friends); //gay1,gay2

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

alert(person1 instanceof SubType);   //true

}

alert(person1 instanceof SuperType);  //true

function SubType() {

alert(SubType.prototype.isPrototypeOf(person1));  //true

  // 继承SuperType

alert(SuperType.prototype.isPrototypeOf(person1)); //true

  SuperType.call(this)

复制代码

}

  那些事例的高功用映以往它只调用了2次SuperType构造函数,并且为此幸免了在SubType.prototype上创办不需求的
多余的属性.与此同时,原型链仍是可以够维系不变.由此,还是能够够不奇怪使用instanceof
和isPrototypeOf明显继续关系.

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属性的副本了。

传送参数

借助于构造函数还有2个优势就是能够传递参数

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函数内部,先创建3个一时的构造函数,然后将盛传的目的作为这一个构造函数的原型,最终回来那些一时类型的3个新实例。

真相上来说,object对传播个中的对象实行了1遍浅复制。

var person = {

  name: ‘Jiang’,

  friends: [‘Shelby’, ‘Court’]

}

var anotherPerson = object(person)

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

那种方式要去你不可能不有二个对象作为另二个对象的功底。

在那么些事例中,person作为另一个目的的根基,把person传入object中,该函数就会回去一个新的靶子。

以此新对象将person作为原型,所以它的原型中就富含二其中央项目和1个引用类型。

就此意味着一旦还有此外一个对象关联了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个仅用于封装继承进程的函数。

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

}

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

本条函数接受多个参数,一个子类,二个父类。

首先步创制父类原型的副本,第1步将开创的副本添加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

Leave a Comment.