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 相关文章推荐
Jquery截取中文字符串的实现代码
Dec 22 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
使用PHP模拟HTTP认证
2006/10/09 PHP
php mssql 时间格式问题
2009/01/13 PHP
php session 检测和注销
2009/03/16 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
vuex提交state&&实时监听state数据的改变方法
2018/09/16 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
如何在python中执行另一个py文件
2020/04/30 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
super关键字的用法
2012/04/10 面试题
《李广射虎》教学反思
2014/04/27 职场文书
企业投资意向书
2015/05/09 职场文书
经费申请报告范文
2015/05/18 职场文书