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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
vue路由分文件拆分管理详解
Aug 13 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站内搜索关键词变亮的实现方法
2014/12/30 PHP
php实现的操作excel类详解
2016/01/15 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
python列表去重的二种方法
2014/02/14 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
logging level级别介绍
2020/02/21 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
党员学习十八大感想
2014/01/17 职场文书
文明餐桌活动方案
2014/02/11 职场文书
品牌推广策划方案
2014/05/28 职场文书
工地宣传标语
2014/06/18 职场文书
质量负责人岗位职责
2015/02/15 职场文书
大学生读书笔记范文
2015/07/01 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书