javascript动态添加、修改、删除对象的属性与方法详解


Posted in Javascript onJanuary 27, 2014

现在介绍如何为一个对象添加、修改或者删除属性和方法。在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译。JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为,可以动态添加、修改、删除属性和方法。例如首先使用类Object来创建一个空对象user:
var user=new Object();

1.添加属性
这时user 对象没有任何属性和方法,显然没有任何用途。但可以为它动态的添加属性和方法,例如:
user.name=”jack”;
user.age=21;
user.sex=”male”;
通过上述语句,user 对象便具有了三个属性:name、age和sex。下面输出这三个语句:
alert(user.name);
alert(user.age);
alert(user.sex);
由代码运行效果可知,三个属性已经完全属于user 对象了。

2.添加方法
添加方法的过程和属性类似:
user.alert=function(){
alert(“my name is:”+this.name);
}
这就为user 对象添加了一个方法“alert”,通过执行它,可以弹出一个对话框显示自己的名字介绍:
user.alert();

3.修改属性
修改一个属性的过程就是用新的属性替换旧的属性,例如:
user.name=”tom”;
user.alert=function(){
alert(“hello,”+this.name);
}
这样就修改了user 对象name属性的值和alert方法,它从显示“my name is”变为了显示“hello”。

4.删除属性
删除一个属性的过程也很简单,就是将其置为undefined:
user.name=undefined;
user.alert=undefined;
这样就删除了name属性和alert方法。在之后的代码中,这些属性变的不可用。
在添加、修改或者删除属性时,和引用属性相同,也可以采用方括号([])语法:
user[“name”]=”tom”;
使用这种方式还有一个额外的特点,就是可以使用非标识符字符串作为属性名称,例如
标识符中不允许以数字开头或者出现空格,但在方括号([])语法中却可以使用:
user[“my name”]=”tom”;
需要注意,在使用这种非标识符作为名称的属性时,仍然要用方括号语法来引用:
alert(user[“my name”]);
而不能写为:
alert(user.my name);
利用对象的这种性质,甚至可以很容易实现一个简单的哈希表,在本书的后面将会看到其应用。此可见,JavaScript中的每个对象都是动态可变的,这给编程带来了很大的灵活性,也和其他语言产生了很大的区别,读者可以体会这种性质。

Javascript 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
javascript中定义私有方法说明(private method)
Jan 27 #Javascript
用javascript替换URL中的参数值示例代码
Jan 27 #Javascript
jquery选择器之基本过滤选择器详解
Jan 27 #Javascript
jquery选择器之层级过滤选择器详解
Jan 27 #Javascript
jquery选择器之内容过滤选择器详解
Jan 27 #Javascript
jquery选择器之属性过滤选择器详解
Jan 27 #Javascript
jQuery自定义事件的简单实现代码
Jan 27 #Javascript
You might like
乐信RP2100的电路分析和打磨
2021/03/02 无线电
一个经典的PHP文件上传类分享
2014/11/18 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
js调用图片隐藏&显示实现代码
2013/09/13 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
React中this丢失的四种解决方法
2019/03/12 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
PyQt5 多窗口连接实例
2019/06/19 Python
Python hashlib模块加密过程解析
2019/11/05 Python
flask框架中的cookie和session使用
2021/01/31 Python
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
打架检讨书500字
2014/01/29 职场文书
学生生病请假条范文
2014/02/16 职场文书
销售队伍口号
2014/06/11 职场文书
2016年小学生寒假总结
2015/10/10 职场文书