深入浅出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.