class的继承

·  阅读 368

class的继承!

一、实现一个继承;

先来看一个简单的例子


class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return this.x + '-' + this.y
  }
}

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

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

let p = new ColorPoint(10,20,'red')

// ColorPoint {x: 10, y: 20, color: 'red'}
//  color: "red"
//  x: 10
//  y: 20
复制代码

上面的例子是一个比较简单的继承;ES6类的继承;在子类中需要调用super,super指向的就是父类的构造器;将参数传给父类,并且将父类构造器中的this指向子类构造的实例,这就是我们为什么要调用super的原因;

二、扩展

如果子类没有定义constructor方法,这个方法会被默认添加,代码如下。也就是说,不管有没有显式定义,任何一个子类都有constructor方法;

class ColorPoint extends Point {

}

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

另一个需要注意的地方是,在子类的构造函数中,只有调用super之后,才可以使用this关键字,否则会报错。这是因为子类实例的构建,基于父类实例,只有super方法才能调用父类实例;

class Point {
  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; // 正确
  }
}

复制代码

三、剖析super的原理;

两种情况,第一种当super被当作函数执行时,第二种当super被当作对象使用时;


class A {}

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

复制代码

先来看一下super做了什么,通过上面的内容可以知道super首先是先调用了父类的构造器,然后再将父类构造器中的this指向了子类,因此可以简单的认为;


super == A.constructor.apply(this,args)  // 其中this是b类的实例

// super -->  Parent.constructor.apply(this,args)
// 温馨提示:super不能被当作函数在方法里面执行否则会报错;

复制代码

上面的情况时super被当作函数执行时;当super被当作对象执行时,可以在方法中调用;


class A {
  p() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}

let b = new B();
// 这里需要注意,由于super指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super调用的。
复制代码

此时super作为对象时,在普通方法中或者构造函数中,指向父类的原型对象;在静态方法中,指向父类。

总结:super的调用位置和调用方法

1. 作为函数

  • 只能在构造器中进行调用;指向父类的构造器

1. 作为对象

  • 在构造器和函数中调用 指向 父类的原型对象
  • 在静态方法中调用 指向 父类

四、继承相关

class A {
}

class B extends A {
}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype 
复制代码

子类的__proto__ 属性永远指向自己的父类;子类prototype属性的__proto__属性,表示方法的继承,总是指向父类的prototype属性。

继承的原理

类的继承可以通过Object.setPrototypeOf()来进行实现;

// 例如
class A {}
class B extends A {}

// 要实现上述的继承关系,可以做到;

Object.setPrototypeOf(B.prototype , A.prototype)
Object.setPrototypeOf(B , A)

// 而在这里setPrototypeOf的实现可以是这样子的;

Object.setPrototypeOf = function (obj, proto){
  obj.__proto__ = proto;
  return obj;
}


// 所以

B.prototype.__proto__ = A.prototype;   // true
B.__proto__ = A  // true

复制代码

实例的继承

// 例如
class A {}
class B extends A {}

const a = new A()
const b = new B()
a.__proto__ === b.__proto__ // false
a.__proto__.__proto__ === b.__proto__ // true
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改