美文网首页
ES6之类的方式完成继承

ES6之类的方式完成继承

作者: 锋享前端 | 来源:发表于2018-09-05 14:00 被阅读0次

继承

在ES6之前要完成继承,需要写很多的代码。看下面的继承的例子:

<script type="text/javascript">
    function Father(name) {
        this.name = name;
    }
    Father.prototype.sayName = function () {
        console.log(this.name);
    }

    function Son(name,age) {
        Father.call(this, name);
        this.age = age;
    }
    Son.prototype = new Father();
    Son.prototype.constructor = Son;
    Son.prototype.sayAge = function () {
        console.log(this.age);
    }

    var son1 = new Son("儿子", 20);
    son1.sayAge();  //20
    son1.sayName(); //儿子

</script>

1 继承的基本写法

如果在ES6通过类的方式完成继承就简单了很多。

需要用到一个新的关键字:extends

<script type="text/javascript">
    class Father{
        constructor(name){
            this.name = name;
        }
        sayName(){
            console.log(this.name);
        }
    }
    class Son extends Father{  //extents后面跟表示要继承的类型
        constructor(name, age){
            super(name);  //相当于以前的:Father.call(this, name);
            this.age = age;
        }
        //子类独有的方法
        sayAge(){
            console.log(this.age);
        }
    }

    var son1 = new Son("李四", 30);
    son1.sayAge();
    son1.sayName();
    console.log(son1 instanceof Son);  // true
    console.log(son1 instanceof Father);  //true

</script>

这种继承方法,和我们前面提到的构造函数+原型的继承方式本质是一样的。但是写起来更简单,可读性也更好。

关于super的使用,有几点需要注意:

  1. 你只能在派生类中使用 super(),否则(没有使用 extends 的类或函数中使用)一个错误会被抛出。
  2. 你必须在构造函数的起始位置调用 super(),因为它会初始化 this。任何在 super() 之前访问 this 的行为都会造成错误。也即是说super()必须放在构造函数的首行。
  3. 在类构造函数中,唯一能避免调用 super() 的办法是返回一个对象。

2在子类中屏蔽父类的方法(重写)

如果在子类中声明与父类中的同名的方法,则会覆盖父类的方法。(这种情况在其他语言中称之为 方法的覆写、重写 )

<script type="text/javascript">
    class Father{
        constructor(name){
            this.name = name;
        }
        sayName(){
            console.log(this.name);
        }
    }
    class Son extends Father{  //extents后面跟表示要继承的类型
        constructor(name, age){
            super(name);  //相当于以前的:Father.call(this, name);
            this.age = age;
        }
        //子类独有的方法
        sayAge(){
            console.log(this.age);
        }
        //子类中的方法会屏蔽到父类中的同名方法。
        sayName(){
            super.syaName();  //调用被覆盖的父类中的方法。 
            console.log("我是子类的方法,我屏蔽了父类:" + name);
        }
    }

    var son1 = new Son("李四", 30);
    son1.sayAge();
    son1.sayName();
</script>

如果在子类中又确实需要调用父类中被覆盖的方法,可以通过super.方法()来完成。

注意:

  1. 如果是调用构造方法,则super不要加点,而且必须是在子类构造方法的第一行调用父类的构造方法
  2. 普通方法调用需要使用super.父类的方法() 来调用。

3 静态方法也可以继承

<script type="text/javascript">
   class Father{
       static foo(){
           console.log("我是父类的静态方法");
       }
   }
   class Son extends Father{

   }
   Son.foo(); //子类也继承了父类的静态方法。  这种方式调用和直接通过父类名调用时一样的。

</script>

相关文章

  • ES6之类的方式完成继承

    继承 在ES6之前要完成继承,需要写很多的代码。看下面的继承的例子: 1 继承的基本写法 如果在ES6通过类的...

  • js对象的继承方式

    es6的继承方式 原型链继承方式 实例继承 此类继承方式比较简单直接 把 new的 对象直接付给新的变量就是可以了...

  • js实现继承

    1、使用ES6的方式 2、使用原型链组合继承 3、使用Object.create实现继承

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

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

  • ES5和ES6 实现继承方式

    在ES5 中:通过原型链实现继承的,常见的继承方式是组合继承和寄生组合继承;在ES6中:通过Class来继承 组合...

  • JavaScript实现继承的几种方式总结一

    虽然在ES6中有了继承,使用extends关键字就能实现。本篇讲的不是这种,而是ES6之前的几种实现继承的方式。 ...

  • Javascript的继承与多态

    本文先对es6发布之前javascript各种继承实现方式进行深入的分析比较,然后再介绍es6中对类继承的支持以及...

  • JavaScript ES6 class多重继承实践与总结

    ES6中,class原生是不支持多重继承的,根据阮一峰ES6参考资料中的方法,通过以下方式即可实现class继承多...

  • 面向对象类

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

  • 手写实现继承

    这里就只实现两种方法了,ES6之前的寄生组合式继承 和 ES6之后的class继承方式。 补充一个小知识, ES6...

网友评论

      本文标题:ES6之类的方式完成继承

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