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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
小试小程序云开发(小结)
Jun 06 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 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
2019十大人气国漫
2020/03/13 国漫
php循环输出数据库内容的代码
2008/05/24 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
python局部赋值的规则
2013/03/07 Python
Python计算程序运行时间的方法
2014/12/13 Python
Python入门之modf()方法的使用
2015/05/15 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Django发送html邮件的方法
2015/05/26 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
门店业绩提升方案
2014/06/08 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
文明单位创建材料
2014/12/24 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB