深入浅出理解javaScript原型链

最新推荐文章于 2022-11-21 20:37:03 发布

转载最新推荐文章于 2022-11-21 20:37:03 发布 · 357 阅读

web 专栏收录该内容

81 篇文章

订阅专栏

本文深入浅出地介绍了JavaScript原型链的概念及其使用技巧。通过实例详细分析了显式和隐式原型链的区别，以及如何通过new操作符创建对象并设置原型链。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

深入浅出理解javaScript原型链

作者：nicholaszjb 字体：[增加减小] 类型：转载时间：2015-05-09 我要评论

这篇文章主要介绍了对javaScript原型链的理解,以实例形式对javaScript原型链的概念及相关使用技巧做了较为浅显易懂的分析,需要的朋友可以参考下

id="iframeu2261530_0" src="http://pos.baidu.com/wcim?sz=680x200&rdid=2261530&dc=2&di=u2261530&dri=0&dis=0&dai=2&ps=0x0&coa=at%3D3%26rsi0%3D680%26rsi1%3D200%26pat%3D6%26tn%3DbaiduCustNativeAD%26rss1%3D%2523FFFFFF%26conBW%3D1%26adp%3D1%26ptt%3D0%26titFF%3D%2525E5%2525BE%2525AE%2525E8%2525BD%2525AF%2525E9%25259B%252585%2525E9%2525BB%252591%26titFS%3D14%26rss2%3D%2523000000%26titSU%3D0%26ptbg%3D90%26piw%3D0%26pih%3D0%26ptp%3D0&dcb=BAIDU_SSP_define&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1474877598334&ti=%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BA%E7%90%86%E8%A7%A3javaScript%E5%8E%9F%E5%9E%8B%E9%93%BE_javascript%E6%8A%80%E5%B7%A7_%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6&ari=2&dbv=2&drs=1&pcs=1347x638&pss=1347x2785&cfv=0&cpl=6&chi=1&cce=true&cec=GBK&tlm=1474790430&rw=638&ltu=http%3A%2F%2Fwww.jb51.net%2Farticle%2F65757.htm&ltr=http%3A%2F%2Fwww.jb51.net%2Farticle%2F55540.htm&ecd=1&psr=1366x768&par=1366x728&pis=-1x-1&ccd=24&cja=false&cmi=8&col=zh-CN&cdo=-1&tcn=1474877599&qn=84a5a8f34388a294&tt=1474877598036.840.841.844" width="680" height="200" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="display: block; border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">

本文实例讲述了javaScript的原型链。分享给大家供大家参考。具体分析如下：

对于javascript原型链，以前都觉得是个很深的东西，一直没有理解很明白，今天看了一些介绍后，发现这张图，表示再没有什么语言能比这张图说得清楚了。

看了这张图后突然对javascript有了质的理解。

javascript的原型链有显式和隐式两种：

显式原型链：即我们常见的prototype；

隐式原型链：在一般环境下无法访问，即不可见，在FireFox下可以通过__proto__方式访问；隐式原型链用于javascript引擎内部对原型链的搜寻，通过显示原型链来设置；

一、prototype和__proto__的概念

prototype是函数的一个属性（每个函数都有一个prototype属性），这个属性是一个指针，指向一个对象。它是显示修改对象的原型的属性。

__proto__是一个对象拥有的内置属性（请注意：prototype是函数的内置属性，__proto__是对象的内置属性），是JS内部使用寻找原型链的属性。

用chrome和FF都可以访问到对象的__proto__属性，IE不可以。

二、new 的过程

1 2	`var` `Person =` `function` `(){};` `var` `p =` `new` `Person();`

new的过程拆分成以下三步：

(1) var p={}; 也就是说，初始化一个对象p
(2) p.__proto__ = Person.prototype;
(3) Person.call(p); 也就是说构造p，也可以称之为初始化p

关键在于第二步，我们来证明一下：

1

2

3

 
          var 
           Person = 
          function
          (){};
         
 
          var 
           p = 
          new 
           Person();
         
 
          alert(p.__proto__ === Person.prototype);
         

这段代码会返回true。说明我们步骤2是正确的。

三、示例

1

2

3

4

5

6

7

 
          var 
           Person = 
          function
          (){};
         
          Person.prototype.sayName = 
          function
          () {
         
          alert(
          "My Name is Jacky"
          );
         
          };
         
          Person.prototype.age = 27;
         
          var 
           p = 
          new 
           Person();
         
          p.sayName();