JS 基础-原型和原型链

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

定义 class

基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

• constructor：constructor 方法是类的默认方法，一个类必须有 constructor 方法，如果没有显式定义，空的 constructor 方法会被默认添加

class Student {  }

// 等同于
class Student {
    constructor() {}
}

• 属性：实例的属性除非显性定义在其本身（即定义在 this 对象上），否则都是定义在原型上（即定义在 class 上）

class Student {
    constructor(name, number) {
        this.name = name
        this.number = number
    }
}

• 方法：定义 sayHi 方法

class Student {
    constructor(name, number) {
        this.name = name
        this.number = number
    }
    sayHi() {
        console.log(`姓名 ${this.name}，学号 ${this.number}`)
    }
}

通过类 new 对象/实例

const xialuo = new Student('夏洛', 100)
console.log(xialuo.name, xialuo.number)
xialuo.sayHi()

使用 class 实现继承

• extends
• super

// 定义父类
class People {
    constructor(name) {
        this.name = name
    }
    eat() {
        console.log(`${this.name} eat something`)
    }
}

// Student 子类
class Student extends People {
    constructor(name, number) {
        super(name)
        this.number = number
    }
    sayHi() {
        console.log(`姓名 ${this.name}，学号 ${this.number}`)
    }
}

// Teacher 子类
class Teacher extends People {
    constructor(name, major) {
        super(name)
        this.major = major
    }
    teach() {
        console.log(`${this.name} 教授 ${this.major}`)
    }
}

const xialuo = new Student('夏洛', 100)
console.log(xialuo.name, xialuo.number)
xialuo.sayHi()
xialuo.eat()

原型

原型关系

• 每个 class 都有显示原型 prototype
• 每个实例都有隐式原型 __proto__
• 实例的 __proto__ 指向对应 class 的 prototype

基于原型的执行规则

• 获取属性 xialuo.name 或执行方法 xialuo.shaHi() 时
• 先在自身属性和方法查找
• 如果找不到则自动去 __proto__ 中查找

原型链