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 获取对象 基本选择与层级
May 31 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
vue 插槽简介及使用示例
Nov 19 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简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
热点新闻滚动特效的js代码
2013/08/17 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
Java语言的优势
2015/01/10 面试题
店长助理岗位职责
2013/12/13 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
大学生应聘求职信
2014/05/26 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
个人融资协议书
2014/10/02 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
离职信范文
2015/06/23 职场文书
javaScript Array api梳理
2021/03/31 Javascript
Pytorch 实现变量类型转换
2021/05/17 Python
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python