es6中的super怎么用

这篇“es6中的super怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“es6中的super怎么用”文章吧。

为沈阳等地区用户提供了全套网页设计制作服务,及沈阳网站建设行业解决方案。主营业务为网站设计、成都做网站、沈阳网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

super的用法:1、super作为函数时,用于表示父类的构造函数,语法为“constructor(){super();}”;2、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来访问

以上就是关于“es6中的super怎么用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


网站标题:es6中的super怎么用
标题网址:http://azwzsj.com/article/peeoji.html