美文网首页
javaScript 实现继承

javaScript 实现继承

作者: webmrxu | 来源:发表于2019-11-03 18:25 被阅读0次

继承是面向对象编程中三大特点之一。

为了方便描述,下面文章中,P 指代父类,parent,C 指代子类,child。

那么如何使用继承呢?java中可以用extends关键字来继承父类。
如P类与C类,当写继承语句时, class C类 extends P类{ } 其中C类是子类,P类是父类。

继承的特点

  • 子类拥有父类的特征
  • 子类可以重写父类方法
  • 子类可以重载父类方法

继承的优点

  • 父类代码重用,DRY 原则
  • 子类的多态,同一个父类,但子类可以通过重写和重构实现多态
  • 子类的可扩展性高,子类可以添加自有属性和方法

继承的缺点

  • 继承的层级深度导致代码调试和修改变的复杂,偶合度太高。
  • 继承导致父类修改变的困难,因为修改会影响子类

javaScript 实现继承

1 使用原型prototype实现继承

子类原型指向父类实例

function P() {
}
function C() {
}
C.prototype = new P()
2 使用实例实现继承
function P () {
}
function C() {
  let p = new P()
  p.name = 'tom'
  p.getName = function() {}
}
let c = new C() // 该实例为父类实例

3 拷贝父类实例属性到子类原型中实现继承

function P () {
}
function C() {
  var p = new P();
  for(var key in p){
    C.prototype[key] = p[key];
  }
  C.prototype.name = name || ‘Tom’;
  C.prototype.getName = function() {}
}
let c = new C()

缺点:父类原型链断了

4 构造继承
function P () {
}
function C() {
   P.call(this) // 可以实现多继承
   this.name = 'tom'
   this.getName = function() {}
}
5 组合继承
function P() {
}
function C() {
     P.call(this)
}
C.prototype = new P()
C.prototype.constructor = C
let c = new C()
6 寄生组合继承

待更新

使用ES6 类实现继承
class P {
    //构造函数
    constructor(props) {
      this.name = props.name
    }

    getName() {
      alert(this.name)
    }
 }

//class继承
class C extends P {
    //构造函数
    constructor(props) {
      //调用实现父类的构造函数
      super(props);
      this.name = props.name
    }
  }
var c = new P({
    name: 'tom'
})
c.getName()  // tom

总结

  • 在声明一个函数同时,就会生成一个空的对象,该函数的prototype指向该空对象。
  • 每个对象/实例对象都会有一个proto属性,指向该对象的构造函数原型,如果该对象不是使用new Fn() 生成的实例,那么该对象的proto 会指向Object.prototype。

参考

https://segmentfault.com/a/1190000017935023

相关文章

  • 005|JavaScript ES6新特性之Classes

    在过去,需要像 053|JavaScript 继承详解 那样实现继承。JavaScript这种继承实现方式与其它面...

  • javascript代码积累

    一、javascript实现继承 1.基于原型链实现继承 2.基于属性和方法复制实现继承 二、javascript...

  • Web前端经典面试试题及答案2

    javascript面向对象中继承实现? 面向对象的基本特征有:封闭、继承、多态。在JavaScript中实现继承...

  • 理解 JavaScript 中的原型链

    JavaScript 作为一门面对对象语言,但是却不支持接口继承,只支持实现继承。JavaScript 中实现继承...

  • 【javascript】继承

    javascript只支持实现继承,而且继承主要是依靠原型链来实现的。 原型链 javascript将原型链作为实...

  • JavaScript实现继承

    四种继承方式 1. 原型继承 示例: 优点:从instanceof关键字来看,实例既是父类的实例,又是子类的实例,...

  • JavaScript实现继承

    JavaScript是一门面向对象的编程语言,但是由于设计上的原因它没有像其他面向对象的语言一样有类的概念(在ES...

  • javaScript 实现继承

    继承是面向对象编程中三大特点之一。 为了方便描述,下面文章中,P 指代父类,parent,C 指代子类,child...

  • javascript实现继承

    javascript实现继承 原理 1 利用函数的call方法改变this指向,让子类有父类的属性 2 遍历父类的...

  • JavaScript实现继承

    实现继承分为多种方式,但主要还是通过原型链来实现的。 原型链继承 原型链继承就是使子类的原型指向父类构造出来的实例...

网友评论

      本文标题:javaScript 实现继承

      本文链接:https://www.haomeiwen.com/subject/vyclbctx.html