美文网首页
几种继承方法

几种继承方法

作者: bestCindy | 来源:发表于2020-07-09 21:52 被阅读0次

先构造一个 parent

function Person(name) {
     this.name = name;
     this.hobby = ["painting"];
}
Person.prototype.job = "frontend";
Person.prototype.sayHello = function() {
    console.log("Hello " + this.name);
}

一、原型链继承

function Child() {
    this.name = "child";
}
Child.prototype = new Person();
let child = new Child();

这种方法不能向 parent 传参

而且引用类型的属性被所有实例共享,如下图:


二、借用构造函数

function Child() {
    Person.call(this, "duolaameng")
}
let child = new Child();

这种方法可以向 parent 传参

可以实现多继承

而且这种方法避免了引用类型被实例共享



这种方法每个子类都有父类实例函数的副本,影响性能

它也不能继承原型上的属性


三、组合继承

就是 原型链继承 + 构造函数继承

function Child(name) {
     Person.call(this, name)
}
Child.prototype = Person.prototype;
let child = new Child("duolaameng");

这种方法融合了原型链继承和构造函数的优点:

可以向 parent 传参

继承了原型上的属性

避免了引用类型被实例共享:


四、原型式继承

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

这种方式是将传入的对象作为创建对象的原型

本质上是对传入的参数 o 进行了一次浅拷贝

这也是 object.create() 的原理

这种方法也会有引用共享的问题:


五、寄生模式继承

 function createAnother(o) {
      var clone = Object.create(o);
      clone.sayHi = function () {
            console.log("hi");
      };
      return clone;
}
let person = new Person("Cindy");
var child = createAnother(person);

六、寄生组合式继承

function inheritPrototype(Child, Parent) {
    let prototype = Object.create(Parent.prototype);
    prototype.constructor = Child;
    Child.prototype = prototype;
}
function Child(name, job) {
      Person.call(this, name);
      this.job = job;
}
inheritPrototype(Child, Person)
let child = new Child("Cindy", "FE");
child.sayHello();

这个方法在前面原型链学习文集中的圣杯模式实现继承中加了调用父类构造函数的功能

七、ES6 的 Object.setPrototypeOf

ES6 提供了可以设置原型的方法

function Child(name) {
      this.name = name;
}
Object.setPrototypeOf(Child.prototype, Person.prototype);
let child = new Child("name");

注意 constructor 是 Child 哦!

八、ES6 中的 extends

相关文章

  • 几种继承方法

    先构造一个 parent 一、原型链继承 这种方法不能向 parent 传参 而且引用类型的属性被所有实例共享,如...

  • 我碰到的前端面试题(js)

    1.js实现继承有哪几种方法? 方法一:原型链继承 方法二: 构造函数继承 方法三: 组合继承 2.this指向问...

  • javaScript面向对象—继承

    继承的概念 继承:子类可以访问父类的所有属性和方法,并且可以对这些属性和方法进行扩展 继承的几种方式 原型链继承利...

  • 前端面试题目(二)

    javascript对象的几种创建方式 javascript继承的6种方法 详情:[JavaScript继承方式详...

  • 前端菜鸟成长记(三)之answer

    关于上次作业的答案 js有几种实现继承的方法(我直接给答案,原型链继承,借用构造函数继承,组合继承)?各自的优缺点...

  • JS面向对象

    类与实例 创建类 实例化 类与继承 实现继承的几种方式 方式一:利用构造函数进行继承 但是这种方法缺点是无法继承父...

  • JavaScript继承

    一、概述  JavaScript中,继承是基于原型链的,本文简单归纳几种继承方法。以以下Animal、Cat分别为...

  • 面向对象类

    类与实例 类的声明 ES5 ES6 生成实例 类与继承 如何实现继承 继承的几种方式 原型链是实现继承的主要方法 ...

  • JS继承

    JS继承的几种实现方式 继承是指子类继承父类的属性和方法,要实现继承,首先我们需要有一个父类 原型链继承 原型链继...

  • 原型模式(二)

    主要利用原型实现继承,主要由下面几种原型链继承,借用构造函数继承,组合继承,运行继承。下面就来详细介绍这几种继承的...

网友评论

      本文标题:几种继承方法

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