美文网首页
JS继承的实现(ES6)

JS继承的实现(ES6)

作者: 蓝瘦额香菇 | 来源:发表于2016-11-13 15:53 被阅读84次

1. 原型链继承

原型链继承是我们用的最多的一种继承方式,就是让一个子类的原型指向父类的实例即可。

function Parent() {
    this.name = 'mike';
}
function Child() {
    this.age = 12;
}
Child.prototype = new Parent();
function Brother() { 
    this.weight = 60;
}
Brother.prototype = new Child();

有人不禁要问为什么不指向父类的原型,而是父类的一个实例?

function Parent() {
    this.name = 'mike';
}
function Child() {
    this.age = 12;
}
Child.prototype = Parent.prototype;

如果子类的原型直接指向父类的原型,那么子类就无法获取父类构造函数定义的属性和函数,同时修改子类的原型也会影响到父类的原型,这是违背继承的原则的。

2. 类式继承(借用构造函数)

利用call和apply在子类的构造函数中调用父类的构造函数。

function Parent(age) {
    this.name = ['mike', 'jack', 'smith'];
    this.age = age;
}
function Child(age) {
    //Parent.call(this, age);
    Parent.apply(this, [age]);
}

这样子类就可以使用父类的属性了。

3. Class继承(ES6)

ES6实现了Class继承,底层还是通过原型链继承实现的,只是一种新的写法。

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {}
}
class ColorPoint extends Point {
    constructor(x, y, color) {
        super(x, y);
        this.color = color;
    }
    toString() {}
}

相关文章

  • 彻底弄清js继承的几种实现方式

    js有几种经典的继承方式。比如原型链继承、构造函数继承、组合继承、寄生组合继承、ES6继承。让我们一一分析并实现。...

  • ES5和ES6中继承的不同之处

    ES5和ES6中继承的不同之处 1、JS中视没有继承的,不过可以通过构造函数或是原型等实现继承,ES5实现继承的方...

  • JS中的继承(ES5)

    前言 ES6之前,没有严格意义上的class继承, 其实JS(ES5)主要是依靠原型链来实现继承的。 既然要实现继...

  • TS中类的继承和抽象类

    类的继承 我们知道js中有继承,最开始js是使用函数来模拟实现类的,一直到ES6出现,才开启了class以及ext...

  • 浅谈JavaScript原型、原型链的概念与继承的实现原理

    关于js对象的继承,es5和es6提供了两种不同的继承机制。es5通过修改原型链的方式实现继承,由此可见继承与原型...

  • JS继承的实现(ES6)

    1. 原型链继承 原型链继承是我们用的最多的一种继承方式,就是让一个子类的原型指向父类的实例即可。 有人不禁要问为...

  • 都0202年了,你还不知道javascript有几种继承方式?

    前言 当面试官问你:你了解js哪些继承方式?es6的class继承是如何实现的?你心中有很清晰的答案吗?如果没有的...

  • 关于JavaScript继承和原型链

    Before we get started 首先明确,JS的继承是由原型链来实现的。(即使在ES6中class的e...

  • JS中继承的实现

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

  • js之继承

    文章主讲 JS 继承,包括原型链继承、构造函数继承、组合继承、寄生组合继承、原型式继承、 ES6 继承,以及 多继...

网友评论

      本文标题:JS继承的实现(ES6)

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