【九月打卡】第14天 BAT大牛带你横扫初级前端JavaScript面试（第二版）

学习课程名称：BAT大牛带你横扫初级前端JavaScript面试（第二版）
章节名称：原型和原型链（新版）
讲师姓名：双越

---

课程内容：

1. class 和继承
2. 原型
3. 原型链和instanceof

---

有过前端经验的同学，都知道JS本身基于原型继承的语言，在ES6之前，只能通过原型继承来写继承。ES6的出现，才出现了新的继承方式：Class继承（底层实现依然还是原型链）

Class 是面向对象语法的实现。

Class类似个模板，通过constructor可以去构建一些东西，可以附上一些属性和方法。

class Singer {
    constructor(name,songs) {
        this.name = name
        this.songs = songs
    }
    singMusic() {
        console.info(`歌手姓名：${this.name},喜欢唱：${this.number}`)
    }
}
 
 
通过类 new 一个对象/实例
const demo = new Singer('fans','我爱我的祖国')
console.log(demo.name). // fans
console.log(demo.songs) // 我爱我的祖国
demo.singMusic() // 歌手姓名：fans,喜欢唱：我爱我的祖国

继承（一连串的关系）：

我们可以写一个父类，让子类去继承父类的属性和方法

//父类
class People {
    constructor(name) {
        this.name = name    
    }
    drink() {
        console.info(`${this.name} drink water`)    
    }
}
 
//子类
class Singer extends People {
    construtor(name,songs) {
        super(name)//一定要在this之前调用
        this.songs = songs    
    }
    singMusic() {
        console.log(`我叫${this.name},喜欢唱${this.songs}`)
    }
} 
 
通过 类 new 一个对象/实例
const demo = new Singer('fans','我爱我的祖国')
console.info(demo.name) // fans
console.info(demo.songs) // 我爱我的祖国 
demo.singMusic() // 我叫fans,喜欢唱我爱我的祖国
demo.drink() //fans drink water

特别说明：Object是所有class的父类

类型判断：大家都知道，用typeof只能判断值类型，能判断出是否为引用类型（但是不可细分）

由此instanceof闪亮登场了，instanceof可以去判断引用类型

原型

class 实际上通过typeof得到的是一个函数（function）,可见是一个语法糖。

// 隐式原型 和 显式原型
console.log(demo.proto) // 隐式原型
console.log(Singer.prototype) // 显示原型
console.log(demo.proto === Student.prototype) // true

原型关系

每个class都有显示原型prototype
每个实例都有隐式原型__proto__
实例的隐式原型__proto__指向对应class的prototype
基于原型的执行规则

获取属性demo.name或执行方法demo.singMusic()时
先在自身属性和方法中查找
如果找不到，则会自动去__proto__中查找
原型链

console.log(Singer.prototype.proto)
console.log(People.prototype)
console.log(People.prototype === Singer.prototype.proto)

---