美文网首页
class类继承

class类继承

作者: codeSirCao | 来源:发表于2017-07-14 02:22 被阅读13次

    简介

    Class 可以通过extends
    关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

    eg:

        class Point {
        }
    
        class ColorPoint extends Point {
        }
    

    上面代码定义了一个ColorPoint类,该类通过extends关键字,继承了Point类的所有属性和方法。但是由于没有部署任何代码,所以这两个类完全一样,等于复制了一个Point类。下面,我们在ColorPoint内部加上代码。

    Super

    通过Super来调用父级 继承父级

    class ColorPoint extends Point {
      constructor(x, y, color) {
        super(x, y); // 调用父类的constructor(x, y)
        this.color = color;
      }
    
      toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
      }
    }
    

    【super】关键字,表示父类的构造函数,用来新建父类的this对象。

    子类必须在constructor方法中调用super方法,否则新建实例时会报错。

    这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象

    eg:

    没有使用super
    class Point { /* ... */ }

     class ColorPoint extends Point {
      constructor() {
      }
    }
    
    let cp = new ColorPoint(); // ReferenceError
    
    
     ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this         
    上面(Parent.apply(this))。
    ES6 的继承机制完全不同,实质是先创造父类的实例对象this(所以必须先调用super方法)
    ,然后再用子类的构造函数修改this。
    

    constructor

    如果子类没有定义constructor方法,这个方法会被默认添加,

    class ColorPoint extends Point {
    }
    
    // 等同于
    class ColorPoint extends Point {
      constructor(...args) {
        super(...args);
      }
    }
    

    【注意】在子类的构造函数中,只有调用super之后,才可以使用this关键字,否则会报错。这是因为子类实例的构建,是基于对父类实例加工,只有super方法才能返回父类实例。

    eg;

    class Point {//父类的class
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    }
    
    class ColorPoint extends Point {
      constructor(x, y, color) {
        this.color = color; // ReferenceError
        super(x, y);
        this.color = color; // 正确
      }
    }
    

    生成实例:
    let cp = new ColorPoint(25, 8, 'green');

    cp instanceof ColorPoint // true
    cp instanceof Point // true
    

    判断 Object.getPrototypeOf()

    判断,一个类是否继承了另一个类。
    Object.gerPrototypeOf(ColorPoint)=="Point"//返回父类

    super 关键字,

    既可以当作函数使用,也可以当作对象使用。在这两种情况下,它的用法完全不同。

    1:如上必须继承中调用super来获得父级this

    class A {}
    
    class B extends A {
     constructor() {
        super();
      }
    }
    

    【注意】,super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B,因此super()在这里相当于

     A.prototype.constructor.call(this)。==super()
    

    new.target //

    返回new 的对象 没有被new返回undefined

    eg:

     class A {
       constructor() {
         console.log(new.target.name);
      }
    }
    class B extends A {
      constructor() {
        super();
      }
    }
    new A() // A
    new B() // B
    

    作为函数时,super()只能用在子类的构造函数之中,用在其他地方就会报错。
    class A {}

    class B extends A {
      m() {
        super(); // 报错
      }
    }
    

    第二种情况,super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。

    class A {
      p() {
        return 2;
      }
    }
    
    class B extends A {
      constructor() {
        super();
        console.log(super.p()); // 2
      }
    }
    
    let b = new B();
    

    相关文章

      网友评论

          本文标题:class类继承

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