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 相关文章推荐
jquery 常用操作方法
Jan 28 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
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读取IMAP邮件
2006/10/09 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
javascript正则表达式总结
2016/02/29 Javascript
详解jQuery选择器
2016/12/21 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python删除不需要的python文件方法
2018/04/24 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
经典演讲稿范文
2013/12/30 职场文书
教师申诉制度
2014/01/29 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
严以律己学习心得体会
2016/01/13 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
Python time库的时间时钟处理
2021/05/02 Python
Python标准库pathlib操作目录和文件
2021/11/20 Python