美文网首页
js的继承

js的继承

作者: 任无名F | 来源:发表于2017-05-02 19:16 被阅读0次

一、 简单原型继承

function Parent() {
  this.a = 1;
  this.b = [1];
}
Parent.prototype.hello = function() {}

function Child(name) {
  this.name = name;
}
Child.prototype = new Parent(); // 核心
Child.prototype.constructor = Child; // 修正Child的构造函数

let child1 = new Child("child1");
let child2 = new Child("child2");

核心:使用父类的实例来作为子类的原型对象
缺点:1.父类的引用属性会在子类实例中共享 2.创建子类实例时无法给父类构造函数传参

二、 借用构造函数

function Parent(num) {
  this.a = num;
  this.b = [1];
  this.hello2 = function() {} // 此函数会被复制到子类
}
Parent.prototype.hello = function() {} // 此函数不会被复制到子类

function Child(name, num) {
  Parent.call(this, num); // 核心
  this.name = name;
}

let child1 = new Child("child1", 1);
let child2 = new Child("child2", 2);

核心:借用父类的构造函数,将父类的属性复制给子类实例,没有用到原型
优点:解决了简单原型继承的两个问题
缺点:由于没有用到原型,父类复制来的函数无法实现复用

三、 组合继承

function Parent(num) {
  this.a = num;
  this.b = [1];
}
Parent.prototype.hello = function() {}

function Child(name, num) {
  Parent.call(this, num); // 核心
  this.name = name;
}
Child.prototype = new Parent(); // 核心,此处实例化了一个多余的父类对象
Child.prototype.constructor = Child; // 修正Child的构造函数

let child1 = new Child("child1", 1);
let child2 = new Child("child2", 2);

核心:将上述两种方式组合起来使用,将需要复用的函数都放在原型上,将需要复制的属性通过借用构造函数复制给子类实例
优点:解决了所有问题
缺点:实例化了一个“多余”的父类对象

四、 寄生组合继承

function Parent(num) {
  this.a = num;
  this.b = [1];
}
Parent.prototype.hello = function() {}

function Child(name, num) {
  Parent.call(this, num); // 核心
  this.name = name;
}
function extend(child, parent) {
  let F = function() {};
  F.prototype = parent.prototype;
  child.prototype = new F(); // 核心,用一个空函数来避免实例化属性的浪费
  child.prototype.constructor = child; // 修正构造函数
}
extend(Child, Parent); // 核心

let child1 = new Child("child1", 1);
let child2 = new Child("child2", 2);

核心:与组合继承基本一样,只是针对多余的实例化进行了优化
优点:解决了所有问题
缺点:比较麻烦……

相关文章

  • Js的继承

    js的继承 @(js)[继承, js, 前端] 组合继承是原性链继承和构造函数继承的合体,它汲取了二者各自的有点,...

  • JS继承

    JS中的继承 许多OO语言都支持两种继承方式:接口继承和实现继承; 因为JS中没有类和接口的概念 , 所以JS不支...

  • #js继承

    js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承)类式继承(构造函数间的继承) 类式继承是...

  • js继承遇到的小问题

    这两天在看js继承方面,它不像OC那种传统的类继承。js继承方式还是挺多的。比如:原型继承、原型冒充、复制继承 原...

  • JS中继承的实现

    JS中继承的实现 #prototype (js原型(prototype)实现继承) 全局的Function对象没有...

  • JavaScript 10

    js继承的概念 1.通过原型链方式实现继承(对象间的继承) 2.类式继承(构造函数间的继承) 由于js不像Java...

  • js继承

    js继承js 继承-简书 原型链实现集继承 上面的代码实现原型链继承最重要的son.prototype=new f...

  • JS继承的实现的几种方式

    前言 JS作为面向对象的弱类型语言,继承也是非常强大的特性之一,那么如何在JS实现继承呢? JS继承的实现方式 既...

  • JS里的继承

    什么是继承继承的原理如何完成JS的继承? 什么是继承 继承就是子类拥有父类的各种属性和方法那什么是类?这里的JS的...

  • 继承方式(6种)1.7

    JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待。 JS继承...

网友评论

      本文标题:js的继承

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