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 相关文章推荐
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
vscode自定义vue模板的实现
Jan 27 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 autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
深入php list()函数的详解
2013/06/05 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
Python中的字典与成员运算符初步探究
2015/10/13 Python
Django数据库表反向生成实例解析
2018/02/06 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
林肯就职演讲稿
2014/05/19 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
2015政治思想表现评语
2015/03/25 职场文书
采购部年度工作总结
2015/08/13 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书