登录  /  注册

es6中super的用法是什么

WBOY
发布: 2022-05-05 18:11:14
原创
2097人浏览过

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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号