一文搞懂js原型和原型链

最新推荐文章于 2022-02-11 16:05:05 发布

AwesomeCPA

最新推荐文章于 2022-02-11 16:05:05 发布

阅读量378

点赞数

分类专栏：前端文章标签： javascript

原文链接：https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651557914&idx=1&sn=7bc2599b245c9d0a05ac6824256a4fca&chksm=802547dbb752cecdc0829837c804c2b43f2b982a9bf6e154aa2d6ef924123b09b4647a19e812&scene=0&xtrack=1&key=98ab45b1a9ff5acccbca9672a70eafa108f8c72bc4ae

版权

前端专栏收录该内容

79 篇文章 4 订阅

订阅专栏

知识点：

图谱
prototype
proto
isPrototypeOf（判断原型是否相同）
getPrototypeOf（获得原型对象）
delete（只能删除实例中的属性）
hasOwnProperty（判断属性是否来自实例）
in（判断在通过对象能够访问给定属性时，返回为true。无论是该属性是在实例中还是在原型中）
引用类型值的属性（引用类型和基本类型区别）
Object.create()（这个方法会以你传入的对象作为创建出来的对象的原型）

通过字面量方式创建对象时，它的原型就是Object.prototype，我们无法直接访问内置属性[[Prototype]]，但是我们可以通过

Object.getPrototypeOf()或者是对象__proto__获取对象的原型。
在这里插入图片描述

原型链
由于__proto__是如何对象都有的属性，而js里万物皆对象，所以会形成一条__proto__连起来的链条，递归访问__proto__必须最终到头，并且值为null。

当js引擎查找对象的属性时，先查找对象本身是否存在该属性，如果不存在，会在原型链上查找，但不会查找自身的prototype
在这里插入图片描述
总结：

每创建一个函数，该函数都会自动带有一个prototype属性，这个属性是一个指针，指向一个对象，该对象称为原型对象。
原型对象上默认有一个属性为constructor，该属性也是一个指针，指向其相关联的构造函数。
通过调用构造函数产生的实例对象，都有一个内部属性，指向了原型对象，其实例对象能够访问原型对象上的所有属性和方法。
每个构造函数都有一个原型对象，原型对象上包含着一个指向构造函数的指针，而实例都包含着一个指向原型对象的内部指针。
实例可以通过内部指针访问到原型对象，原型对象可以通过constructor找到构造函数。
functions中有prototype，objects中有__proto__，prototype是函数才有的属性，__proto__是每个对象都有的属性，但__proto__不是一个规范属性，只是部分浏览器实现了此属性，对应的标准是[[Prototype]]
大多数情况下，__proto__可以理解为“构造器的原型”，即：proto===constructor.prototype。
__proto__的指向取决于对象创建时的实现方式。
构造函数实例，封装的函数，如果通过new操作符来调用，就是构造函数，如果没有通过new操作符来调用的，就是普通函数。
函数Person(对象)有一个属性prototype指针，指向原型对象，Person.prototype原型对象，实质也是对象，它有个属性constructor指针，又指向Person函数对象。
实例对象person1有个属性[[Prototype]]（内部属性，chrome和firefix,Safari中这个属性叫__proto__）指向原型对象。
可以通过实例对象的constructor访问构造函数，可以使用代码person1.constructor访问构造函数，但是constructor的本质是原型对象上的属性。
所有对象都有valueOf和toString方法的原因就是从Object.prototype继承的。
在整个原型链上寻找某个属性，对性能有影响的，越是上层的原型对象，对性能的影响就越大，如果寻找某个不存在的属性，将会遍历整个原型链。
js中一切都是对象，但是也区分普通对象和函数对象，通过new Function()出来的就是函数对象。普通对象的构造函数就是Object，而函数对象的构造函数就是Function。
Function prototype是一个空函数。
每个对象都有__proto__属性，但是只有函数对象才有prototype属性。