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 相关文章推荐
JavaScript随机排序(随即出牌)
Sep 17 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
Vue全家桶入门基础教程
May 14 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
PHP include_path设置技巧分享
2011/07/03 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
linux中cd命令使用详解
2015/01/08 PHP
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python中__init__.py文件的作用详解
2016/09/18 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
内容编辑个人求职信
2013/12/10 职场文书
商场总经理岗位职责
2014/02/03 职场文书
小学生操行评语
2014/04/22 职场文书
学校创先争优活动总结
2014/08/28 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
win10下go mod配置方式
2021/04/25 Golang
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python