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 相关文章推荐
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
javascript canvas实现雨滴效果
Jun 09 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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作的文本留言本的例子(一)
2006/10/09 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
使用php计算排列组合的方法
2013/11/13 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
JavaScript中的事件处理
2008/01/16 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
简析Python的闭包和装饰器
2016/02/26 Python
Python日期的加减等操作的示例
2017/08/15 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
地理科学专业毕业生求职信
2013/10/15 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
高三家长寄语
2014/04/03 职场文书
社区义诊活动总结
2014/04/30 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python