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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
jquery异步循环获取功能实现代码
Sep 19 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
vue实现列表拖拽排序的功能
Nov 02 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
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
JS中数组重排序方法
2016/11/11 Javascript
layui导航栏实现代码
2017/05/19 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
ktv收银员岗位职责
2013/12/16 职场文书
奥巴马演讲稿
2014/01/08 职场文书
个人租房协议书
2014/04/09 职场文书
大学新学期计划书
2014/04/28 职场文书
文艺晚会策划方案
2014/06/11 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
团代会开幕词
2015/01/28 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL
Python中requests库的用法详解
2022/06/05 Python