原型链的理解

原型对象和函数三角形

function Person(){};
var p = new Person();
//如图,构造函数的.prototype属性的值就是原型对象
//实例对象是构造函数new出来的,该过程称为实例化
//原型对象的.constructor属性的值就是构造函数
//实力对象可以通过.__proto__属性访问到原型对象

什么是原型?

  • 构造函数的prototype属性的值就是原型
  • 将公共的方法或属性放到原型对象中,能够解决方法重复浪费内存的问题
  • 给原型对象添加属性,实例对象可以直接使用
  • 原型的作用主要是继承
  • 原型的类型是Object

.proto属性 与 .prototype属性

  • 主要区别:.proto是站在实例对象的角度访问原型对象;而.prototype是站在构造函数的角度访问原型对象;
  • .proto是非标准属性,由浏览器提供,不能用于生产环境中,主要用于辅助我们理解对象之间的关系

.constructor属性

  • 每个原型对象都有一个对应的constructor属性
  • constructor描述的是创建原型对象的构造函数
  • 所以 p.constructor === Person 的结果为true

什么是原型链?

对象有原型对象,原型对象也是对象,所以原型对象也有原型对象,这样一环扣一环就形成了一条链式结构,叫做:原型链

完整的原型链结构图

function  Fn () {};
var f = new Fn();
//1.将函数看做构造函数
//构造函数:Fn
//实例对象:f
//原型对象:Fn.Prototype

function Fn () {};
//2.将函数看做实例对象(函数可以这样创建:var Fn = new Function () {})
构造函数:Function
实例对象:Fn
原型对象:Function.prototype

var obj = new Object();
//3.将Object看做构造函数
构造函数:Object
实例对象:obj
原型对象:Object.prototype

//4.将Object看做实例对象
构造函数:Function
实例对象:Object
原型对象:Function.Object

//5.将Function看做实例对象
通过.__proto__访问到原型对象
//注意:Function作为对象时,是Function作为构造函数时的实例对象,继承自Function.prototype;
//即:Function.prototype === Function.__proto__
image.png

推荐阅读更多精彩内容