请选择 进入手机版 | 继续访问电脑版

ES6之super关键字详解

[复制链接]
漫舞飞天 发表于 2021-1-1 18:31:45 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
  ES6重新实现了类的继续,而在继续的过程中,super关键字实现了至关重要的作用,可以说明白不了super关键字,也就掌握不了类的继续,本日我们就一起来盘盘super这个关键字
首先抛出一个概念: super这个关键字,既可以看成函数使用,又可以看成对象使用
第一种情况:super作为函数时,代表父类的构造函数
ES6要求,子类的构造函数,必须执行一次super函数
  1. class A {}class B extends A {  constructor() {    super();//子类的构造函数,必须执行一次super函数,代表父类的构造函数  }}
复制代码
注意:虽然super代表父类的构造函数,但此时返回的时B的实例,即super内部的this指的是B的实例,因此super()相当于 A.prototype.constructor.call(this)
  1. class A {  constructor() {    console.log(new.target.name);  }}class B extends A {  constructor() {    super();  }}new A() // Anew B() // B
复制代码
上述代码中,new.target指向当前正在执行的函数,super()执行的时候,它指向的是子类B的构造函数,而不是父类A的构造函数,也就是说,super()内部的this指向B
super作为函数使用时,必须出现在子类的构造函数constructor中,否则会报错
  1. class A {}class B extends A {  m() {    super(); // 报错  }}
复制代码
第二种情况:super作为对象时,在平常方法中,指向父类的原型对象,在静态方法中,指向父类
  1. 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调用
  1. 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就可以访问
  1. 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调用父类的方法时,方法内部的this指向当前的子类实例
  1. class A {  constructor() {    this.x = 1;  }  print() {    console.log(this.x);  }}class B extends A {  constructor() {    super();    this.x = 2;  }  m() {    super.print(); //平常方法中,通过super调用父类的方法时,方法内部的this指向当前类的实例  }}let b = new B();b.m() // 2
复制代码
上面代码中,super.print()虽然调用的是A.prototype.print(),但是内部的this指向子类B的实例,所以应该输出2,实际执行的是super.print.call(this)
由于this指向子类实例,所以通过super对某个属性赋值,这时super就是this,赋值的属性也会变成子类实例的属性
  1. class A {  constructor() {    this.x = 1;  }}class B extends A {  constructor() {    super();    this.x = 2;    super.x = 3; // 使用super对属性赋值,这时super相当于this    console.log(super.x); // undefined 这个相当于在平常函数中把super看成平常对象来使用,代表A.prototype,所以为undefined    console.log(this.x); // 3  }}let b = new B();
复制代码
上面代码中,super.x = 3这里相当于this.x = 3,给子类实例赋值,而取值的时候super.x相当于A.prototype.x,返回undefined
    super 作为对象,在静态方法中使用,相当于父类,而不是父类的原型
  1. class Parent {  static myMethod(msg) {    console.log('static', msg);  }  myMethod(msg) {    console.log('instance', msg);  }}class Child extends Parent {  static myMethod(msg) {    super.myMethod(msg);//super在静态方法中指向父类  }  myMethod(msg) {    super.myMethod(msg);//super在平常方法中指向父类原型  }}Child.myMethod(1); // static 1var child = new Child();child.myMethod(2); // instance 2
复制代码
上面代码中,super在子类的静态方法中指向父类,在平常方法中指向父类原型
另外。在子类的静态方法 中通过super调用父类的方法时, 方法内部的this指向当前的子类**,而不是子类的实例**
  1. class A {  constructor() {    this.x = 1;  }  static print() {    console.log(this.x);  }}class B extends A {  constructor() {    super();    this.x = 2;  }  static m() {    super.print();//this 指向子类,而不是实例  }}B.x = 3;B.m() // 3
复制代码
上述代码中静态方法B.m()中super指向父类,this指向子类,而不是子类实例
  使用super的时候,必须显示地指出是函数照旧对象,否则会报错
  1. class A {}class B extends A {  constructor() {    super();    console.log(super); // 报错  }}
复制代码
上面代码中的super,无法看出是对象照旧函数,则会报错,只要可以清晰的表明是函数照旧对象,就不会报错
  1. class A {}class B extends A {  constructor() {    super();    console.log(super.valueOf() instanceof B); // true  }}let b = new B();
复制代码
上面代码可以看出super是一个对象,则不会报错
最后,由于对象总是继续其他对象,所以可以在任意一个对象中,使用super关键字
  1. var obj = {  toString() {    return "MyObject: " + super.toString();  }};obj.toString(); // MyObject: [object Object]
复制代码
完!

来源:https://blog.csdn.net/u013448372/article/details/111997556
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )