js继承

gaosboy 发布于2019-08-22 14:00 / 2560人阅读

摘要：使用这种方式继承的好处可以在子类型构造函数中向超类型构造函数传递参数。下面来看一个例子继承属性继承方法拼接原型链我们看到现在实例可以访问的超类型的原型上的方法了构造函数定义了两个属性和。

在了解了js 中的原型链之后（https://segmentfault.com/a/11...），我们再来看看js 中的几种实现继承的方式

一借用构造函数实现继承

为了解决包含引用类型值的原型属性会被所有实例共享的问题，大神们发明了在子类型构造函数的内部调用超类型构造函数然后通过apply()和call()方法在（将来）新创建的对象上执行构造函数的方式来实现继承，如下

function SuperType() {
    this.colors = ["red", "blue", "green"];
}
function SubType() {
//调用SuperType 并且通过call()方法修正this指向  
SuperType.call(this);
 }
var instance1 = new SubType();
instance1.colors.push("black");
//"red,blue,green,black"
alert(instance1.colors);
//"red,blue,green"
var instance2 = new SubType();
alert(instance2.colors);

以上例子中在SubType()调用了SuperType()构造函数。通过使用call()方法（或apply()方法也可以），我们实际上是在（未来将要）新创建的SubType实例的环境下调用了SuperType构造函数。这样一来，就会在新SubType对象上执行SuperType()函数中定义的所有对象初始化代码。结果，SubType的每个实例就都会具有自己的colors属性的副本了(互不影响)。

使用这种方式继承的好处：

可以在子类型构造函数中向超类型构造函数传递参数。如下

function SuperType(name) {
  this.name = name;
}
function SubType() {
//继承了SuperType，同时还传递了参数
SuperType.call(this, "Nicholas");    
//实例属性   
 this.age = 29;
}
var instance = new SubType();
  //"Nicholas";
alert(instance.name);
//29
alert(instance.age);

SuperType只接受一个参数name，该参数会直接赋给一个属性。在SubType构造函数内部调用SuperType构造函数时，实际上是为SubType的实例设置了name属性。为了确保SuperType构造函数不会重写子类型的属性，可以在调用超类型构造函数后，再添加应该在子类型中定义的属性。

使用这种方式继承的坏处：

1.方法都在构造函数中定义
2.在超类型的原型中定义的方法，对子类型而言也是不可见的如下

function SuperType(name) {
  this.name = name;
}
SuperType.prototype.a=function(){
    alert("aaaa");
}
function SubType() {
//继承了SuperType，同时还传递了参数
SuperType.call(this, "Nicholas");    
//实例属性
 this.age = 29;
}
var instance = new SubType();
console.log(instance);

我们在控制台可以看到子类型原型中无法获取超类型的a方法

二组合继承

将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式，主要的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性。下面来看一个例子

function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
  alert(this.name);
};
function SubType(name, age) { 
//继承name属性    
SuperType.call(this, name);    
this.age = age;
}
//继承方法 （拼接原型链）
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function() {
  alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black"); 
//"red,blue,green,black"
alert(instance1.colors);
//"Nicholas";
instance1.sayName();
//29
instance1.sayAge();
var instance2 = new SubType("Greg", 27);
//"red,blue,green"
alert(instance2.colors);
//"27"; 
instance2.sayAge();
//"Greg"; 
instance2.sayName();

我们看到现在实例可以访问的超类型的原型上的方法了
SuperType构造函数定义了两个属性：name和colors。SuperType的原型定义了一个方法sayName()。Sub-Type构造函数在调用SuperType构造函数时传入了name参数，紧接着又定义了它自己的属性age。然后，将SuperType的实例赋值给SubType的原型，然后又在该新原型上定义了方法sayAge()。这样一来，就可以让两个不同的SubType实例既分别拥有自己属性——包括colors属性，又可以使用相同的方法了这种方式是目前js实现继承使用的最常见的方式

使用这种继承方式的不足

SubType.prototype = new SuperType()的确会创建一个关联到SubType.prototype 的新对象。但是它使用了SubType(..)的“构造函数调用”，如果函数SubType有一些副作用（比如写日志、修改状态、注册到其他对象、给this添加数据属性，等等）的话，就会影响到SubType()的“后代”。

改进方法

function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
  alert(this.name);
};
function SubType(name, age) { 
  //继承name属性    
  SuperType.call(this, name);    
  this.age = age;
}
//使用Object.create 生成对象来代替new SuperType()生成的对象

SubType.prototype = Object.create(SuperType.prototype);
SubType.prototype.sayAge = function() {
  alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
console.log(instance1 )；

这样可以避免对SubType后代的影响
注

// ES6之前需要抛弃默认的SubType.prototype
SubType.ptototype = Object.create( SuperType.prototype );
// ES6开始可以直接修改现有的
SubType.prototypeObject.setPrototypeOf( SubType.prototype, SuperType.prototype );

可以参考(https://www.liaoxuefeng.com/w...

云服务器 GPU云服务器 js 继承 js继承 js继承模式 js组合继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92743.html

JS中的继承(上)

摘要：中的继承上学过或者之类语言的同学应该会对的继承感到很困惑不要问我怎么知道的的继承主要是基于原型的对的原型感兴趣的同学可以了解一下我之前写的中的原型对象相信很多同学也跟我一样刚开始接触的面向对象编程的时候都抱着一种排斥的心态为什么这么 JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)...

Fundebug 2019-08-22 16:29 评论0 收藏0
JavaScript继承方式详解

摘要：可以通过构造函数和原型的方式模拟实现类的功能。原型式继承与类式继承类式继承是在子类型构造函数的内部调用超类型的构造函数。寄生式继承这种继承方式是把原型式工厂模式结合起来，目的是为了封装创建的过程。 js继承的概念 js里常用的如下两种继承方式：原型链继承（对象间的继承）类式继承（构造函数间的继承）由于js不像java那样是真正面向对象的语言，js是基于对象的，它没有类的概念。...

Yangyang 2019-08-21 10:23 评论0 收藏0
JS面向对象之五【继承】

摘要：首先为了模拟类创建对象的功能搞出了构造函数。也就是名字肤色肤色这里是继承里的自有属性生命值这里继承的共有属性的方法攻击力兵种美国大兵攻击防御死亡肤色 JS面向对象之五【继承】我们已经准备了很多前置知识,包括原型链,对象和对象之间的关系 this,对象和函数之间的关系 new, 用函数批量创建特定的对象的语法糖 JS面向对象的前世今生我们说,面向对象是一种写代码的套路。因为如...

genefy 2019-08-26 17:04 评论0 收藏0
JS基础（对象创建，构造函数、原型、实例之间关系，继承方式）

摘要：对象创建的三种方式字面量创建方式系统内置构造函数方式自定义构造函数构造函数原型实例之间的关系实例是由构造函数实例化创建的，每个函数在被创建的时候，都会默认有一个对象。 JS 对象创建的三种方式 //字面量创建方式 var person= ｛　name:jack　｝ //系统内置构造函数方式 var person= new Object(); person.name = jack; ...

PAMPANG 2019-08-26 13:30 评论0 收藏0
JS专题之继承

摘要：构造函数所以，就有了畸形的继承方式原型链继承三原型链继承改变构造函数的原型对象继承了属性以上例子中，暴露出原型链继承的两个问题包含引用类型数据的原型属性，会被所有实例共享，基本数据类型则不会。前言众所周知，JavaScript 中，没有 JAVA 等主流语言类的概念，更没有父子类继承的概念，而是通过原型对象和原型链的方式实现继承。于是，我们这一篇讲一讲 JS 中的继承（委托）。 ...

rollback 2019-08-23 15:09 评论0 收藏0
js原型和继承

摘要：举例说明组合继承组合继承利用原型链借用构造函数的模式解决了原型链继承和类式继承的问题。示例组合式继承是比较常用的一种继承方法，其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。对js原型和继承的理解一直处于不懂-懂-不懂-懂-不懂。。。的无限循环之中，本来打算只是简单总结下js继承方式，可看了些网上的资料后，发现又不懂继承了。。。这篇文章只...

Hujiawei 2019-08-21 13:49 评论0 收藏0