es6中super的用法是什么-前端问答-PHP中文网

es6中super的用法是什么

WBOY

发布： 2022-05-05 18:11:14

原创

2484人浏览过

super的用法：1、super作为函数时，用于表示父类的构造函数，语法为“constructor(){super();}”；2、super作为对象时，在普通方法中用于指向父类的原型对象，在静态方法中用于指向父类。

es6中super的用法是什么

本教程操作环境：windows10系统、ECMAScript 6.0版、Dell G3电脑。

es6中super的用法是什么

第一种情况：super作为函数时，代表父类的构造函数

ES6要求，子类的构造函数，必须执行一次super函数

class A {}
class B extends A {
  constructor() {
    super();//子类的构造函数，必须执行一次super函数，代表父类的构造函数
  }
}

登录后复制

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

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

登录后复制

上述代码中，new.target指向当前正在执行的函数，super()执行的时候，它指向的是子类B的构造函数，而不是父类A的构造函数，也就是说，super()内部的this指向B

super作为函数使用时，必须出现在子类的构造函数constructor中,否则会报错

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();

登录后复制

上面代码中，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是定义在父类的原型对象上，所以可以使用super.x来访问

【相关推荐：javascript视频教程、web前端】

以上就是es6中super的用法是什么的详细内容，更多请关注php中文网其它相关文章！