首页 » 文章 » 文档 » js 基础问题 » 如何理解 JS 原型(隐式原型和显示原型)

如何理解 JS 原型(隐式原型和显示原型)

通过一些例子来说明,首先定义

class People {
    constructor(name) {
        this.name = name
    }

    eat(){
        console.log(`${this.name} eat something`)
    }
}

//子类
class Student extends People{
    constructor(name,number){
        super(name)
        this.number = number
    }

    sayHi(){
        console.log(
            `姓名${this.name},学号${this.number}`
        )
    }
}
//实例化
const xialuo = new Student('夏洛',100)
console.log(xialuo.name,xialuo.number) //夏洛 100
xialuo.sayHi() //姓名夏洛,学号100
xialuo.eat() //夏洛 eat something

类型判断 – instanceof

console.log(xialuo instanceof Student) //true
console.log(xialuo instanceof People) //true
console.log(xialuo instanceof Object) //true
console.log([] instanceof Array) //true
console.log([] instanceof Object) //true
console.log({} instanceof Object) //true

class 的原型本质是什么?实际上是函数,可见是语法糖

console.log(typeof People) //function
console.log(typeof Student) //function

原型

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

原型关系

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

基于原型的指向规则,获取属性或执行方法时

  • 先在自身属性和方法寻找
  • 如果找不到则自动去 __proto__ 中查找

»js 基础问题

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll to Top