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 Accessor实现说明
Dec 06 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 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 图片上传代码
2011/09/13 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
JS打印组合功能
2016/08/04 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
python 获取et和excel的版本号
2009/04/09 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
对Python信号处理模块signal详解
2019/01/09 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
六个一活动实施方案
2014/03/21 职场文书
建筑工地宣传标语
2014/06/18 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
2016新年感言
2015/08/03 职场文书
外出学习心得体会范文
2016/01/18 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
Win11 BitLocker 驱动器加密
2022/04/19 数码科技