比较详细的javascript对象的property和prototype是什么一种关系


Posted in Javascript onAugust 06, 2007

ECMAScript可以识别两种类型的对象,一种叫做Native Object属于语言范畴;一种叫做Host Object,由运行环境提供例如document对象,
Dom Node等
Native objects是一种松散的结构并且可以动态的增加属性(property),所有的属性都有一个名字和一个值,这个值可以是另一个对象的引用
或者是内建的数据类型(String, Number, Boolean, Null 或者 Undefined)
下面的这个简单的例子描述了一个javascript对象是如何设置一个属性的值和如何读取属性的值的。

赋值操作
一个对象的属性的创建非常简单,直接通过赋值操作就可以完成属性的创建。
代码

   1. var objectRef = new Object(); //create a generic javascript object.  

一个名为testNumber的属性可以这样创建。
代码

   1. objectRef.testNumber = 5;  
   2. /* - or:- */  
   3. objectRef["testNumber"] = 5;  

如果复制的属性名称已经存在那么不会再次创建这个属性,赋值操作仅仅是重新设置属性的值
代码

   1. objectRef.testNumber = 8;  
   2. /* - or:- */  
   3. objectRef["testNumber"] = 8;  

js对象的原型(prototype)自己本身也可以是对象,也可以有属性(property),对于js对象的(prototype)的赋值操作跟普通对象属性的创建
没什么不同。

取值操作
在取值操作中property和prototype就不一样了,先看最简单的property取值操作。
代码

   1. /*为一个对象的属性赋值,如果这个对象没有这个属性,那么在赋值操作后,这个对象就有这个属性了 */  
   2. objectRef.testNumber = 8;  
   3. /* 读出这个属性的值 */  
   4. var val = objectRef.testNumber;  
   5.   
   6. /* 现在val 就得到了刚才赋予objectRef的值8了*/  

prototype揭密

但是所有的对象都可以有prototypes, prototypes自己也是对象,那么他也可以有prototypes,这样循环下去就形成了一个prototype链,
这个链当他遇到链中队形的prototype是null时中止。(Object的默认的prototype是null)
代码

   1. var objectRef = new Object(); //create a generic javascript object.  

创建一个新的js对象,这时这个对象的prototype是Null,所以objectRef的prototype链只包含一个对象Object.prototype
我们在看下面的代码
代码

   1. /* 构建MyObject1这个类型的构造函数 
   2.    MyObject1 - type. 
   3. */  
   4. function MyObject1(formalParameter){  
   5.     /* 为者对象创建一个属性名字叫testNumber 
   6.     */  
   7.     this.testNumber = formalParameter;  
   8. }  
   9.   
  10. /* 构建MyObject2这个类型的构造函数 
  11.    MyObject2 - type:- 
  12. */  
  13. function MyObject2(formalParameter){  
  14.    /* 为者对象创建一个属性名字叫testString*/  
  15.     this.testString = formalParameter;  
  16. }  
  17.   
  18. /* 下一步的操作会用MyObject1对象替换掉MyObject2默认的prototype属性*/  
  19. MyObject2.prototype = new MyObject1( 8 );  
  20.   
  21. /* 最后我们创建MyObject2类型的一个对象*/  
  22.   
  23. var objectRef = new MyObject2( "String_Value" );  

objectRef这个MyObject2类型的对象有一个prototype的链,链中的第一个对象是MyObject1对象,MyObject1对象也有prototype,
这个prototype是Object默认的prototype,Object.prototype的prototype是null,至此这条prototype链结束。
当一个取值操作发生时,objectRef 的整个prototype链就开始工作
代码

   1. var val = objectRef.testString;  

objectRef这个对象的有一个属性叫做testString,那么这句代码会把testString的值赋给val
代码

   1. var val = objectRef.testNumber;  

在objectRef这个对象里并没有testNumber这个属性,但是val却的到了值8,而不是undefine,这是因为解释器在没有在当前对象找到要找
的属性后,就会去检查这个对象的prototype,objectRef的prototype是MyObject1对象,这个对象有testNumber这个属性,所以val得到8这个值。
代码

   1. var val = objectRef.toString;  

现在val是个function的引用,这个function是Object.prototype的property,由于MyObject1和MyObject2都没有定义toString这个property
所以Object.prototype返回。
代码

   1. var val = objectRef.madeUpProperty;  

最后val是undefined,因为MyObject1和MyObject2,还有Object都没有定义madeUpProperty这个property,所以得到的是undefine.

读操作会读取在obj自己和prototype 链上发现的第一个同名属性值
写操作会为obj对象本身创建一个同名属性(如果这个属性名不存在
这就意味着objectRef.testNumber = 3会在objectRef对象上创建一个property,名字是testNumber,当下一次在要读取testNumber时
propertype链就不会工作,仅仅会得到objectRef的property 3,而MyObject1的testNumber属性并不会被修改。下面的代码可以验证
代码

   1. /* 构建MyObject1这个类型的构造函数 
   2.    MyObject1 - type. 
   3. */  
   4. function MyObject1(formalParameter){  
   5.     /* 为者对象创建一个属性名字叫testNumber 
   6.     */  
   7.     this.testNumber = formalParameter;  
   8. }  
   9.   
  10. /* 构建MyObject2这个类型的构造函数 
  11.    MyObject2 - type:- 
  12. */  
  13. function MyObject2(formalParameter){  
  14.    /* 为者对象创建一个属性名字叫testString*/  
  15.     this.testString = formalParameter;  
  16. }  
  17.   
  18. /* 下一步的操作会用MyObject1对象替换掉MyObject2默认的prototype属性*/  
  19. var obj1 = new MyObject1( 8 );  
  20. MyObject2.prototype = obj1;  
  21.   
  22. /* 最后我们创建MyObject2类型的一个对象*/  
  23.   
  24. var objectRef = new MyObject2( "String_Value" );  
  25.   
  26. alert(objectRef.testNumber);  
  27. objectRef.testNumber = 5;  
  28. alert(objectRef.testNumber);  
  29. alert(obj1.testNumber);  

Javascript 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
讲解vue-router之什么是动态路由
May 28 Javascript
详解js的视频和音频采集
Aug 09 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
js实现简单商品筛选功能
Feb 02 Javascript
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 #Javascript
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 #Javascript
随机显示经典句子或诗歌的javascript脚本
Aug 04 #Javascript
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 #Javascript
可实现多表单提交的javascript函数
Aug 01 #Javascript
用倒置滤镜把div倒置,再把table倒置。
Jul 31 #Javascript
取键盘键位ASCII码的网页
Jul 30 #Javascript
You might like
15个小时----从修改程序到自己些程序
2006/10/09 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
python连接MySQL数据库实例分析
2015/05/12 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
用Python解数独的方法示例
2019/10/24 Python
Python定义函数实现累计求和操作
2020/05/03 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
史学专业毕业生求职信
2014/05/09 职场文书
代收款委托书范本
2014/10/01 职场文书
安全教育主题班会总结
2015/08/14 职场文书
关于教师节的广播稿
2015/08/19 职场文书