论坛首页 Web前端技术论坛

理解javascript原型链

浏览 5330 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-12-20   最后修改:2011-12-23

 

作用域链(继承体现)

 

Js代码 
  1.      
  2. function MyOne( number ) {  
  3.      this.number = number;  
  4. }  
  5. function MyTwo( name ) {  
  6.      this.name = name;  
  7. }  
  8.   
  9. MyTwo.prototype = new MyOne( 8 );  
  10. var test = new MyTwo( "HuJin" );  
  11.   
  12. alert( test.__proto__.hasOwnProperty( "constructor" ) ); // false  
  13. alert( var val = test.name ); // "HuJin"  
  14. alert( var val = test.number ); // 8  

 

截屏(2011-12-19 20_17_14).jpg

 

 

自己的思考

 

alert( test.name )的查找顺序为:

1. if( test.hasOwnProperty( "name" ) ) // Yes

2. var val = test.name // val = "HuJin"

3. alert(val);

 

输出结果:

截屏(2011-12-19 20_07_36).jpg

 

 

alert( test.number )的查找顺序为:

1. if( test.hasOwnProperty( "number" ) ) // No

2. then 查找 test的原型 new MyOne( 8 ),因为test的构造函数 new MyTwo()的原型对象是一个MyOne的实例

   代码相当于:

   else if( test.__proto__.hasOwnProperty( "number" ) ) // Yes

3. var val = test.__proto__.number // val = 8;如果仍然找不到number属性,则继续向原型链上方走

4. else if( test.__proto__.hasOwnProperty( "number" ) ) // No

5. then if( test.__proto__.__proto__.hasOwnProperty( "number" )) // Yes

    then val = test.__proto__.__proto__.number // 这时test.__proto__.__proto__应该指向MyOne.prototype

   验证一下 : alert(test.__proto__.__proto__ === MyOne.prototype) // 神奇般的对了,参照上面的图

 

输出结果:

   截屏(2011-12-19 20_19_10).jpg

 

6. 如果还是找不到

    if( test.__proto__.__proto__.hasOwnProperty( "number" )) // No 那么继续向上走,也就是从MyOne.prototype向上走,也就到了Object对象了。

 

Extra:

我们在Object.prototype上增加一个奇怪的"monk"属性,然后调用 alert( test.monk )测试一下,看看是否会继续往上找...

Java代码 
  1. Object.prototype.monk = "Pray";  
  2. function MyOne(number) {  
  3.      this.number = number;  
  4. }  
  5. function MyTwo(name) {  
  6.      this.name = name;  
  7. }  
  8.   
  9. MyTwo.prototype = new MyOne(8);  
  10. var test = new MyTwo("HuJin");  
  11.   
  12. alert(val = test.monk);  

输出结果:

   截屏(2011-12-19 20_30_48).jpg

 

 

该告一段落了。如果在Object.prototype中还是查找不到,那么undefined就弹出来了。也就是说访问不存在的属性,会一直遍历整个原型链。

 

下一篇:理解javascript执行环境 http://www.iteye.com/topic/1119141

   发表时间:2011-12-23  
那个手绘的图很不错,支持哈~
0 请登录后投票
   发表时间:2011-12-23  
richmond.petbug 写道
那个手绘的图很不错,支持哈~

谢谢支持哦
0 请登录后投票
   发表时间:2011-12-24  
楼上那哥们也就是把javascript高级编程的内容修改一下粘贴过来的,不过还是可敬的,如果真的理解的话
0 请登录后投票
   发表时间:2011-12-24  
老实说如果不解释,我还真是搞不懂这个所谓的原型链的东东。。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics