js中的原型与原型链是个老生常谈的问题了,也是一个很经典的面试题。
chatgpt的解释:当访问一个对象的属性或方法时,JavaScript 引擎首先在对象本身查找,如果找不到,则会沿着原型链向上查找,直到找到该属性或方法或到达原型链的顶部(即 Object.prototype
)。这种层级关系就是原型链。通过原型链,对象可以访问原型对象中的属性和方法。
那这个链是怎么链起来的呢?核心思想就是对象的__proto__等于构造函数的prototype,是不是有点云里雾里,别急下面我们来看一个例子:
当我们访问obj.gender时发生了什么呢?
1、先去查询obj本身是否有gender这个属性,现在obj本身没有这个属性,所以会继续向上查找。
2、查询obj.__proto__
是否有gender这个属性,刚刚我们说过了,对象的__proto__等于构造函数的prototype, 所以obj.__proto__
就等于Person.prototype
,也就是说我们在Personal.prototype上查找gender这个属性,显而易见是”女”。
那如果此时我们访问的是obj.address会发生什么呢?(前两步是一样的)
1、先去查询obj本身是否有address这个属性,现在obj本身没有这个属性,所以会继续向上查找。
2、查询obj.__proto__
也就是Personal.prototype
是否有address这个属性,现在也是没有的,所以会继续向上查找。
3、查询Personal.prototype.__proto__
是否有address这个属性,Personal.prototype.__proto__
是什么?Personal.prototype本身是一个对象,对象的__proto__等于构造函数的prototype,所以Personal.prototype.__proto__
等于 Object.Prototype。Object.Prototype上显而易见的也没有address这个属性,但是此时已经到了原型链的顶部,流程over.
综上:我们总结出了一条完整链路obj
->Person.Prototype
->Object.prototype
(Person.Prototype.__proto__
)中间如果已经查询到该属性则流程不会继续。
相信你对原型和原型链已经有所了解了,那么运用我们刚才的核心思想?考虑下面以下几个问题:
1、Person.__proto__是什么(别怀疑,js万物皆对象,所以Person本身也是有__proto__属性的)
2、Object和Function这二者有什么关系?
好,假设你已经思考过了。
1、第一个问题Person.__proto__等于Function.prototype。
2、这个略微草率的草图,主要表达了几个概念
Object.__proto__
===Function.prototype
Function.__proto__
===Function.prototype
Function.prototype.__proto__
===Object.prototype