深入理解ES6父子继承：this指向和执行顺序
以下代码演示了ES6中父子类的继承，以及this指向和执行顺序的细节：
class Parent { constructor() { console.log('Parent constructor', this.name); // 1 this.init(); // 2 this.logNum = this.logNum.bind(this); // 3 } name = (() => { // 4 console.log('Parent name init'); // 5 return 'Parent'; // 6 })(); num = -1; init() { console.log('Parent init', this.name); // 7 } logNum() {}}class Child extends Parent { constructor() { console.log('Child constructor'); // 8 super(); // 9 console.log('super exec finish', this.num); // 10 } name = 'Child'; num = (() => { // 11 console.log('Child num init'); // 12 return 99; // 13 })(); init() { console.log('Child init', this.name); // 14 super.init(); // 15 this.num = 10; // 16 } logNum() { console.log(this.num); // 17 }}const { logNum } = new Child();logNum(); // 18
输出结果：
Child constructorParent name initParent constructor ParentChild init ChildParent init ParentChild num initsuper exec finish 9999
关键点分析：
类字段初始化： 在实例化Child之前，Parent类的静态字段name就已经通过立即执行函数表达式（IIFE）初始化为'Parent'。这发生在任何构造函数执行之前。
super()调用： Child的构造函数中，super()调用必须在this被使用之前。super()调用会执行Parent的构造函数。
this指向： 在Parent和Child的构造函数以及init方法中，this始终正确地指向当前实例（Child实例）。
执行顺序： 代码的执行顺序按照数字标号所示，清晰地展现了类字段初始化、super()调用、父类构造函数执行、子类构造函数执行的顺序。
实例属性初始化： Parent类的实例属性在Parent构造函数中初始化；Child类的实例属性在Child构造函数中，super()调用之后初始化。Child的num属性在super()之后初始化，因为super()调用会先执行父类的构造函数。
方法绑定： this.logNum = this.logNum.bind(this); 这行代码确保了logNum方法中的this始终指向正确的实例，即使在不同的上下文中调用。
通过以上分析，可以明确理解ES6父子类继承中this指向和执行顺序的机制，避免常见的误解。 super()的调用时机和类字段的初始化顺序是理解关键。
以上就是ES6父子继承中this指向和执行顺序究竟是怎样的？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1502194.html
微信扫一扫 
支付宝扫一扫 
