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 相关文章推荐
freemarker判断对象是否为空的方法
Aug 13 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 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中截取字符串支持utf-8
2007/01/18 PHP
一贴学会PHP 新手入门教程
2009/08/03 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
php邮件发送的两种方式
2020/04/28 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
js简单的分页器插件代码实例
2019/09/11 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
iview实现图片上传功能
2020/06/29 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Python实现提取文章摘要的方法
2015/04/21 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
python之PyMongo使用总结
2017/05/26 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
经典广告词大全
2014/03/14 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书