欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端值得一探究竟特辑 --- 原型和原型链

程序员文章站 2022-05-06 09:45:26
...

【函数】:普通函数,类(所有的类:内置类,自己创建的类)
【对象】:普通对象,数组,正则,arguments…实例是对象类型的(除了基本类型的字面量创建的值),prototype的值也是对象类型的,函数也是对象类型的。
原型和原型链讲解:

原型:一种管理机制

  1. 所有的函数都有一个prototype属性(这也叫显式原型,它也是一个普通的对象),浏览器默认为它开启一个堆内存。

  2. 浏览器默认为它开启一个的堆内存中,有一个constructor,存储当前函数本身。

  3. 每一个实例都有一个_ _ proto_ _属性(也叫隐式原型,它是一个普通的对象),指向当前实例所属类的prototype(如果不确定它是谁的实例,都是Object的实例)。

  4. 每一个实例都有一个constructor属性,指向所属类的constructor,可以通过实例.constructor.prototype找到原型,只是在开发中很少使用这个属性,不多赘述。

    const str = new String("123");
    str.constructor.prototype === String.prototype // true
    str.__proto__ === String.prototype // true
    
  5. 当试图得到一个实例的属性时,如果这个实例本身不存在这个属性,那么就会去它的_ _ 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