The -es6- from raven1207

es6语法继承，关于super用法

一、关于super关健字：

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

1.子类必须在constructor方法中调用super方法，不然新建出来的实例会报错，因为子类中没有自己的this对象，而需要继承父类的this对象。如果不调用super，子类就得不到this对象。

2.es5中是先创造子类实例对象的this，然后把父类添加到this对象上(Parent.apply(this))。es6是先创造父类实例对象this，必须调用super方法，然后再用子类的构造函数修改this。

3.只有调用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当函数调用时，代表父类的构造函数。es6中，子类的构造函数须要先执行一次super函数。

class A(){}
class B extends A(){
constructor(){
super();//_当作函数调用时_
}
}

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

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

第二种情况：super当对象调用时。在普通方法中，super指向父类的原型对象;
在静态方法中，super指向父类;

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

上面代码中。super当对象用，这时，super在普通方法中，指向A.prototype。因此，super.p()==A.prototype.p();

这里需要注意，由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。

class A {
  constructor() {
    this.p = 2;
  }
}

class B extends A {
  get m() {
    return super.p;
  }
}

let b = new B();
b.m // undefined

上面代码中，p是父类A实例的属性，super.p就引用不到它。
如果属性定义在父类的原型对象上，super就可以取到。
class A {}
A.prototype.x = 2;

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

let b = new B();

上面代码中，属性x是定义在A.prototype上面的，所以super.x可以取到它的值。
ES6 规定，通过super调用父类的方法时，super会绑定子类的this。

class A {
  constructor() {
    this.x = 1;
  }
  print() {
    console.log(this.x);
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  m() {
    super.print();
  }
}

let b = new B();
b.m() // 2

上面代码中，super.print()虽然调用的是A.prototype.print()，但是A.prototype.print()会绑定子类B的this，导致输出的是2，而不是1。也就是说，实际上执行的是super.print.call(this)。

由于绑定子类的this，所以如果通过super对某个属性赋值，这时super就是this，赋值的属性会变成子类实例的属性

class A {
  constructor() {
    this.x = 1;
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(super.x); // undefined
    console.log(this.x); // 3
  }
}

let b = new B();

raven1207 / -es6- Goto Github PK

-es6-'s People

Contributors

Watchers

-es6-'s Issues

es6语法继承，关于super用法

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent