一文搞懂js原型和原型链

知识点:

  1. 图谱
    一文搞懂js原型和原型链_第1张图片
  2. prototype
    一文搞懂js原型和原型链_第2张图片
  3. proto一文搞懂js原型和原型链_第3张图片
  4. isPrototypeOf(判断原型是否相同)
    一文搞懂js原型和原型链_第4张图片
  5. getPrototypeOf(获得原型对象)
    一文搞懂js原型和原型链_第5张图片
  6. delete(只能删除实例中的属性)
    一文搞懂js原型和原型链_第6张图片
  7. hasOwnProperty(判断属性是否来自实例)
    一文搞懂js原型和原型链_第7张图片
  8. in(判断在通过对象能够访问给定属性时,返回为true。无论是该属性是在实例中还是在原型中)
    一文搞懂js原型和原型链_第8张图片
    一文搞懂js原型和原型链_第9张图片
  9. 引用类型值的属性(引用类型和基本类型区别)
    一文搞懂js原型和原型链_第10张图片
  10. Object.create()(这个方法会以你传入的对象作为创建出来的对象的原型)
    一文搞懂js原型和原型链_第11张图片
    通过字面量方式创建对象时,它的原型就是Object.prototype,我们无法直接访问内置属性[[Prototype]],但是我们可以通过

Object.getPrototypeOf()或者是对象__proto__获取对象的原型。
一文搞懂js原型和原型链_第12张图片

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

当js引擎查找对象的属性时,先查找对象本身是否存在该属性,如果不存在,会在原型链上查找,但不会查找自身的prototype
一文搞懂js原型和原型链_第13张图片
总结:

  • 每创建一个函数,该函数都会自动带有一个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属性。


原文出处https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651557914&idx=1&sn=7bc2599b245c9d0a05ac6824256a4fca&chksm=802547dbb752cecdc0829837c804c2b43f2b982a9bf6e154aa2d6ef924123b09b4647a19e812&scene=0&xtrack=1&key=98ab45b1a9ff5acccbca9672a70eafa108f8c72bc4ae8c76cdee09a3310dbbef9cde1b41099f65df1951376328e2daed39bd5c2030efc68620fe2947b0d87ad4e2efc962c58496713600dde044520ebe&ascene=1&uin=NTk5MTE1NTA%3D&devicetype=Windows+10+x64&version=6209007b&lang=zh_CN&exportkey=AZEqoG%2FDQNilnYrpt1N83K8%3D&pass_ticket=HouVHq%2FE5eLZSbBPAvfkxrJ42UQMy4GFCAqNJ%2FIB9%2B4%3D

你可能感兴趣的:(前端)