深入理解ES6父子继承中的this指向和执行顺序
ES6中的继承机制有时会令人困惑，尤其涉及this指向和执行顺序。本文将通过代码示例，详细分析这两个关键问题。
class Parent { constructor() { console.log('parent constructor', this.name); this.init(); this.logNum = this.logNum.bind(this); } name = (() => { console.log('Parent name init'); return 'Parent'; })(); num = -1; init() { console.log('parent init', this.name); } logNum() {}}class Child extends Parent { constructor() { console.log('Child constructor'); super(); console.log('super exec finish', this.num); } name = 'Child'; num = (() => { console.log('Child num init'); return 99; })(); init() { console.log('Child init', this.name); super.init(); this.num = 10; } logNum() { console.log(this.num); }}const { logNum } = new Child();logNum();
问题一：Parent构造函数中this.name为何为’Parent’？
在Child实例化过程中，首先执行Parent的构造函数。虽然this在Parent构造函数内部指向Child实例，但name属性的初始化发生在构造函数执行之前。此时，this指向的是Parent的原型，因此name的值为’Parent’。
问题二：实例属性（例如x = 'a'）的初始化时机？
实例属性的初始化发生在构造函数执行之前。当Parent构造函数调用super()时，会先执行父类的构造函数，初始化父类的实例属性；之后，才会执行子类的构造函数，初始化子类的实例属性。
总结：ES6继承中属性初始化顺序
父类类字段初始化（静态属性）父类构造函数初始化实例属性子类类字段初始化（静态属性）子类构造函数初始化实例属性
通过以上分析，我们对ES6父子继承中的this指向和执行顺序有了更清晰的理解，有助于避免潜在的错误。
以上就是ES6父子继承中：this指向和执行顺序究竟是如何工作的？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1502196.html
微信扫一扫 
支付宝扫一扫 
