美文网首页
继承:es5 vs es6

继承:es5 vs es6

作者: 伐樱大魔 | 来源:发表于2020-02-21 17:06 被阅读0次

es5如何实现继承

es5实现继承主要是通过原型来实现的

  1. 首先实现一个父类
      function Father(name, age){
        this.name = name;
        this.age = age;
        this.work = function (){
            console.log('Father is working!')
        }
    }
    
    Father.prototype.address = 'chengdu';
    
    Father.prototype.code = function() {
        console.log('Father is coding!')
    }
    
  2. 其次实现一个子类继承父类
    function Child(name, age) {
        Father.call(this, name, age);
    }
    
    Child.prototype = Father.prototype;
    

这里面主要是两个部分:

1.父类原型数据的继承

Child.proptotype = Father.proptotype

2.父类非原型部分的数据的继承

Father.call(this, name, age)

这种继承方式叫做混合继承

现在查看一个继承类父类的子类是什么样的:

image

es6如何实现继承

通过extends就可以实现

class Father {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    work(){
        console.log('father is working');
    }
}

class Child extends Father{
    constructor(name, age) {
        super(name, age);
    }
}

这样子类就拥有了父类的属性和方法了

相关文章

  • 构造函数

    es5 es6 继承

  • JavaScript的多态和封装

    在之前的文章中我们已经介绍了JavaScript的继承包含了ES5和ES6的版本。 ES5继承 传送门 ES6继承...

  • ES5 和 ES6 继承比较:

    ES5构造函数和继承: ES6构造函数和继承:

  • 用ES5和ES6实现继承

    ES5 prototype实现继承 ES6 写法

  • es5 es6静态方法、类、单例模式

    es5中的类和静态方法 es5继承 es6中的类 es6里面的继承 es6里面的静态方法 es6单例模式 转载:h...

  • 继承方式

    es6的继承: es6的继承写法简洁方便,十分直观。 es5的继承:(只推荐组合继承--最常用) 组合继承 除了S...

  • 前端常见面试题(八)@郝晨光

    ES5/ES6 的继承除了写法以外还有什么区别? ES5寄生组合式继承(只是列举一个方法,ES5继承还有很多实现方...

  • JS 继承的两种写法

    ES5 ES6 两种方法都能实现继承,本质上ES6继承是ES5继承的语法糖,会更简单些,但是假如要添加一个非函数的...

  • JavaScript的继承

    前言 忘了整理的理一理。 ES5继承 先不涉及ES6的继承,后面会涉及。这里主要是ES5的继承: 原型链继承 构造...

  • 继承:es5 vs es6

    es5如何实现继承 es5实现继承主要是通过原型来实现的 首先实现一个父类 function Father(na...

网友评论

      本文标题:继承:es5 vs es6

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