图文并茂深入浅出完全理解JavaScript原型

图文并茂的帮助你更好的理解JavaScript原型.
熟记并理解以下规则,保你深入理解对象原型,保你面试无忧.
1 . 任何对象都拥有 __proto__(隐式原型) 属性, 一般指向他们的构造函数的原型 (prototype) .

var a = new Array () 
// a 是一个数组对象 默认拥有__proto__ 属性 
console.log(a.__proto__ === Array.prototype);  // true
白话就是 由谁创建 其__proto__ 就指向谁的 prototype

2 . 原型链的顶端是Object.prototype，其 __proto__为 null

console.log(Object.prototype.__proto__ === null); // true
// 这是一个特例,为了避免JavaScript死循环.

3 . 所有函数都拥有prototype （显式原型）属性

任何函数的 prototype.__proto__ 都指向 Object.prototype 特例见第 2

4 . 所有函数都是Function 的实例

function fn () { 
  // some code
}
// fn 是 Function 构造函数创建出来的 
// 因此 fn 的 __proto__ 属性指向 Function 的 原型对象
console.log(fn.__proto__ === Function.prototype);  // true

类似的十分容易就能理解

var obj = {}  // 可以看做是 var obj = new Object () 
var arr = []   //  var obj = new Array ()
// 因此他们的构造函数分别是 Object 和 Array  
console.log(obj.__proto__ === Object.prototype); // true
console.log(arr.__proto__ === Array.prototype);    // true

5 . 更奇葩的来了，Object Function Array 本身也都是一个函数，由于是最常用的，所以JavaScript帮我们实现了

// 当我们通过构造函数的方式来创建一个对象 ，其本质也是new一个普通的函数
// 因此可以得出
console.log(Function.__proto__ === Function.prototype); // true
console.log(Object.__proto__ === Function.prototype );  // true
console.log(Array.__proto__ === Function.prototype);    // true
// 可印证 第4点

6 . 原型对象中又拥有constructor属性,该属性指向函数本身,这个好理解

console.log(Function.prototype.constructor === Function); // true
console.log(Object.prototype.constructor === Object);     // true
console.log(Array.prototype.constructor === Array);       // true

7 . 先普及一波 原型链 概念

如果想要找到一个对象的属性,首先会先在自身查找,如果没有,就会通过__proto__属性一层层的向上查找,直到原型链的顶端 Object.prototype(__proto__: null）见第2
这种通过某种纽带(__proto__)将对象之间形成一种继承关系这种关系呈现出一种链条的形状将这种链条称之为原型链

8 . 根据第 6 条可以推论得:

console.log(fn.constructor===Function); // true 
// 解析: 
// fn自身并没有constructor属性,所以他会顺着原型链向上找
// fn.__proto__ 指向的是 Function.prototype 见第4
// Function.prototype.constructor  === Function
console.log(Function.constructor === Function); // true
console.log(Object.constructor === Function);   //true

9 . Function.prototype.__proto__ === Object.prototype

Function是一个特殊的例子他创造了所有的函数,但他自身就是也是一个函数总不能自己创造自己吧所以他的上级是 Object.prototype

下面配合几张原型图,帮助大家更好的理解.

构造函数创建对象字面量原型图:

  function Animal (color) {
    this.color = color
}
var dog =  new Animal ('黑色')

当我们创建一个函数时原型如下:

构造函数创建对象字面量原型图

完整对象字面量原型图:

var obj = { name: '陈二狗' }

完整对象字面量原型图

数组原型链

var arr = ['第一个数','第二个数','第三个数']

数组原型链

基本包装类型原型链

var str  = new String('str')  // var str = 'str'

基本包装类型

其实所有的原型链规则都是根据上面的规则来的,只要能记住并理解,那么你也就理解原型了

如果有纰漏忘指出,如果有转载,麻烦注明作者yucccc.