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 格式字符串的应用
Mar 29 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
js实现内置计时器
Dec 16 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
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
从Python程序中访问Java类的简单示例
2015/04/20 Python
python实现文件快照加密保护的方法
2015/06/30 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
解决python报错MemoryError的问题
2018/06/26 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
质检部岗位职责
2013/11/11 职场文书
企业安全生产责任书
2014/04/14 职场文书
协议书范文
2015/01/27 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
React四级菜单的实现
2022/04/08 Javascript