javascript中的对象创建 实例附注释


Posted in Javascript onFebruary 08, 2011

javascript中的对象创建声明:
var obj = {}; 或者 var obj = new Object(); 
为对象加入属性,方法:
//=====第一种写法====================================

obj.name = '小明'; //为对象加属性
obj.updateName = function(name){//为对象定义updateName方法
this.name = name;
}
alert(obj.name);
obj.updateName("小强"); //调用updateName修改obj对象的name属性值
alert(obj['name']);
第一次显示结果为:小明
第二次显示结果为:小强
//=====第二种写法====================================
obj['name'] = '张三'; //为对象加属性
obj['updateName'] = function(name){//为对象定义updateName方法
obj['name'] =name;
}; 
alert(obj.name);
obj.updateName('李四'); //调用updateName修改obj对象的name属性值
alert(obj['name']);
第一次显示结果为:张三
第二次显示结果为:李四
//=====第三种写法====================================
var obj = {
name: '王五', //为对象加属性
updateName: function(name){//为对象定义updateName方法
this.name = name;


}
};
alert(obj .name);
obj.updateName("赵六"); //调用updateName修改obj对象的name属性值
alert(obj .name);
第一次显示结果为:王五
第二次显示结果为:赵六
//=====分析=====================================
第一种写法是最普通的对象写法,因为javascript是动态语言,与Java和.Net不同,
在程序运行并创建对象后,还可以对该对象的内部结构进行修改,
比如添加属性和方法(java和.net中的反射机制做不到这点)。
(a): var obj = {} || new Object();
(b):obj.name = "张三";
(c):obj.updateName = function(name){ this.name = name};

当程序执行(a) 后,便创建了一个空对象(不包含任何方法和属性)obj,
当程序执行(b) 后,改变了obj的内部结构,加了一个属性name,
当程序执行(c) 后,改变了obj的内部结构,加了一个方法updateName ,
而这都是在运行的时候完成的动作

第二种写法像数组,但绝不是数组,区分是不是数组可以如此判断:
if(typeof(obj.length) == "undefined") {
alert("obj不是数组,数组都有length属性!");
}else{
alert("obj是数组!");
}
第二种写法更像一种数据结构:map ,如:obj[key] = value;
key是字符串,value可以是任何类型,变量,对象,函数等。
可以通过这种方式遍历对象内部结构:
for(var key in obj)
{
alert(key);
var value = obj[key];
alert(value);
}
通过alert可以显示出你所定义的内容。
第三种写法一看就是map的内部结构了,一个对象,内部完全用key : value键值对方式表示
JSON对象也是这种结构,只要对map或者JSON对象有所熟悉的就很容易理解了。

Javascript 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
web打印小结
Jan 11 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
原生js无缝轮播插件使用详解
Mar 09 Javascript
kmock javascript 单元测试代码
Feb 06 #Javascript
一次失败的jQuery优化尝试小结
Feb 06 #Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 #Javascript
基于jQuery的自动完成插件
Feb 03 #Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 #Javascript
javascript event 事件解析
Jan 31 #Javascript
javascript getElementsByTagName
Jan 31 #Javascript
You might like
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
十个Python程序员易犯的错误
2015/12/15 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
Python入门之后再看点什么好?
2018/03/05 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
PyTorch中的C++扩展实现
2020/04/02 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
投标邀请书范文
2014/01/31 职场文书
运动会入场词100字
2014/02/06 职场文书
节约用水倡议书
2014/04/16 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
产品质量保证书范本
2015/02/27 职场文书
政审证明范文
2015/06/19 职场文书
导游带团欢迎词
2015/09/30 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python