前端值得一探究竟特辑 --- 原型和原型链
【函数】:普通函数,类(所有的类:内置类,自己创建的类)
【对象】:普通对象,数组,正则,arguments…实例是对象类型的(除了基本类型的字面量创建的值),prototype的值也是对象类型的,函数也是对象类型的。
原型和原型链讲解:
原型:一种管理机制
-
所有的函数都有一个
prototype
属性(这也叫显式原型,它也是一个普通的对象),浏览器默认为它开启一个堆内存。 -
浏览器默认为它开启一个的堆内存中,有一个
constructor
,存储当前函数本身。 -
每一个实例都有一个
_ _ proto_ _
属性(也叫隐式原型,它是一个普通的对象),指向当前实例所属类的prototype
(如果不确定它是谁的实例,都是Object的实例)。 -
每一个实例都有一个
constructor
属性,指向所属类的constructor
,可以通过实例.constructor.prototype
找到原型,只是在开发中很少使用这个属性,不多赘述。const str = new String("123"); str.constructor.prototype === String.prototype // true str.__proto__ === String.prototype // true
-
当试图得到一个实例的属性时,如果这个实例本身不存在这个属性,那么就会去它的
_ _ proto_ _
属性(也就是它的构造函数的prototype
属性)中去寻找。
原型链:一种查找机制
基于__proto__
向上查找的机制,有浏览器或者其他运行环境提供,不建议直接使用。原本我们找到原型方法只能通过构造函数才能访问,现在有了__proto__
,我们就可以直接从实例去访问。
当我们操作实例的某个属性或方法时,首先找自己空间中私有的属性或方法。找到了,则查找结束,使用自己私有的即可。没有找到,则通过__proto__
查找所属类的原型prototype。如果还没找到,则继续通过__proto__
向上查找,一直到Object.prototype,如果还没有,那操作的属性或方法就不存在。
arr.length // 在arr的私有属性中找到
arr.pop // 在arr的私有属性中没有找到,继续通过arr.__proto__找到Array的原型prototype,从而查找到公共的pop方法
arr.__proto__.pop // 直接通过arr.__proto__找到Array的原型prototype,从而查找到公共的pop方法
arr.hasOwnProperty // 在arr的私有属性中没有找到,继续通过arr.__proto__找到Array的原型prototype,也没有找到,继续通过Array.__proto__找到Object基类的原型prototype,从而找到hasOwnProperty
下一篇: 使用layui的layer组件做弹出层