ES6 — 继承
最后更新于：2022-04-02 08:10:24
[TOC]
>[success] # es5 -- 继承
~~~
1.下面的案例创建一个'Food'类，创建一个'Vegetables' 类。如果想继承就
让'Vegetables'的原型链等于'Food' 实例
~~~
>[danger] ##### 继承案例
~~~
function Food(){
this.type = 'food'
}
// 通过原型链给 Food 写方法
Food.prototype.getType = function(){
return this.type
}
function Vegetables(name) {
this.name = name
}
// 将原型链里添加你要继承的类实例(继承)
Vegetables.prototype = new Food()
// 创建一个蔬菜的 实例
const tomato = new Vegetables()
console.log(tomato.getType()) // 打印结果：food ，继承了父类Food的getType方法
~~~
>[success] # es6 -- 继承
~~~
1.es6 的'class' 是一个语法糖，也就是说明我们看到的es6 继承还是遵循了'es5'逻辑，
只是写法变了
2.'es6' 的 继承使用关键字'extends' 和 'super'
3.继承同样会继承父类的静态方法，但是别忘了静态方法只有类能调用，因此子类想
用的时候还是需要子类去调用，别用实例去调用
~~~
>[danger] ##### 案例
~~~
1.下面的案例创建了一个'Animal'类，我们创建了一个'People '类 继承'Animal',
'People' 继承'Animal' 的时候使用'extends '关键字，而且在'People '构造函数中
增加了'super()'他会继承父类的'构造函数'
~~~
~~~
class Animal {
constructor (name,age){
this.name = name
this.age = age
}
speak(){
return `在${this.name}说话`
}
}
class People extends Animal{
constructor(name,age,sex){
super(name,age) // 等同于 Animal 中的constructor
this.sex = sex
}
getSex(){
return `${this.name} 的性别：${this.sex} 年龄${this.age}`
}
}
const xiaoMing = new People('xiaoMing',17,'男')
console.log(xiaoMing.speak()) //继承了父类方法 打印结果： 在xiaoMing说话
console.log(xiaoMing.getSex()) //继承了父类age属性打印结果： xiaoMing 的性别：男 年龄17
~~~
>[danger] ##### 实例跟当前类和父类关系
~~~
1.使用'instanceof' 运算符用来测试一个对象在其原型链中是否存在一个构造函数,注意
是一个对象说否在，基本类型number 之类是有坑的，他们不是对象所以不存在判断说法举个例子:
let num = 1
num instanceof Number // false
// 转成了对象
num = new Number(1)
num instanceof Number // true
2.利用'instanceof ' 也能说明这个class其实是语法糖，他们跟es5 一样的都在原型链上
~~~
* 上面的案例 当前实例 和 父类都是true 也能说明他们都在原型链上
~~~
console.log(xiaoMing instanceof People) // true
console.log(xiaoMing instanceof Animal) // true
~~~
>[danger] ##### 判断当前类的父类 -- getPrototypeOf
~~~
console.log(Object.getPrototypeOf(People) === Animal) // true
~~~
>[danger]##### super -- 作为对象/ 和函数
~~~
1.当'super' 是函数的时候，在'constructor' 中使用表示父类的构造函数
2.当作为对象'super作为对象',对象使用见案例
2.1.在普通方法中 -》 父类的原型对象
2.2 在静态方法中 -》 父类
~~~
* 案例
~~~
class Parent {
constructor () {
this.type = 'parent'
}
getName () {
return this.type
}
}
Parent.getType = () => {
return 'is parent'
}
class Child extends Parent {
constructor () {
super()
console.log('constructor: ' + super.getName())
}
getParentName () {
// 调用了父类的方法，这个方法是实例调用，因此说是父类的原型对象
console.log('getParentName: ' + super.getName())
}
static getParentType () {
// 因为静态方法只能类调用因此'super' 指代是父类
console.log('getParentType: ' + super.getType())
}
}
const c = new Child()
c.getParentName()
Child.getParentType()
~~~
>[danger] ##### __proto__ 和 prototype
~~~
子类的__proto__指向父类本身
子类的prototype属性的__proto__指向父类的prototype属性
实例的__proto__属性的__proto__指向父类实例的__proto__
~~~
>[danger] #### es5 不能继承原生构造函数es6可以
* 原生构造函数
~~~
// Boolean
// Number
// String
// Array
// Date
// Function
// RegExp
// Error
// Object
~~~
~~~
// Boolean
// Number
// String
// Array
// Date
// Function
// RegExp
// Error
// Object
class CustomArray extends Array {
constructor (...args) {
super(...args)
}
}
const arr = new CustomArray(3, 4, 5)
// arr.fill('+')
console.log(arr)
console.log(arr.join('_'))
~~~
';