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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
JS画线(实例代码)
Nov 20 Javascript
js获取页面description的方法
May 21 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
vue中英文切换实例代码
Jan 21 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
JavaScript代码实现简单计算器
Dec 27 Javascript
Vue 打包后相对路径的引用问题
Jun 05 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来自动调用不同服务器上的flash
2006/10/09 PHP
开发大型 PHP 项目的方法
2007/01/02 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
微信access_token的获取开发示例
2015/04/16 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
js打印纸函数代码(递归)
2010/06/18 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
Python函数学习笔记
2008/10/07 Python
一个超级简单的python web程序
2014/09/11 Python
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python下Fabric的简单部署方法
2015/07/14 Python
python reduce 函数使用详解
2017/12/05 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
python爬虫可以爬什么
2020/06/16 Python
Pandas的Apply函数具体使用
2020/07/21 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
艺术系应届生的自我评价
2013/10/19 职场文书
市场总经理岗位职责
2014/04/11 职场文书
环保倡议书100字
2014/05/15 职场文书
通知格式
2015/04/27 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python