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 相关文章推荐
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 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
第七节 类的静态成员 [7]
2006/10/09 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
便捷提取python导入包的属性方法
2018/10/15 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
Python 获取div标签中的文字实例
2018/12/20 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
python 绘制国旗的示例
2020/09/27 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
师范教师毕业鉴定
2014/01/13 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
小学工作总结2015
2015/05/04 职场文书
小英雄雨来观后感
2015/06/09 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript
Nginx进程调度问题详解
2021/09/25 Servers
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技
Win2008系统搭建DHCP服务器
2022/06/25 Servers