JavaScript的种种持续方式,浅谈JS承继_借用构造函数

By admin in 4858美高梅 on 2019年7月7日

2.借出构造函数

浅谈JS继承_借用构造函数 & 组合式承接,浅谈js借用构造函数

2.借出构造函数

为化解原型中带有引用类型值所推动的难点, 大家选拔一种叫做
借用构造函数(constructor stealing)的技能(又叫伪造对象或优良三番五次)。

这种技巧的主导理念:在子类构造函数内部调用超类型构造函数。

由此选拔apply()和call()方法能够在新创立的子类对象上实施构造函数。

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

function SubType(){
  //继承了 SuperType
  SuperType.apply(this);
}

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);  //red,blue,green,black

var instance2 = new SubType();
alert(instance2.colors);  //red,blue,green

在上述例子中,实际上是在新创设的SubType实例(instance1
instance2)的条件下调用了SuperType的构造函数。这样一来,就能在新SubType目的上试行SuperType()函数中定义的具有目的伊始化代码。
所以Subtype的每个实例就都会有着温馨的colors属性的别本了。

传送参数

对此原型链来说,借用构造函数有三个十分大的优势,即能够在子类型构造函数中想超类型构造函数字传送递参数。

function SuperType(name){
  this.name = name;
}

function SubType(){
  SuperType.call(this, "Bob");
  this.age = 18;
}

var instance1 = new SubType();
alert(instance1.age);  //18
alert(instance1.name);  //Bob

借用构造函数的标题:

格局都在构造函数中定义,因而函数复用就未能谈到了。并且,在超类型的原型中定义的点子,对子类型来讲也是不可知的。

3. 结缘承袭

构成承接(combination inheritance), 偶尔候也叫作伪杰出延续,
指的是将原型链和借用构造函数的技艺结合到一块。进而发挥两岸之长的一种持续格局。

JavaScript的种种持续方式,浅谈JS承继_借用构造函数。行使原型链达成对原型属性和方法的后续;

透过借用构造函数来兑现对实例属性的一而再。

与上述同类,既通过在原型上定义方法达成了函数的复用,又能保险各类实例都有他自身的质量。

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

  //继承方法
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
  alert(this.age);
}

var instance1 = new SubType("Bob", 22);
instance1.colors.push("black");
alert(instance1.colors);   //red,blue,green,black
instance1.sayName();     //Bob
instance1.sayAge();     //22

var instance2 = new SubType("Alice", 21);
alert(instance2.colors);  //red,blue,green
instance2.sayName();    //Alice
instance2.sayAge();     //21

在那个例子中, SuperType构造函数定义了五个性情: name和colors。
SuperType的原型定义了多个措施sayName()。

SubType构造函数在调用SuperType构造函数时传出了name参数,定义了他和谐的习性age。然后将SuperType的实例赋值给SubType的原型。在该原型上定义了章程sayAge()。

那样一来,就能够让八个区别的SubType实例既分别有着谐和的习性 –
满含colors属性,又有什么不可选择同一的法子。

以上那篇浅谈JS承接_借用构造函数 &
组合式承接正是作者共享给大家的全部内容了,希望能给大家二个参照,也愿意大家多多扶助帮客之家。

}function SubType(){
//继承了 SuperType SuperType.apply(this);}var instance1 = new
SubType();instance1.colors.push(“black”);alert(instance1.col…

原型链

采纳原型让三个援引类型承袭另二个援用类型的质量和措施。每种构造函数都有五个原型对象,原型对象涵盖一个针对性构造函数的指针,实例包括一个对准原型对象的中间指针。
原型对象等于另四个品类的实例,原型对象就能够蕴藏三个针对另三个原型的指针,另二个原型包罗着指向另二个构造函数的指针。而另二个原型又是另多个档案的次序的实举例此罕见推进,就重组了实例与原型的链子。

function SuperType(){
   this.property = true;
}
SuperType.prototype.getSuperValue = function(){
   return this.property;
}
function SubType(){
   this.property = false;
}
//继承SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){
   return this.property;
}
var instance = new SubType();
alert(instance.getSuperValue());//true

SubType通过创办SuperType的实例并将实例赋给SubType.prototype达成持续了SuperType。原本存在于SuperType的实例中的全部属性和艺术未来也设有于SubType.prototype中。之后也能够向SubType.prototype增多新章程

4858美高梅 1

构造函数与原型的涉嫌

作者们用SuperType的实例作为SubType的原型,不仅仅抱有了SuperType的具有属性和方法何况还大概有一个指向SuperType的原型的指针。instance指向SubType的原型,SubType的原型指向SuperType的原型。getSuper
Value()方法依旧还在SuperType.prototype中,property位于SubType.prototype。property是八个实例属性,getSuperValue()是二个原型方法。SubType.prototype未来式SuperType的实例,property也坐落到实处例中。instance.constructor指向SuperType,因为SubType.prototype中的constructor被从重写了(SubType的原型指向了SuperType的原型,而以此原型对象的constructor属性指向的是SuperType)。

搜索getSuperValue()步骤:

  • 检索实例
  • 搜索SubType.prototype
  • 搜索SuperType.prototype

继续是面向对象编制程序中又一老大重要的概念,JavaScript扶助落到实处接二连三,不支持接口承袭,完结一而再主要信赖原型链来完成的

为解决原型中隐含引用类型值所带来的难点, 我们利用一种叫做
借用构造函数(constructor stealing)的本事(又叫伪造对象或优秀接二连三)。

1.暗许的原型

负有的引用类型私下认可承继了Object,也是经过原型链完结的,全数函数暗许原型都以Object的实例,默许原型包蕴指向Object.prototype,这是兼具自定义类型涵盖toString(),valueOf()的来头。

4858美高梅 2

原型链

先是得要理解怎样是原型链,在一篇小说看懂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

代码定义了八个档案的次序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()方法的时候,会沿着那条链平昔往上找

这种本事的主导考虑:在子类构造函数内部调用超类型构造函数。

原型和实例的关联

instance是Object,SuperType,SubType任一类型的实例;

alert(instance instanceof Object);         //true
alert(instance instanceof SuperType);  //true
alert(instance instanceof SubType);     //true

在原型链中出现过的原型都以该原型链派生的实例的原型

alert(Object.prototype.isPrototypeOf(instanceof ));         //true
alert(SuperType.prototype.isPrototypeOf(instanceof ));  //true
alert(SubType.prototype.isPrototypeOf(instanceof ));     //true

足够措施

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

因此运用apply()和call()方法能够在新成立的子类对象上推行构造函数。

3.小心的定义方法

给原型增加方法的代码必供给放在替换原型的讲话之后

function SuperType(){
   this.property = true;
}
SuperType.prototype.getSuperValue = function(){
   return this.property;
}
function SubType(){
   this.property = false;
}
//继承SuperType
SubType.prototype = new SuperType();
//添加新方法
SubType.prototype.getSubValue = function(){
   return this.subproperty;
} 
//重写超类型中的方法
SubType.prototype.getSuperValue = function(){
   return this.subproperty;
} 
var instance = new SubType();
alert(instance.getSuperValue());//false

办法被增加到SubType会屏蔽SuperType的getSuperValue方法在SubType中调用新定义的在SuperType中调用在此之前的总得在实例替换原型之后


不可能选取对象字面量穿件原型方法,那样会重写原型链

function SuperType(){
   this.property = true;
}
SuperType.prototype.getSuperValue = function(){
   return this.property;
}
function SubType(){
   this.property = false;
}
//继承SuperType
SubType.prototype = new SuperType();
//导致上一行代码无效
SubTyope.prototype = {
   getSubValue : function(){
     return this.subproperty;
   }
}
var instance = new SubType();
alert(instance.getSuperValue());//error!

把SupperType的实例赋值给原型,又将原型替换来二个指标字面量,SubType和SuperType之间一度没有关联啊

问题

无非的选取原型链承袭,主要问题源于满含引用类型值的原型。

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中学

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

function SubType(){
  //继承了 SuperType
  SuperType.apply(this);
}

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);  //red,blue,green,black

var instance2 = new SubType();
alert(instance2.colors);  //red,blue,green
4.原型链的难点

行使类型值的原型属性会被有着实例共享,通过原型链原先的实例属性改为了原型属性了。

function SuperType(){
   this.colors = ["red","blue"]; 
}
function SubType(){
}
//继承SuperType
SubType.prototype = new SuperType();
var instance1 =new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,black"
var instance2 =new SubType();
alert(instance2.colors); //"red,blue,black"

SubType通过原型链承接了SuperType之后,SubType.prototype产生了SuperType的实例,就颇具了colors属性也正是创立SubType.prototype。colors属性。但SubType实例都会分享那天性子。


另三个主题素材:创立子类型实例时,无法在不影响全体目的实例的情状下向超类型的构造函数中传递参数

借用构造函数

此办法为了化解原型中含有援引类型值所带来的主题材料

这种措施的思虑正是在子类构造函数的中间调用父类构造函数,能够借助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属性的别本了

在上述例子中,实际上是在新创立的SubType实例(instance1
instance2)的意况下调用了SuperType的构造函数。那样一来,就能在新SubType目的上实行SuperType()函数中定义的具备指标开首化代码。
所以Subtype的各种实例就都集会场全体温馨的colors属性的别本了。

借用构造函数

在子类型的构造函数内部调用超类型的构造函数。通过运用apply()和call()在新成立的靶子上施行构造函数

function SuperType(){
   this.colors = ["red","blue"]; 
}
function SubType(){
   //
   SuperType.call(this);
}
var instance1 =new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,black"
var instance2 =new SubType();
alert(instance2.colors); //"red,blue"

实在在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.传递参数
function SuperType(name){
   this.name = name;
}
function SubType(){
   SuperType.call(this,"ice");
   this.age = 20;
}
var instace = new SubType();
alert(instance.name);   //'ice'
alert(instance.age);      //20

为保险构造函数不重写子类型的性质,能够在调用超类型构造函数之后加多子类型自定义属性

问题

假定独有依靠构造函数,方法都在构造函数中定义,由此函数不可能达成复用

对于原型链来说,借用构造函数有二个相当大的优势,即能够在子类型构造函数中想超类型构造函数字传送递参数。

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
}
// 继承方法
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){
  this.name = name;
}

function SubType(){
  SuperType.call(this, "Bob");
  this.age = 18;
}

var instance1 = new SubType();
alert(instance1.age);  //18
alert(instance1.name);  //Bob

整合承接

将原型链和借用构造函数的技能构成到一块,发挥双方之长的持续情势。既通过在原型上定义方法达成函数复用,又能确定保障每种实例都有友好的性质;

  • 用原型链达成对原型属性和格局的后续
  • 借用构造函数达成对实例属性的三番五次

function SuperType(name){
   this.name = name;
   this.colors = ["red","blue"];
}
SupperType.prototype.sayName = function(){
   alert(this.name);
}
function SubType(name,age){
   //继承属性
   SuperType.call(this,name);
   this.age = age;
}
//继承方法
SubType.prototype = new SuprtType();
SubType.prototype.sayAge = function(){
   alert(this.age);
}
var instance1 new SubType("Nicholas",29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,black"
instance1.sayName(); //"Nicholas"
instance1.sayAge();    //29

var instance2 new SubType("Greg",27);
instance2.colors.push("black");
alert(instance2.colors); //"red,blue"
instance2.sayName(); //"Greg"
instance2.sayAge();    //27

SuperType构造函数定义了俩个属性name和colors,SuperTye的原型定义了三个主意sayName()。SubType构造函数在调用SuperType的构造函数时传出了name参数,之后定义了友好的属性age。然后将SuperType的实例赋值给SubType的原型,然后在新原型上定义了法子sayAge()。那样就足以享有本身的特性,又选择同样的主意。
instanceof和i是Prototype Of()也能够用于识别基于组合承接创建的目的。

4858美高梅 ,原型式承袭

借助原型能够依附已有些对象成立新对象,同偶然间还不用为此创建自定义类型

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的时候,也会展现在这一个指标中

借用构造函数的难点:

原型式承接

借助于原型能够根据已部分对象创立新指标,同一时间还不用由此创建自定义类型

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

在object()函数内部,先创建二个有的时候的构造函数,然后传入的靶子作为那几个构造函数的原型,最终回来有时类型的新实例。本质上object()对传播的靶子举办了一次浅复制

var person = {
   name:"ice",
   friends:["She","Cou"]
}
var person1 = object(person);
person1.name="ice";
person1.friends.push("Rob");

var person2 = object(person);
person2.name="fire";
person2.friends.push("Bar");

alert(person.friends);//:"She,Cou,Rob,Bar"

person对象作为另三个目的的根底,把她传到object()函数中,然后重临贰个新指标。那个新对象将person作为原型,所以他的原型中包括二个核心类型值属性和一个引用类型值属性。这样person。friends不止属于person全部,也被person1和person2共享,也正是创建了person对象的俩个别本。

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’]

艺术都在构造函数中定义,由此函数复用就无法聊到了。并且,在超类型的原型中定义的点子,对子类型来说也是不可知的。

寄生式承继

始建三个仅用于封装承继进程的函数,该函数在中间以某种格局来升高对象,像真的的它做了富有工作同样重回对象。

function createAnother(original){
   var clone = object(original);
   clone.sayHi = function(){
      alert("hi");
   }
   return clone;
}

基于original再次来到了贰个新指标clone,clone不仅唯有original的具备属性和方法还应该有本人的sayHi()方法。

寄生式承继

寄生式承继的思绪与寄生构造函数和工厂方式类似,即开立二个仅用于封装承袭进程的函数

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. 组成承袭

寄生组合式承继

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

先是次调用SuperType构造函数时,SubType.prototype会获得name和colors俩个属性。它们是SuperType的实例属性,只不过位于SubType原型中。调用SubType构造函数时,又会调用一回SuperType构造函数,那叁回又在新目的上开创了实例属性name和colors那俩本性格就屏蔽了原型中的同名属性。


寄生组合式承袭:不必为钦赐子类型的原型调用超类型的构造函数,使用寄生式承袭来承接超类型的原型,然后将结果内定给子类型的原型

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

inheritPrototype()函数完毕了寄生式组合承接的最简易款式。那个函数接受俩个参数:子类型构造函数和超类型构造函数。第一步创制创建超类型原型的别本。第二步为副本增加constructor属性,从而弥补重写原型而错过暗中认可constructor属性第三步,将别本赋值给子类型的原型。

function SuperType(name){
   this.name = name;
   this.colors = ["red","blue","green"];
}
SupperType.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);
}

4858美高梅 3

image.png

此措施的高成效突显在调用了贰回SuperType构造函数,而且幸免了SubType.prototype上边创设不要求的多余属性,并且能够行使instanceof和isPrototypeOf()。
开垦者普及感觉寄生式组合承继是承接引用类型最特出的接轨形式。

寄生组合式承继

在前面说的组成情势(原型链+构造函数)中,承袭的时候供给调用两遍父类构造函数

父类

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

重组承继(combination inheritance), 一时候也叫作伪非凡三番两次,
指的是将原型链和借用构造函数的技术结合到共同。进而发挥两岸之长的一种持续形式。

动用原型链达成对原型属性和方式的持续;

经过借用构造函数来促成对实例属性的存在延续。

诸有此类,既通过在原型上定义方法完毕了函数的复用,又能保障每一种实例皆有她自身的性质。

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

  //继承方法
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
  alert(this.age);
}

var instance1 = new SubType("Bob", 22);
instance1.colors.push("black");
alert(instance1.colors);   //red,blue,green,black
instance1.sayName();     //Bob
instance1.sayAge();     //22

var instance2 = new SubType("Alice", 21);
alert(instance2.colors);  //red,blue,green
instance2.sayName();    //Alice
instance2.sayAge();     //21

在这几个事例中, SuperType构造函数定义了八个属性: name和colors。
SuperType的原型定义了叁个方法sayName()。

SubType构造函数在调用SuperType构造函数时传出了name参数,定义了他自身的性质age。然后将SuperType的实例赋值给SubType的原型。在该原型上定义了措施sayAge()。

那样一来,就能够让三个例外的SubType实例既分别装有本身的脾气 –
饱含colors属性,又能够使用一样的艺术。

以上那篇浅谈JS承接_借用构造函数 &
组合式承袭正是小编分享给我们的全体内容了,希望能给大家多个参照他事他说加以考察,也期望大家多多援救脚本之家。

您或然感兴趣的小说:

  • 浅谈JS继承_寄生式承接 &
    寄生组合式承袭
  • JavaScript承袭基础讲明(原型链、借用构造函数、混合方式、原型式承继、寄生式承袭、寄生组合式承接)
  • js常用的持续–组合式承袭

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有