面试官:说一下原型链

100 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第17天,点击查看活动详情

原型链,一直是前端最基本的一个知识点,不论面不面试,我们都必须牢牢掌握。

原型

需要明白为什么要设计原型对象?

因为js所有对象本质上都是通过new函数创建,而每new一个对象,生成的实例是两个不同的对象,因此公共属性也不是共享的,因此要设计一个对象专门用来存储对象的共享属性,也就是原型对象。

需要明白以下基础知识:

  1. JavaScript所有的对象本质上都是通过new 函数创建的。
  2. 所有的函数本质上都是通过new Function创建的,包括ObjectArray等。
  3. 引用类型都具有对象特性,也就是说所有的函数都是对象。

需要理解以下规则:

  1. 构造函数.prototype 就是原型,它是一个对象,我们也称它为原型对象。
  2. 在js中,所有的对象都有一个隐式原型 __proto__ 属性,该属性指向该对象的原型。
  3. 当你试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么它会去它的隐式原型 __proto__(也就是它的构造函数的显式原型 prototype)中寻找。
  4. 原型对象里有一个constructor属性,这个属性又指回了构造函数。

大概总结如下图所示: image.png

原型链

实例对象在查找属性时,如果查找不到,就会沿着__proto__去与对象关联的原型上查找,如果还查找不到,就去找原型的原型,直至查到最顶层,也就是直至指向null,这也就是原型链的概念。

举个例子,想要查找f实例是否有 toString 方法。

1.首先,先从自身出发,发现自己并没有 toString 方法。

2.既然自身找不到就继续往上查找,查找自身的构造函数Fo的 prototype 属性,还是没找到。

3.因为自身的构造函数的 prototype 也是一个对象,那对象的构造函数是 Object ,因此就去Objectprototype 属性上找,就找到了 Object.prototype 下的 toString 方法。

因此原型链可以用以下图片总结描述:

image.png