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全屏显示显示代码的三种方法
Nov 11 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
Javascript Promise用法详解
May 10 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 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中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
php简单防盗链实现方法
2015/07/29 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
Python使用numpy模块创建数组操作示例
2018/06/20 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
优秀毕业生自荐信范文
2014/01/01 职场文书
销售人员获奖感言
2014/02/05 职场文书
厂区绿化方案
2014/05/08 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android