原型链

101 阅读2分钟

概念

原型链是JavaScript中实现继承的核心机制,其本质是一个由对象通过__proto__属性连接起来的链表。

查找机制

  1. 在对象自身属性中查找
  2. 如果未找到,通过__proto__在原型对象上查找
  3. 如果还没找到,就沿着原型链向上递归查找,直到找到或到达 null

可以先看看原型链的样子,这条原型链里包含了原型对象模块中例子的原型对象 image.png

原型对象(Prototype)

概念

每个对象都有一个隐藏属性__proto__(更推荐使用安全的Object.getPrototypeOf方法来查看原型对象),指向其构造函数的prototype对象。

包含

共享的方法:所有创建出来的实例都可以调用原型对象里包含的方法 构造函数:当使用 new 调用时,会创建新实例的函数。其 prototype 属性将作为新创建实例的原型。

作用

在JavaScript中,我们经常需要创建多个具有相同行为的对象。如果每个对象都单独存储一份方法,就会浪费内存

因此,我们将这些方法存储在原型对象上,所有通过同一个构造函数创建的对象都可以共享这些方法

例子

例如在代码中初始化一个对象,

const obj = {}

它的底层相当于调用了const obj = new Object(),即调用了类Object来创建对象,那就会有Object对象都应该有的方法,

总结一下就是,原型对象相当于一个方法储存库,所有通过同一个构造函数创建的实例对象,都能调用原型对象里提供的方法。

class Dog{
   constructor(name,gender){
       this.name = name
       this.gender = gender
   }
   
   bark(){
     console.log("汪汪")
   }
}

const a = new Dog('旺财', '男')
const b = new Dog('可可', '女')

【例子用了语法糖class】

这里就是小狗a和小狗b都是同一个原型,所以都可以调用原型对象里存储的bark()方法, 而某实例原型对象里的构造函数,可以让我们知道这个实例的创造模版(类)的样子

具现化原型链的例子

image.png

image.png 这个例子里的原型链是这样的 obj -> Object.prototype -> null

image.png

image.png 这个例子里的原型链是 arr -> Array.prototype -> Object.prototype -> null

image.png

image.png 这个例子里的普通函数的原型链是 func -> Function.prototype -> Object.prototype -> null

可以看出除了通过Object.create(null)直接创建的对象外,其他所有对象(包括函数、数组等)的原型链上都会出现Object.prototype,而原型链终点也都是 null

ps:通过Object.create(null)直接创建的对象

image.png

继承场景

使用现代语法(ES6 Class),语法糖 classextends ,底层基于原型链:

image.png

image.png