JavaScript 三种创建对象的方法


Posted in Javascript onOctober 16, 2009

JavaScript中对象的创建有以下几种方式:
(1)使用内置对象
(2)使用JSON符号
(3)自定义对象构造

一、使用内置对象

JavaScript可用的内置对象可分为两种:
1,JavaScript语言原生对象(语言级对象),如String、Object、Function等;
2,JavaScript运行期的宿主对象(环境宿主级对象),如window、document、body等。

我们所说的使用内置对象,是指通过JavaScript语言原生对象的构造方法,实例化出一个新的对象。如:

var str = new String("实例初始化String"); 
var str1 = "直接赋值的String"; 
var func = new Function("x","alert(x)");//示例初始化func 
var o = new Object();//示例初始化一个Object

二、使用JSON符号

(i)何谓JSON ?
JSON (JavaScript Object Notation)即JavaScript对象命名,是一种轻量级的数据交换格式,易于阅读和编写,同时也易于及其解析和生成。它基于《JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999》的一个子集。JSON是完全独立于语言的文本格式,因此成为数据交换的理想格式。

JSON作为JavaScript的一个自己,同时ActionScript、C、C#、ColdFusion、E、Java、JavaScript、ML、ObjectiveCAML、Perl、PHP、Python、Rebol、Ruby、Lua等一系列的语言都提供支持,使得JSON成为Ajax开发的首选方案。

JSON有两种构建方式,一种是采用简单的“键/值对”的集合,在不同的语言中被理解为对象、记录、结构、字典、哈希表、有键列表,或者关联数组等,另一种采用有序的值列表,大部分语言把它理解为数组。

常用的创建方式是第一种,即采用“键/值对”集合的形式。在这种形式下,一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号),“ ‘键/值' 对”之间使用“,”(逗号)分隔。

JSON具有以下特点:(1)简单格式化的数据交换;(2)易于人们的读写习惯;(3)易于机器的分析和运行。
在JavaScript中,JSON被理解为对象。通过字符串形式的JSON,数据可以很方便地解析成JavaScript独享,并进行数据的读取传递。通过JSON,在一定程度上客服了JavaScript对象无法作为参数系列化传递的问题。

1,简单的JSON

{name:"刘德华",age:"25",sex:"男"}

2,JSON值的类型

JSON的值可以是简单的数据类型,例如数字、浮点、字符等,也可以是数组及对象。例如以数组作为member键值的JSON:

{member:[{name:"刘德华"},{name:"郭富城"},{name:"张学友"},{name:"黎明"}]}

{
book:[{name:"三国演义"},{name:"西游记"},{name:"水浒传"},{name:"红楼梦"}],
author:[{name:"罗贯中"},{name:"吴承恩"},{name:"施耐安",{name:"曹雪芹"}}]
}

3,在JavaScript中使用JSON

JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或者工具包,JavaScript默认将JSON当做一个对象处理。

将对象传递给一个变量,例如:

var somebooks = { 
book:[{name:"三国演义"},{name:"西游记"},{name:"水浒传"},{name:"红楼梦"}], 
author:[{name:"罗贯中"},{name:"吴承恩"},{name:"施耐安",{name:"曹雪芹"}}] 
}

JSON的每个“键”相当于对象的属性,例如访问book中的第一个条目,在JavaScript中,就可以简单地使用“somebooks.book[0].name”来获取“三国演义”这个值。

我们不但可以将一个JSON字符串转化为对象,反过来将一个对象“编译”为一个JSON字符串,以方便JavaScript中的对象的传输。例如:

var Animals = new Object(); 
Animals.name = "dog"; 
Animals.sex = "Male"; 
Animals.age = "2";

Animals对象无法被序列化传输,将Animals对象转化为JSON字符串,也就是“{name:"dog",sex:"Male",age:"2"}”。这样,把该JSON字符串作为HTTP请求的一个参数传递,从而达到序列化传输Animals对象的目的。

(ii)JSON通过字符串形式来表达JavaScript的对象。如:

var myObject = {nickname:"my girlfried",name:"big pig"};

JSON实际上充当了一种在JavaScript对象和字符串之间实现相互转换的协议。由于JSON的“外表”可以看成但村的字符串,因此JSON在JavaScript的对象传输方面可以起到一定的作用。例如把对象strObject转换成字符串后进行传输,在达到目的地后通过eval方法将其还原成对象:
function test (o) 
{ 
alert (o.name) 
} 
var strObject = '{nickname:"my girlfriend",name:"big pig"}'; 
test (eval("(" + strObject + ")"));

三、自定义对象构造

创建高级对象构造有两种方式:使用“this”关键字构造、使用原型prototype构造。如:

//使用this关键字定义构造的上下文属性 
function Girl() 
{ 
this.name = "big pig"; 
this.age = 20; 
this.standing; 
this.bust; 
this.waist; 
this.hip; 
} //使用prototype 
function Girl(){} 
Girl.prototype.name = "big pig"; 
Girl.prototype.age = 20; 
Girl.prototype.standing; 
Girl.prototype.bust; 
Girl.prototype.waist; 
Girl.prototype.hip; 
alert(new Girl().name);

上例中的两种定义在本质上没有区别,都是定义“Girl”对象的属性信息。“this”与“prototype”的区别主要在于属性访问的顺序。如:
function Test() 
{ 
this.text = function() 
{ 
alert("defined by this"); 
} 
} 
Test.prototype.test = function() 
{ 
alert("defined by prototype"); 
} 
var _o = new Test(); 
_o.test();//输出“defined by this”

当访问对象的属性或者方法是,将按照搜索原型链prototype chain的规则进行。首先查找自身的静态属性、方法,继而查找构造上下文的可访问属性、方法,最后查找构造的原型链。

“this”与“prototype”定义的另一个不同点是属性的占用空间不同。使用“this”关键字,示例初始化时为每个实例开辟构造方法所包含的所有属性、方法所需的空间,而使用“prototype”定义,由于“prototype”实际上是指向父级的一种引用,仅仅是个数据的副本,因此在初始化及存储上都比“this”节约资源。

Javascript 相关文章推荐
JavaScript 编程引入命名空间的方法与代码
Aug 13 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
JQuery困惑—包装集 DOM节点
Oct 16 #Javascript
JavaScript 对象成员的可见性说明
Oct 16 #Javascript
Javascript 圆角div的实现代码
Oct 15 #Javascript
IE Firefox 使用自定义标签的区别
Oct 15 #Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 #Javascript
javascript 操作cookies及正确使用cookies的属性
Oct 15 #Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 #Javascript
You might like
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
JavaScript之自定义类型
2012/05/04 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
python实现查询苹果手机维修进度
2015/03/16 Python
Python fileinput模块使用实例
2015/06/03 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
python判断自身是否正在运行的方法
2019/08/08 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
汽车专业人才自我鉴定范文
2013/12/29 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
中秋晚会活动方案
2014/08/31 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
绵山导游词
2015/02/05 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
新学期开学寄语2016
2015/12/04 职场文书