14、原型与原型链

在 JS 中,每个用function定义的函数,都有prototype属性,指向一个普通对象,该对象存储的数据可供其实例使用。
在 JS 中,每个对象都有__proto__属性,指向一个普通对象,该对象存储的数据可供其使用。
结合上面两句话,得出的结果为:实例.__proto__ === 构造函数.prototype

1
2
3
4
5
function Person() {}

const person = new Person()

person.__proto__ === Person.prototype // true

总结:对象有一个原型(__proto__),函数有两个原型(__proto__、prototype)

而原型链就是用来找属性/方法的一种规则,当在对象自身没有属性/方法时,则会去找其原型(__proto__)对象上,若没有则再从原型(__proto__)对象上的原型(__proto__)对象找

完整版的原型链

1
2
3
4
5
6
7
8
9
10
11
12
function Person() {}

const person = new Person()

// person(实例)与其构造函数 Person
person.__proto__ === Person.prototype // true

// 原型对象(实例)与其构造函数 Object
person.__proto__.__proto__ === Object.prototype // true

// 原型对象(实例)的原型对象(实例)与其构造函数 null,为了避免无限循环,所以等于 null
person.__proto__.__proto__.__proto__ === null // true

所有关系的原型链

如何判断实例:实例.__proto__ === 构造函数.prototype,也就是instanceof的核心判断,可以继承的哦
上述图中的关系为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
person.__proto__ === Person.prototype // true
Person.__proto__ === Function.prototype // true
Function.__proto__ === Function.prototype // true

person.__proto__.__proto__ === Object.prototype // true
Person.__proto__.__proto__ === Object.prototype // true
Function.__proto__.__proto__ === Object.prototype // true
Object.__proto__.__proto__ === Object.prototype // true

// 所以得出的实例关系为:
person instanceof Person // true
Person instanceof Function // true
Function instanceof Function // true

person instanceof Object // true
Person instanceof Object // true
Function instanceof Object // true
Object instanceof Object // true

// 其中比较有意思的是:Function、Object 它们互生,并且自生

14、原型与原型链
https://mrhzq.github.io/职业上一二事/前端面试/每日知识卡片/14、原型与原型链/
作者
黄智强
发布于
2024年2月3日
许可协议