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 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 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
基于文本的搜索
2006/10/09 PHP
PHP 翻页 实例代码
2009/08/07 PHP
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
php查看当前Session的ID实例
2015/03/16 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
PHP实现添加购物车功能
2017/03/06 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
浅谈python字符串方法的简单使用
2016/07/18 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
机关出纳岗位职责
2014/04/03 职场文书
四风对照检查材料范文
2014/09/27 职场文书
2014年手术室工作总结
2014/11/26 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
加薪申请报告范本
2015/05/15 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers