ECMA6 ---- Class篇 (重难点个人向)

一、Class中的this指向问题

  • 构造函数中:this指向新创建出来的实例
  • 类的方法中:this指向该类的实例对象
  • 类的静态方法中:this指向类本身

二 、super的使用

1、super作为方法在子类的构造函数中使用

super表示父类的构造函数,子类的构造函数中super一定要放在构造函数最上面,因为super的作用是形成一个子类的对象,这个对象中包含了父类的实例属性和方法

2、super作为对象在子类的普通方法和静态方法中使用

  • 普通方法:super指向父类的原型对象,所以只能获取到父类原型对象中定义的属性和方法。实例对象上创建的属性和方法无法获取
  • 静态方法:super指向父类

如何辨别那些是原型对象中的属性和方法,那些是实例对象中的:除了显式定义在this上的,其他的的都是原型对象中的

三、类的继承关系

  • __proto__:在对象中,指向对应的构造函数的protoType属性,子类的__proto__属性,表示构造函数的继承,直接指向父类
  • protoType.__proto__:表示方法的继承,指向的是父类的protoType属性

父类和子类之间有两条继承链,一条是__proto__属性继承链,一条是protoType.__proto__属性继承链

核心

  • 实例的继承:通过super()调用父类构造函数设置获得
  • 原型方法及属性的继承:通过继承链children.protoType.__proto__ = parent.protoType获得
  • 静态方法:通过继承链children.__proto__ = parent获得

四、创建一个新实例时发生了什么事情

  1. 当调用 new Child() 时:

    • 先创建空对象 {}
    • 调用 Child 构造函数
    • Child 构造函数中调用 super()(即 Parent 构造函数)
    • Parent 构造函数向这个对象添加属性 ab
    • 然后 Child 构造函数继续添加属性 c
相关推荐
志尊宝37 分钟前
Vue3 零基础每日笔记(029):插槽 slot 三连——默认、具名、作用域一次讲透
前端·javascript·vue.js·vue·前端开发
铁皮饭盒1 小时前
网页端, 40mb离线模型, 自动抠图, 不用 Python,不用服务器,不用 API Key, 不用显卡
前端·javascript·后端
福兮说1 小时前
在浏览器里写一个“够用就好“的 Excel 公式求值器
前端·javascript·excel·编译原理
志尊宝1 小时前
Vue3 零基础每日笔记(027):组件上的 v-model——让自定义组件也能双向绑定
前端·javascript·vue.js·笔记·html5
云浪1 小时前
从 0 手写一个 MCP Server:让 Copilot 调用 Tool 完成四则运算
javascript·node.js·mcp
尾善爱看海11 小时前
Vue 面试收官篇:SSR、性能优化落地、30 道高频面试题精讲(附标准答案)
前端·javascript·vue.js·面试·vue
李明卫杭州16 小时前
React 复合事件系统对比解析
前端·javascript·react.js
LEE17 小时前
前端转型全栈 01:数据建模,前端最大的盲区
前端·javascript·后端
雪芽蓝域zzs17 小时前
第四十七节:驾驶舱大屏 ECharts 图表集成
前端·javascript·vue.js
梦醒沉醉18 小时前
7、表达日期和时间(前朝遗老Date)
javascript