javascript的原型与原型链

女爷i 2022-05-22 07:50 292阅读 0赞

# [深入理解javascript原型链][javascript] #

在javascript中原型和原型链是一个很神奇的东西，对于大多数人也是最难理解的一部分，掌握原型和原型链的本质是javascript进阶的重要一环。今天我分享一下我对javascript原型和原型链的理解。

一、对象等级划分

我们认为在javascript任何值或变量都是对象，但是我还需要将javascript中的对象分为一下几个等级。

首先Object是顶级公民，这个应该毋庸置疑，因为所有的对象都是间接或直接的通过它衍生的。Function是一等公民，下面会做解释。几个像String，Array，Date，Number，Boolean，Math等内建对象是二等公民。剩下的则都是低级公民。

二、原型prototype

首先prototype是一个属性，同时它本身也是一个对象。那么哪些是具有prototype这个属性呢？其实javascript中所有的函数都有prototype这个属性，反过来所有具有prototype的对象本身也是一个函数，没错就是一个函数。

第一条我不再印证，主要看看第二条。大家都知道Object，Array，Date都有prototype，他们是函数吗？是的他们也是函数的一种，为什么这么说呢？我们在定义一个对象或者数组时，是不是可以这么做var o = new Object(),a = new Array()。学过java的人都知道new是用实例化一个对象的方法，但是我们都知道javascript中不存在真正的类的概念，所以只能用函数来模拟，那么既然可以有上面的做法也就印证了Object和Array也是特殊的函数。

其实上面说到的几等公民基本都是函数的一种，除了Math这个工具对象外，应该没有见过这种new Math()这种写法吧！当然这种写法也是会报错的，所以在访问Math.prototype返回的也是undefined。

三、\_\_proto\_\_和原型链

\_\_proto\_\_是一个指针，它指的是构造它的对象的对象的prototype，听起来有的拗口。举个例子吧！

![672484-20151002191433480-153264638.png][]

如上面代码，o是Object的一个实例，所以o的\_\_proto\_\_指针指向构造o的Object的prototype。这样的意义在于o可以使用Object.prototype里面的方法，例如toString(),o在访问toString方法时，首先会在自身寻找，如果没有找到则会在\_\_proto\_\_也就是Object.prototype上面查找。

可以说几乎所有的javascript对象都有\_\_proto\_\_这样一个指针包括Object,我们来看一看

![672484-20151002192237418-119373688.png][]

其实a = 1就相当于a = new Number(1)。可以看到所有的内建对象以及Object的\_\_proto\_\_指向的都是一个匿名函数，也就可以认为它们其实也是function的一个实例，所以之前会说function是一等公民。

那么原型链到底是什么呢？我们展开a.\_\_proto\_\_也就是Number.prototype对象，它是没有toString()的方法的，但是对于a来说它其实是可以调用toString的方法的，这就是原型链的作用。看下面代码

![672484-20151002192915965-764596899.png][]

看上面代码和结果，我们沿着a的\_\_proto\_\_一直访问会到达Object的prototype，也就是说a调用toString方法最终其实是访问Object.prototype的toString方法。那么a的原型链就是由Number.prototype和Object.prototype组成，当a访问一个方法或属性时，它会先在自身查找，然后再沿原型链找，找到则调用，没找到报错。为了印证这一点，我们在Number.prototype上面加一个toString的方法。

![672484-20151002193636027-2053875673.png][]

可以看到a调用的是Number.prototype的toString方法，在找到之后就停止。在javascript中，几乎所有的对象的原型链的终点都是Object.prototype

总结

\_\_proto\_\_是实现原型链的关键，而prototype则是原型链的组成。最后附上一张稍微复杂的原型链和构造函数的关系图，有兴趣可以研究一下。

![672484-20151002201901996-1935842029.png][]

# 原型对象 #

1.  **function** Dog()\{\};  
2.    
3.  Dog.prototype.name = "小黄";  
4.  Dog.prototype.age =  13;  
5.  Dog.prototype.getAge = **function**()\{  
6.      **return** **this**.age;  
7.  \}  
8.    
9.  **var** dog1 = **new** Dog();  
10. **var** dog2 = **new** Dog();  
11.   
12. dog2.name = "小黑";  
13. console.log(dog1.name); // 小黄 来自原型  
14. console.log(dog2.name); // 小黑 来自实例

![Center][]

# 原型链 #

原型链是实现继承的主要方法。

> 先说一下继承，许多OO语言都支持两张继承方式：接口继承、实现继承。
> 
> > |- 接口继承：只继承方法签名
> 
> > |- 实现继承：继承实际的方法
> 
> 由于函数没有签名，在ECMAScript中无法实现接口继承，只支持实现继承，而实现继承主要是依靠原型链来实现。

原型链基本思路：

> 利用原型让一个引用类型继承另一个引用类型的属性和方法。
> 
> 每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数想指针(constructor)，而实例对象都包含一个指向原型对象的内部指针(\_\_proto\_\_)。如果让原型对象等于另一个类型的实例，此时的原型对象将包含一个指向另一个原型的指针(\_\_proto\_\_)，另一个原型也包含着一个指向另一个构造函数的指针(constructor)。假如另一个原型又是另一个类型的实例……这就构成了实例与原型的链条。
> 
>   
>

原型链基本思路（图解）：

> ![Center 1][]  
>

举例说明：

> \[javascript\]  [view plain][]   [copy][view plain]
> 
> 1.  **function** animal()\{  
> 2.      **this**.type = "animal";  
> 3.  \}  
> 4.  animal.prototype.getType = **function**()\{  
> 5.      **return** **this**.type;  
> 6.  \}  
> 7.    
> 8.  **function** dog()\{  
> 9.      **this**.name = "dog";  
> 10. \}  
> 11. dog.prototype = **new** animal();  
> 12.   
> 13. dog.prototype.getName = **function**()\{  
> 14.     **return** **this**.name;  
> 15. \}  
> 16.   
> 17. **var** xiaohuang = **new** dog();

> \[javascript\]  [view plain][]   [copy][view plain]
> 
> 1.  //原型链关系  
> 2.  xiaohuang.\_\_proto\_\_ === dog.prototype  
> 3.  dog.prototype.\_\_proto\_\_ === animal.prototype  
> 4.  animal.prototype.\_\_proto\_\_ === Object.prototype  
> 5.  Object.prototype.\_\_proto\_\_ === **null**  
> 
>   
>

图解:

> ![Center 2][]  
> 
> 
> 详细图
> 
> ![Center 3][]  
> 
> 
> 从xiaohuang这个实例，看出整个链条
> 
>   
>

总结：

> Xiaohuang这个Dog的实例对象继承了Animal，Animal继承了Object。
> 
> ![Center 4][]

参考文献：

http://www.cnblogs.com/alichengyin/p/4852616.html

https://blog.csdn.net/sinat\_21274091/article/details/52741788

[javascript]: http://www.cnblogs.com/alichengyin/p/4852616.html
[672484-20151002191433480-153264638.png]: /images/20220522/5eade774fa074011b8fa780aa87ba6dc.png
[672484-20151002192237418-119373688.png]: /images/20220522/4feb5fbafb23498da12de40ec983ccf9.png
[672484-20151002192915965-764596899.png]: /images/20220522/9b667aa70711443bbee9dbd4421a18e2.png
[672484-20151002193636027-2053875673.png]: /images/20220522/99c8b1c1c5754386a24237fd0ef4f56f.png
[672484-20151002201901996-1935842029.png]: /images/20220522/d29dd0085aa44e92b82bd1a2dca47424.png
[Center]: /images/20220522/d9967a12027446e881d08cd0515a91f1.png
[Center 1]: /images/20220522/9c7f9d578ee84a19a0161f377206a0a2.png
[view plain]: https://blog.csdn.net/sinat_21274091/article/details/52741788#
[Center 2]: /images/20220522/ecf3e6bee2854bf6aeb8c289e5267bd3.png
[Center 3]: /images/20220522/359ed27fec814206a17a24770a57afe6.png
[Center 4]: /images/20220522/e9d74bc0a947409082e2c948d7e21e07.png