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
相关推荐
一叶怎知秋1 小时前
【openlayers框架学习】九:openlayers中的交互类(select和draw)
前端·javascript·笔记·学习·交互
allenlluo1 小时前
浅谈Web Components
前端·javascript
Mintopia1 小时前
把猫咪装进 public/ 文件夹:Next.js 静态资源管理的魔幻漂流
前端·javascript·next.js
用户1409508112801 小时前
如何在JavaScript中更好地使用闭包?
javascript
flashlight_hi1 小时前
LeetCode 分类刷题:16. 最接近的三数之和
javascript·数据结构·算法·leetcode
汪子熙2 小时前
如何使用 Node.js 代码下载 Github issue 到本地
javascript·后端
前端Hardy2 小时前
HTML&CSS&JS:有趣的练手小案例-开关灯效果
前端·javascript·css
我想说一句2 小时前
超酷HTML5的网页拖拽功能!!
前端·javascript
诚实可靠王大锤2 小时前
使用MatterJs物理2D引擎实现重力和鼠标交互等功能,有点击事件(盒子堆叠效果)
javascript·计算机外设·交互
大熊学员2 小时前
JavaScript 基础语法
开发语言·javascript·ecmascript