图解原型与原型链

原型

  • 每个函数都具有一个存储共用的属性和方法的对象 叫 原型对象
  • 构造函数(类)可以通过prototype这样一个指针来指向该原型对象
  • 每当实例化一个对象,该对象就有一个默认的属性__proto__,通过该属性来指向该构造函数的原型对象,从而共享原型对象上的属性和方法
1
2
3
4
5
6
var arr = [];
var arr2 = [];
console.log(arr.sort == arr2.sort) //true;
console.log(arr.__proto__ == Array.prototype);//说明对象的__proto__和构造函数的prototype都指向同一个东西--原型对象
console.log(arr.__proto__.constructor);
console.log(Array.prototype.constructor); //Array(){[native code]} Array的构造函数

原型图示

原型链

当通过构造函数实例化一个对象后,对象会具有一个__proto__的属性,该属性自动连接到该对象的构造函数的 原型prototype上,这个链式关系就是原型链

  • 所有构造函数的原型也都有一个 __proto__,除了Object之外的所有原型对象的 __proto__ 都指向Object的原型
  • Object.prototype.__proto__ 会指向null
1
2
3
4
5
6
7
8
//原型链
// 通过Array的构造函数 实例化了一个对象 arr
var arr = new Array();

console.log(arr.__proto__ == Array.prototype);//arr 中__proto__ 链到了Array.prototype(Array的原型)
console.log(arr);
console.log(arr.__proto__.__proto__);//Array.prototype 也有个 __proto__ 链到了谁?链到了Object.prototype(链到构造函数Object的原型)
console.log(arr.__proto__.__proto__.__proto__);//Object.prototype 也有个 __proto__ 链到谁? null 空对象

原型链图示