js原型简析

只要接触js面对对象，一大堆的原型问题就砸了过来。原型对象、原型链、函数原型、等等乱七八糟一大堆。搞得我是头皮发麻，内分泌紊乱，没办法，只得好好梳理一遍了。

对象

原型既然是由对象引出来的，就先从对象开始梳理吧。
js中的数据类型分为两类：原始类型和对象类型，原始类型包括数字、字符串和布尔值以及undefined和null，也就是说除了上面这几个都是对象。
js中的对象又可以分为普通对象、数组对象、函数对象这三类。这三类对象在js中的构造函数分别是全局对象Object、Array、Function。
如在js运行环境中输入以下代码：

typeof Object
typeof Array
typeof Function

得到的结果都是function，由于函数也是对象的一种，所以Object、Array、Function其实也是三个对象。

原型

在js中每个对象都通过 __poroto__（Object.prototype对象除外）属性连接到一个原型对象（X.prototype），并且可以它可以从中继承属性。

所有通过字面量和new Object()创建的普通对象都连接到Object.prototype.
所有通过字面量和new Array()创建的数组对象都连接到Array.prototype.
所有通过字面量和new Function()创建的函数对象都连接到Function.prototype.

除了以上几种构造对象的方式外还有一种通过构造函数构造对象的方式。
js中的每个函数对象都拥有一个原型属性prototype（同时拥有__proto__ 属性），也就是原型对象。
通过构造函数产生的对象其__proto__ 属性指向构造函数的prototype属性，这点与通过new Object()等方法创建对象是一样的。

总结：
1、所有通过字面量创建的对象，其__proto__ 属性指向对应的全局对象的prototype属性。
2、所有通过new方法创造的对象，其__proto__ 属性都指向构造函数的prototype属性。
即：所有对象的__proto__ 属性都指向其实际构造函数

ps: 顺便补充一点，js中所有函数的prototype属性都包含一个constructor子属性，该属性的值即为函数本身。即函数的后代指向它的prototype属性，函数的__proto__ 属性指向它上一代的prototype属性。

原型链

通过上面的梳理我们知道了对象的__proto__ 属性总是指向一个原型对象。而原型对象也是一个对象，它的__proto__ 属性又会指向Object.prototype，而最终Object.prototype的__proto__ 属性指向null。形成原型链。

js的几种原型链：

1、普通对象 x.__proto__——>Object.prototype 
                    Object.prototype.__proto__=null
      即x.__proto__.__proto__=null

2、数组对象 x.__proto__——>Array.prototype 
                    Array.prototype.__proto__——>Object.prototype
                    Object.prototype.__proto__=null
      即x.__proto__.__proto__.__proto__=null

3、函数对象 x.__proto__——>Function.prototype 
                    Function.prototype.__proto__——>Object.prototype
                    Object.prototype.__proto__=null
      即x.__proto__.__proto__.__proto__=null

4、构造函数产生对象 x.__proto__——>function.prototype 
                    function.prototype.__proto__——>Object.prototype
                    Object.prototype.__proto__=null
      即x.__proto__.__proto__.__proto__=null

另外：

Function.__proto__//function() {}
Function.__proto__.__proto__//Object {}
Function.__proto__.__proto__.__proto__//null

Object.__proto__//function() {}
Object.__proto__.__proto__//Object {}
Object.__proto__.__proto__.__proto__//null

Array.__proto__//function() {}
Array.__proto__.__proto__//Object {}
Array.__proto__.__proto__.__proto__//null

//说明Function Object Array的构造函数都是Function

ps：js中的原始类型也有__proto__ 属性，指向其包装对象构造函数。

对象

原型

原型链

猜你喜欢