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 相关文章推荐
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
浅析Jquery操作select
Dec 13 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
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的博客ping服务代码
2012/02/04 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PHP 图片处理
2020/09/16 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
vue内置指令详解
2018/04/03 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
ubuntu上安装python的实例方法
2019/09/30 Python
python3 简单实现组合设计模式
2020/07/02 Python
python里glob模块知识点总结
2021/01/05 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
技校教师求职简历的自我评价
2013/10/20 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
党的生日演讲稿
2014/09/10 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
2014年志愿者工作总结
2014/11/20 职场文书