一篇文章弄懂JS中的原型和原型链

什么是原型?

 每一个函数都有一个原型(是一个空间,或者是一个对象,内部能存储一些东西),原型内部都有一个constructor,这个属性表明当前这个原型具体是哪个函数的

函数访问原型的方法 : 函数.prototype

 每一个对象都有一个__proto__ (注意:proto两边分别是两个下划线),可以去访问到自己构造函数的原型

实例化对象,本质上也是一个函数,所以它也可以访问到自己的构造函数对象访问原型的方法

对象访问原型的方法 : 对象.__proto__

对象的访问规则,先在当前作用域(就是对象内部)查找,找到就使用;如果没有找到,则会顺着__proto__向上查找

❗❗❗  注意点 : 构造函数的函数体内,通常写属性;构造函数的原型内, 通常写方法(函数)

构造函数的原型内部添加方法, 并不是为了给构造函数使用,通常是为了给实例化对象使用

上诉打印结果为:

 ❗❗❗  记住,任何一个数组的构造函数都是Array;任何一个对象的构造函数都是Object;任何一个函数的构造函数都是Function

案例分析

举一个小例子:

需求: 给数组扩展一个求最大值的方法

打印结果:

原型链

含义:查找对象的某一个属性:

先在对象内部开始查找, 找到直接使用, 然后停止查找

如果没有找到, 会去对象的__proto__查找, 如果找到直接使用, 然后停止查找

如果这里没找到, 会继续去对象的 __proto__ 查找, 找到直接使用, 然后停止查找

如果还是没找到, 会继续向上查找

...

直到找到顶层作用对象    Object.prototype, 找到就用, 找不到就返回一个 undefined

案例分析

举一个小例子:

✏️ 问题1: p 的 __proto__ 指向谁?

✏️ 问题2: Person 的 __proto__ 指向谁?

✏️ 问题3: Person.prototype 的 __proto__ 指向谁?

✏️ 问题4: Function 的 __proto__ 指向谁?

✏️ 问题5: Function.prototype 的 __proto__ 指向了谁?

✏️ 问题6: Object 的 __proto__ 指向了谁?

✏️ 问题7: Object.prototype 的 __proto__ 指向了谁?