阅读 166

简单理解JavaScript原型链

简单三连

  • 什么是原型 ?

我是这样理解的:每一个JavaScript对象在创建的时候就会与之关联另外一个特殊的对象,这个对象就是我们常说的原型对象,每一个对象都会从原型“继承”属性和方法。

  • 什么是原型链 ?

一个由有限个原型对象组成的用来实现继承和共享属性的对象链。

打个通俗的比方,可以把原型链理解成一个家族的血亲关系,每一个后代都会从父代身上继承该家族特有的基因和特征。

  • 什么是"继承" ?

关于原型的继承,我们常说每一个对象都会从原型上"继承"属性,实际上,此"继承"并非意味着简单的复制,而是一个可访问的通道,引用《你不知道的JavaScript》中的一句话:

继承意味着复制操作,然而JavaScript默认并不会复制对象的属性,相反,JavaScript只是在两个对象之间创建一个关联,这样,一个对象就可以通过委托访问另一个对象的属性和函数,所以与其说是继承,委托的说法反而更加准确。

三个概念

prototype

  • 构造函数特有的属性
  • 指向一个原型对象,对象存储了要共享给实例的属性和方法

_proto_

  • 实例对象的一个指针属性
  • 指向上层构造函数对应的prototype,即自己的原型对象

constructor

  • 原型对象的一个属性
  • 指向原型对象的构造函数
  • 通过new创建实例时,对象会继承该属性

对象的原型链

Object

  • 作为对象:Object.__proto__ = Function.prototype
  • 作为函数:Object.prototype是原型链的顶端,Object.prototype.__proto__ = null

Function

  • 作为对象:Function.__proto__ = Function.prototype
  • 作为函数:Function.prototype用于共享,而Function.prototype__proto__继承自Object.prototype

Array

  • 作为对象:Array.__proto__ = Function.prototype
  • 作为函数:Array.prototype用于共享,Array.prototype.__proto__继承自Object.prototype

Person

  • 作为对象:Person.__proto__ = Function.prototype

  • 作为函数:Person.prototype用于共享,Person.prototype.__proto__继承自Object.prototype

    原型链关系:

核心

  1. 原型链顶端是Object.prototype

  2. JavaScript原生对象(Object、Function、Array等)都是Function的实例,它们的__proto__均指向Function.prototype

  3. 除了Object,所有原生对象(构造函数)的prototype,均继承自Object.prototype

  4. JavaScript数据结构

    JavaScript数据结构和原型链之间的关系如下图:

参考: JavaScript|MDN

关注下面的标签,发现更多相似文章
评论