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 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
js Dom实现换肤效果
Oct 21 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
javascript 代码是如何被压缩的示例代码
May 06 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
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
Python Tkinter基础控件用法
2014/09/03 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
python删除服务器文件代码示例
2018/02/09 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
python实现快递价格查询系统
2020/03/03 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
党员思想汇报范文
2013/12/30 职场文书
《锄禾》教学反思
2014/04/08 职场文书
校庆标语集锦
2014/06/25 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
JavaScript实现优先级队列
2021/12/06 Javascript
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫