JavaScript中对象property的读取和写入方法介绍


Posted in Javascript onDecember 30, 2014

JavaScript中,可以通过点号操作符”.”或者中括号操作符”[]“来对对象的property进行读取和写入:

var o = {x:1, y:2};

console.log(o.x);//1

console.log(o["y"]);//2

o.y = 7;

console.log(o["y"]);//7

值得注意的是,如果使用中括号操作符,则操作符内的值类型必须是string,或者能够转换成string的表达式:

console.log(o[y]);//ReferenceError: y is not defined

var v = "y";

console.log(o[v]);//7

与Java语言不同的是,JavaScript中对象的property可以动态添加或删除。当对某个property进行赋值操作时,如果该property不存在,JavaScript会在对象中动态添加此property:

o.z = 99;

console.log(o);//Object {x=1, y=7, z=99}

 

原型继承链中property的读取

 

JavaScript中所有的对象均有一个prototype原型对象,并从该原型对象中继承property;因此,JS中一个对象的property分成两大类:

1.对象自身所拥有的property(“Own Property”)。
2.从原型对象处继承而来的property。

当读取对象的property时,所遵循的规则如下:

1.从对象自身的property集合(“Own Property”)中搜索需要读取的property;如果可以搜索到,则直接读取该property并返回其值。
2.如果无法从对象自身的property集合(“Own Property”)中搜索到该property,那么则从对象的prototype原型链中继续进行搜索,直至搜索到该property并返回其值。
3.如果无法从对象自身的property集合(“Own Property”)中搜索到该property,也无法从对象的所有prototype对象中搜索到该property,则返回undefined。

原型继承链中property的写入

在对JavaScript对象的property进行写入时,所遵循的规则如下:

1.如果对象自身有该property,且该property可写,则将新值写入该property。如果该property只读,则报错。
2.如果对象自身没有该property,且其所有的prototype对象中也不存在该property,则将此property添加到该对象中。
3.如果对象自身没有该property,但其prototype对象中存在该property且可写,那么JS会在对象中新建这个property;也就是说,该对象覆写了其prototype对象中的这个property。prototype对象中此property值不变。
4.如果对象自身没有该property,但其prototype对象中存在该property且只读,则报错。
5.如果对象自身没有该property,但其prototype对象中存在该property的setter方法,那么JS会调用该prototype对象中的setter方法。值得注意的是,在运行setter方法时,如果涉及到变量赋值,那么赋值操作将作用在对象自身上,而prototype对象不会有任何改动。对于这一行为,可以理解为:对象从prototype处继承了setter函数并加以执行。

从上述规则中可以发现,如果对property的赋值操作成功,那么最后被修改的永远是对象自身,其prototype原型对象不会有任何改动。

Javascript 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
vue如何使用rem适配
Feb 06 Vue.js
jQuery中:last选择器用法实例
Dec 30 #Javascript
JavaScript中对象property的删除方法介绍
Dec 30 #Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 #Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 #Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 #Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 #Javascript
JavaScript中的对象序列化介绍
Dec 30 #Javascript
You might like
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
详解Python中的正则表达式的用法
2015/04/09 Python
python正则实现计算器功能
2017/12/14 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Python各种扩展名区别点整理
2020/02/27 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
Python远程方法调用实现过程解析
2020/07/28 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
ASP.NET Core中的配置详解
2021/02/05 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
初中女生自我鉴定
2013/12/19 职场文书
招聘专员岗位职责
2014/03/07 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
开学典礼观后感
2015/06/15 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python