【亡羊补牢】JS灵魂之问 第2期 JS的继承(ES6)

引言

原型和原型链这块是必备知识,今天我们就好好探讨一波!

探讨问题

ES6 extends 继承 怎么做的

我们先来看下面这段简单代码:

class Father {
  constructor(name){
    this.name = name
  }
  sayHi() {
    console.log('Hello ' + this.name)
  }
}

class Son extends Father {
  constructor(name,age){
    super(name)
    this.age = age
  }
  sayAge(){
    console.log(this.age)
  }
}

const son = new Son('Chocolate',20)
console.log(son.name)
console.log(son.age)
son.sayHi()
son.sayAge()
// Chocolate
// 20
// Hello Chocolate
// 20

其中这段代码里有两条原型链:

/* 实例原型链 */
console.log(son.__proto__ === Son.prototype) // true
console.log(Son.prototype.__proto__ === Father.prototype) // true
console.log(Father.prototype.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__ === null) // true

/* 构造函数原型链 */
console.log(Son.__proto__ === Father) // true
console.log(Father.__proto__ === Function.prototype) // true
console.log(Function.prototype.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__ === null) // true

结合代码和图可以知道。 ES6 extends 继承,主要就是:

  1. 把子类构造函数(Child)的原型(__proto__)指向了父类构造函数(Parent),
  2. 把子类实例child的原型对象(Child.prototype)的原型(__proto__)指向了父类parent的原型对象(Parent.prototype)。

这两点也就是图中用不同颜色标记的两条线。

本文参考

若川博客 面试官问:JS的继承

木易杨说 JavaScript常用八种继承方案

最后

文章产出不易,还望各位小伙伴们支持一波!

往期精选:

小狮子前端の笔记仓库

访问超逸の博客,方便小伙伴阅读玩耍~

学如逆水行舟,不进则退
一百个Chocolate CSDN认证博客专家 CSDN博客专家 博客之星 前端开发攻城狮
JS,TS,LeetCode,Vue,React,算法爱好者。
主要分享前端知识,立志成为优秀前端博主。
座右铭:学如逆水行舟,不进则退!
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值