- 时间：2020-03-19 04:43 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：JavaScript面向对象之Prototypes和继承
[b]一、前言[/b]
本文翻译自微软的牛人Scott Allen Prototypes and Inheritance in JavaScript ,本文对到底什么是Prototype和为什么通过Prototype能实现继承做了详细的分析和阐述，是理解JS OO 的佳作之一。翻译不好的地方望大家修改补充。
[b]二、正文[/b]
JavaScript中的面向对象不同于其他语言，在学习前最好忘掉你所熟知的面向对象的概念。JS中的OO更强大、更值得讨论(arguably)、更灵活。
1.类和对象
JS从传统观点来说是面向对象的语言。属性、行为组合成一个对象。比如说，JS中的array就是由属性和方法（如push、reverse、pop 等)组合成的对象。
[url=http://images.cnblogs.com/cnblogs_com/jemry/201207/20120712110432253.png][img]http://files.jb51.net/file_images/article/201207/201207121653232.png[/img]
[/url]
作为开发者，我们将用Object.getPrototypeOf 函数来替代_proto_属性来查看对象的prototype引用。在写这篇文章的时候，Object.getPrototypeOf这个函数已经在Chrome,firefox,还有IE9中提供了支持。在未来还会有更多的浏览器来支持这一特性，这已经是ECMAScript的标准之一。我们可以用以下代码来证明myArray和我们之前创建的point对象确实引用了两个不同的prototype对象。
[url=http://images.cnblogs.com/cnblogs_com/jemry/201207/201207121104357447.png][img]http://files.jb51.net/file_images/article/201207/201207121653233.png[/img]
[/url]
图 2
注意到myArray的prototype对象里包含了很多方法，比如push、pop还有reverse这些我们在开头代码里使用过的。prototype对象才是push方法的唯一拥有者，但这个方法是如何通过myArray调用到的呢？
[url=http://images.cnblogs.com/cnblogs_com/jemry/201207/201207121104383562.png][img]http://files.jb51.net/file_images/article/201207/201207121653234.png[/img]
[/url]
图 3
我所描述的这种行为本质上就是对象本身继承了 它的prototype中的所有方法和属性。我们在JS中不需要用class来实现这种继承关系。即，一个JS对象从它的prototype中继承特性。
图3还告诉我们每个array对象都能维护自己的状态（state)和成员。如果我们需要myArray的length属性，JS将从myArray中找到length的值而不会去prototype中去寻找。我们能运用这个特性来“override"一个方法，即，将需覆盖的方法（像push）放到myArray自己的对象中。这样做就可以有效的将prototype中的push方法隐藏掉。
3.共享Prototype
Prototype在JS中真正神奇的地方是多个对象能引用同一个prototype对象。比如，我们创建两个数组：
[url=http://images.cnblogs.com/cnblogs_com/jemry/201207/201207121104441016.png][img]http://files.jb51.net/file_images/article/201207/201207121653235.png[/img]
[/url]
Prototype对象在JS中给我们这种继承的特性，它们也允许我们共享方法的实现。Prototype也是链式的。换句话说，prototype是一个对象，那么prototype对象也可以拥有一个指向别的prototype对象的引用。从图2中可以看到prototype的_proto_属性是一个不为null的值也指向另外一个prototype.当JS开始寻找成员变量的时候，比如push方法，它将沿着这些prototype的引用检查每一个对象直到找到这个对象或达到链的尾部为止。这种链的方式更增加了JS中继承和共享的灵活性。
接下来你也许会问：我怎样设置自定义对象的prototype引用？比如，我们之前创建过的对象point，我们怎样加入一个add方法到prototype对象中，让所有的point对象都能继承它？在我们回答这个问题之前，我们先了解一下JS中的函数.
4.关于Funciton
函数在JS中同样也是对象。函数在JS中有很多重要的特性，在此文章中我们不能一一列举。但像把一个函数赋值给一个变量或是将一个函数当做另外一个函数的参数在当今的JS编程中是很基础的方式。
我们需要关注的是：因为函数是对象，所以它拥有方法、属性和一个prototype对象的引用。我们一起讨论一下下面代码的含义：
[url=http://images.cnblogs.com/cnblogs_com/jemry/201207/201207121104467895.png][img]http://files.jb51.net/file_images/article/201207/201207121653236.png[/img]
[/url]
图 5
现在我们要创建一个array对象。其中一种方法就是：
[url=http://images.cnblogs.com/cnblogs_com/jemry/201207/201207121104492581.png][img]http://files.jb51.net/file_images/article/201207/201207121653237.png[/img]
[/url]
图 6
现在的问题是，add方法存在于每一个point对象中。鉴于我们对prototype的了解，把add方法加到Point.prototype中是一个更好的选择（不必把add方法的代码拷贝到每个对象中）。为了实现这个目的，我们需要在Point.prototype对象上做些修改。
[url=http://images.cnblogs.com/cnblogs_com/jemry/201207/201207121104538106.png][img]http://files.jb51.net/file_images/article/201207/201207121653238.png[/img]
[/url]
6.总结
希望能通过这篇文章让你能拨开prototype的迷雾。当然这只是功能强大又灵活的prototype的入门。更多的关于prototype的知识还是希望读者能够自己去探索和发现。
微信版
扫一扫进微信版
返回顶部
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
