JavaScript 常见的继承方式汇总


Posted in Javascript onSeptember 17, 2020

原型链机制:

在ECMAscript中描述了原型链的概念,并将原型链作为实现继承的主要方法,其基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法。

构造函数和原型还有实例之间的关系:

每个构造函数都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针(constructor),而实例都包含一个指向原型对象的内部指针 ( __propto__ ) 。关系图如下图所示:

JavaScript 常见的继承方式汇总

每一个Function都是Object基类的一个实例,所以每一个Function上都有一个__proto__指向了Object.prototype

当查找一个实例的属性时,会先从这个实例的自定义属性上找,如果没有的话通过__proto__去实例所属类的原型上去找,如果还没有的话再通过原型(原型也是对象,只要是对象就有__proto__属性)的__proto__到Object的原型上去找,一级一级的找,如果没有就undefined。

所以引用类型之间的继承就是通过原型链机制实现的。

一.原型继承

原型继承:把父类的私有+公有的属性和方法,都作为子类公有的属性。

核心:不是把父类私有+公有的属性克隆一份一模一样的给子类的公有。他是通过__proto__建立和子类之间的原型链,当子类的实例需要使用父类的属性和方法的时候,可以通过__proto__一级级找上去使用。 

function Parent(){
  this.x = 199;
  this.y = 299;
}
Parent.prototype.say = function(){
  console.log('say')
}
function Child(){
  this.g = 90;
}
Child.prototype = new Parent();
var p = new Parent();
var c = new Child();
console.dir(c)

实现的本质是重写了原型对象 ,通过将子类的原型指向了父类的实例,所以子类的实例就可以通过__proto__访问到 Child.prototype 也就是 Parent的实例,这样就可以访问到父类的私有方法。然后再通过__proto__指向父类的prototype就可以获得到父类原型上的方法。

这样就做到了将父类的私有、公有方法和属性都当做子类的公有属性。这样就通过原型链实现了继承。

但是别忘了默认的原型,因为所有引用类型都是继承了Object的,所有说子类也可以访问到Object上的方法如toString() 、valueOf() 等。

结果如下图所示:

JavaScript 常见的继承方式汇总

有的时候我们需要在子类中添加新的方法或者是重写父类的方法时候,切记一定要放到替换原型的语句之后

function Parent(){
  this.x = 199;
  this.y = 299;
}
Parent.prototype.say = function(){
  console.log('say')
}
function Child(){
  this.g = 90;
}
/*Child.prototype.Bs = function(){
  console.log('Bs')
}*/在这里写子类的原型方法和属性是没用的因为会改变原型的指向,所以应该放到重新指定之后
Child.prototype = new Parent();
Child.prototype.constructor=Child//由于重新修改了Child的原型导致默认原型上的constructor丢失,我们需要自己添加上,其实没啥用,加不加都一样
Child.prototype.Bs = function(){
  console.log('Bs')
}
Child.prototype.say = function(){
  console.log('之后改的')
}
var p = new Parent();
var c = new Child();
console.dir(c)
c.Bs() //Bs
c.say()  // 之后改的
p.say() //say 不影响父类实例访问父类的方法

存在的问题:

1. 子类继承父类的属性和方法是将父类的私有属性和公有方法都作为自己的公有属性和方法,我们要清楚一件事情就是我们操作基本数据类型的时候操作的是值,在操作应用数据类型的时候操作的是地址,如果说父类的私有属性中引用类型的属性,那他被子类继承的时候会作为公有属性,这样子类一操作这个属性的时候,会影响到子类二。

2. 在创建子类的实例时,不能向父类型的构造函数中传递参数。应该说是没有办法在不影响所有对象实例的情况下,给父类的构造函数传递参数。

所以在实际中很少单独使用原型继承

二.call继承

改变方法的this指向,同时执行方法。 在子类构造函数中父类.call(this) 可以将父类的私有变成子类的私有。

function Parent() {
  this.x = 100;
  this.y = 199;
}
Parent.prototype.fn = function() {}
 
function Child() {
  this.d = 100;
  Parent.call(this); //构造函数中的this就是当前实例
}
var p = new Parent();
var c = new Child();
console.log(p) //Parent {x: 100, y: 199}
console.log(c) //Child {d: 100, x: 100, y: 199}

在子类的构造函数中,改变父类的this指向,改变为子类的实例,同时运行父类方法,这样父类中的this.x就变成了子类的实例.x ,通过这种方法就可以继承了父类的私有属性,且只能继承父类的私有属性和方法。

三.冒充对象继承

冒充对象继承的原理是循环遍历父类实例,然后父类实例的私有方法全部拿过来添加给子类实例。

function Parent(){
  this.x = 100;
}
Parent.prototype.getX = function(){
  console.log('getX')
}
function Child(){
  var p = new Parent();
  for(var attr in p){//for in 可以遍历到原型上的公有自定义属性
    this[attr] = p[attr]
  }
  //以下代码是只获得到私有方法和属性,如果不加这个的话就可以遍历到所有方法和属性
  /*if(e.hasOwnProperty(attr)){
    this[attr] = e[attr]
  }
  e.propertyIsEnumerable()*///可枚举属性==> 可以拿出来一一列举的属性
}
var p = new Parent();
var c = new Child();
console.dir(c)

for in 可以遍历到原型上的公有自定义属性 ,所以他可以拿到私有和公有的属性和方法,这个你可以遍历私有和公有的,需要你加限制条件。但是如果不做hasOwnProperty判断那么就是把父类的公有的和私有的都拿过来当私有的。

四.混合继承

就是将call继承和原型继承集合在一起,无论是私有的还是公有的都拿过来了。但是有个问题就是子类的原型上的多了一套父类私有属性,但是不会产生问题。因为子类的私有属性也有一套相同的通过call继承拿过来的。

function Parent(){
  this.x=100;
}
Parent.prototype.getX = function(){}
function Child(){
  Parent.call(this);
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
var p = new Parent();
var c = new Child();
console.log(c)//Child {x: 100}

存在的问题:

无论在什么情况下,都会调用两次构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数的内部,没错,子类型最终会包含父类型对象的全部实例属性,但我们不得不在调用子类构造函数时重写这些属性。

还有一种就是call+拷贝继承

//混合继承:call继承+拷贝继承
  function extend(newEle,oldEle){
    for(var attr in oldEle){
      newEle[attr]=oldEle[attr];
    }
  }
  function F(){
    this.x=100;
    this.showX=function(){}
  }
  F.prototype.getX=function(){};
  F.prototype.getX1=function(){};
  var f1=new F;
  console.dir(f1)
  function S(){
    F.call(this)//call继承
  }
  extend(S.prototype, F.prototype);//拷贝继承
  S.prototype.cc=function(){ }
  var p1=new S;
  console.dir(p1);

这种方式使用call继承将父类的私有方法继承过来,使用for in 拷贝将父类的公有属性和方法继承过来,比较实用。

五.中间件继承

中间件继承就是通过原型链的机制,子类的prototype.__proto__本来应该是直接指向Object.prototype。

从父类的原型上的__proto__也可以到Object.prototype,在父类.prototype上停留了下,父类.prototype就是一个中间件,所以子类可以继承到父类的公有方法当做自己的公有方法。

function Parent(){
  this.x = 100;
}
Parent.prototype.getX = function(){}
function Child(){
  
}
Child.prototype.__proto__ = Parent.prototype;
var p = new Parent();
var c = new Child()
console.log(c)

六.寄生组合式继承

   寄生式组合: call继承+Object.create();

所谓寄生组合式继承就是通过借用构造函数来继承属性,通过原型链的混合形式来继承方法

基本思路是不必为了指定子类的原型而调用父类的构造函数,我们所需要的就是父类型原型的一个副本。

本质上,就是使用寄生式继承父类的原型,然后再将结果指定给子类的原型。

function F(){
  this.x=100;
}
F.prototype.showX=function(){};
function S(){
  this.y = 200
  F.call(this)//只继承了私有的;
}
function inheritPrototype(subType,superType){
  var prototype = Object.create(superType.prototype);//创建对象
  prototype.constructor = subType;//增强对象
  subType.prototype = prototype;//指定对象
}
inheritPrototype(S,F)
var p1=new S;
console.dir(p1)

1、第一步是创建父类型原型的一个副本。

2、第二步是为创建的副本增加constructor属性,从而弥补了因为重写原型而失去的默认的constructor属性。

3、第三步是将创建的对象赋值给子类型的原型。

这个例子的高效率体现在他只调用了一次SuperType 构造函数,并且因此避免了在SubType.prototype上面创建不必要的、多余的属性。与此同时原型链还能保持不变,所以可以正常使用instanceof 和 isPrototypeOf() ,所以寄生组合继承是引用类型最理想的继承方法。

七.class继承

class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

class Father{
  constructor(x, y) {
     this.x = x;
     this.y = y;
  }

  toString() {
     return '(' + this.x + ', ' + this.y + ')';
  }
}
class Son extends Father{
  constructor(x,y,color){
     super(x,y); // 调用父类的constructor(x, y)
     this.color = color;
  }
  toString() {
        console.log( super.toString()+this.color); // 调用父类的toString()
  }
}
let son = new Son(3,4,'red');
son.toString();//结果为(3,4)red

上面代码定义了一个Son类,该类通过extends关键字,继承了Father类的所有属性和方法。

上面代码中,constructor方法和toString方法之中,都出现了super关键字,它在这里表示父类的构造函数,用来新建父类的this对象

子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象。

以上就是JavaScript 常见的继承方式汇总的详细内容,更多关于JavaScript 继承方式的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
JavaScript 闭包的使用场景
Sep 17 #Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 #Javascript
js实现简单的随机点名器
Sep 17 #Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 #Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 #Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 #Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 #Javascript
You might like
php知道与问问的采集插件代码
2010/10/12 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
php实现小程序支付完整版
2018/10/09 PHP
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
奥运会口号
2014/06/13 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
工伤事故证明
2014/10/20 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
财务统计员岗位职责
2015/04/14 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
Python中如何处理常见报错
2022/01/18 Python