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 相关文章推荐
javascript对象之内置对象Math使用方法
Apr 16 Javascript
js常用代码段收集
Oct 28 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
深入理解Node module模块
Mar 26 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
PHP编程风格规范分享
2014/01/15 PHP
php加密解密字符串示例
2016/10/13 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
Python去掉字符串中空格的方法
2014/03/11 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
python urllib和urllib3知识点总结
2021/02/08 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
口腔医学技术应届生求职信
2013/11/09 职场文书
入学生会自荐书范文
2014/02/05 职场文书
解除财产保全担保书
2014/05/20 职场文书
医院合作协议书
2014/08/19 职场文书
中学生自我评价2015
2015/03/03 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
话题作文之学会尊重
2019/12/16 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL