JavaScript入门之对象与JSON

JavaScript对象与传统的面向对象中的对象几乎没有相似之处，传统的面向对象语言中，创建一个对象必须先有对象的模板：类，类中定义了对象的属性和操作这些属性的方法。通过实例化来构筑一个对象，然后使用对象间的协作来完成一项功能，通过功能的集合来完成整个工程。而Javascript中是没有类的概念的，借助JavaScript的动态性，我们完全可以创建一个空的对象(而不是类)，通过像对象动态的添加属性来完善对象的功能。

专注于为中小企业提供网站建设、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业根河免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

JSON是JavaScript中对象的字面量，是对象的表示方法，通过使用JSON，可以减少中间变量，使代码的结构更加清晰，也更加直观。使用JSON，可以动态的构建对象，而不必通过类来进行实例化，大大的提高了编码的效率。

Javascript对象

JavaScript对象其实就是属性的集合，这里的集合与数学上的集合是等价的，即具有确定性，无序性和互异性，也就是说，给定一个JavaScript对象，我们可以明确的知道一个属性是不是这个对象的属性，对象中的属性是无序的，并且是各不相同的(如果有同名的，则后声明的覆盖先声明的)。

一般来说，我们声明对象的时候对象往往只是一个空的集合，不包含任何的属性，通过不断的添加属性，使得该对象成为一个有完整功能的对象，而不用通过创建一个类，然后实例化该类这种模式，这样我们的代码具有更高的灵活性，我们可以任意的增删对象的属性。

如果读者有python或其他类似的动态语言的经验,就可以更好的理解JavaScript的对象，JavaScript对象的本身就是一个字典(dictionary)，或者Java语言中的Map，或者称为关联数组，即通过键来关联一个对象，这个对象本身又可以是一个对象，根据此定义，我们可以知道JavaScript对象可以表示任意复杂的数据结构。

对象的属性

属性是由键值对组成的，即属性的名字和属性的值。属性的名字是一个字符串，而值可以为任意的JavaScript对象(JavaScript中的一切皆对象，包括函数)。比如，声明一个对象：

 
 
 
    
  
  
  
  1. //声明一个对象 
    2. 
  
  
  
  2. var jack = new Object(); 
    3. 
  
  
  
  3. jack.name = "jack"; 
    4. 
  
  
  
  4. jack.age = 26; 
    5. 
  
  
  
  5. jack.birthday = new Date(1984, 4, 5); 
    6. 
  
  
  
  6.   
    7. 
  
  
  
  7. //声明另一个对象 
    8. 
  
  
  
  8. var address = new Object(); 
    9. 
  
  
  
  9. address.street = "Huang Quan Road"; 
    10. 
  
  
  
  10. address.xno = "135"; 
    11. 
  
  
  
  11.   
    12. 
  
  
  
  12. //将addr属性赋值为对象address 
    13. 
  
  
  
  13. jack.addr = address;
    14.

这种声明对象的方式与传统的OO语言是截然不同的，它给了我们极大的灵活性来定制一个对象的行为。

对象属性的读取方式是通过点操作符(.)来进行的，比如上例中jack对象的addr属性，可以通过下列方式取得：

 
 
 
    
  
  
  
  1. var ja = jack.addr; 
    2. 
  
  
  
  2. ja = jack[addr];
    3.

后者是为了避免这种情况，设想对象有一个属性本身包含一个点(.)，这在JavaScript中是合法的，比如说名字为foo.bar，当使用jack.foo.bar的时候，解释器会误以为foo属性下有一个bar的字段，因此可以使用jack[foo.bar]来进行访问。通常来说，我们在开发通用的工具包时，应该对用户可能的输入不做任何假设，通过[属性名]这种形式则总是可以保证正确性的。

属性与变量

在第二章，我们讲解了变量的概念，在本章中，读者可能已经注意到，这二者的行为非常相似，事实上，对象的属性和我们之前所说的变量其实是一回事。

JavaScript引擎在初始化时，会构建一个全局对象，在客户端环境中，这个全局对象即为window。如果在其他的JavaScript环境中需要引用这个全局对象，只需要在顶级作用域(即所有函数声明之外的作用域)中声明：

 
 
 
    
  
  
  
  1. var global = this;
    2.

我们在顶级作用域中声明的变量将作为全局对象的属性被保存，从这一点上来看，变量其实就是属性。比如，在客户端，经常会出现这样的代码：

 
 
 
    
  
  
  
  1. var v = "global";   
    2. 
  
  
  
  2. var array = ["hello", "world"]; 
    3. 
  
  
  
  3. function func(id){ 
    4. 
  
  
  
  4.     var element = document.getElementById(id); 
    5. 
  
  
  
  5.     //对elemen做一些操作 
    6. 
  
  
  
  6. }
    7.

事实上相当于：

 
 
 
    
  
  
  
  1. window.v = "global"; 
    2. 
  
  
  
  2. window.array = ["hello", "world"]; 
    3. 
  
  
  
  3. window.func = function(id){ 
    4. 
  
  
  
  4.     var element = document.getElementById(id); 
    5. 
  
  
  
  5.     //对elemen做一些操作   
    6. 
  
  
  
  6. }
    7.

#p#

原型对象

原型(prototype)，是JavaScript特有的一个概念，通过使用原型，JavaScript可以建立其传统OO语言中的继承，从而体现对象的层次关系。JavaScript本身是基于原型的，每个对象都有一个prototype的属性来，这个prototype本身也是一个对象，因此它本身也可以有自己的原型，这样就构成了一个链结构。

访问一个属性的时候，解析器需要从下向上的遍历这个链结构，直到遇到该属性，则返回属性对应的值，或者遇到原型为null的对象(JavaScript的基对象Object的prototype属性即为null)，如果此对象仍没有该属性，则返回undefined.

下面我们看一个具体的例子：

 
 
 
    
  
  
  
  1. //声明一个对象base 
    2. 
  
  
  
  2. function Base(name){ 
    3. 
  
  
  
  3.     this.name = name; 
    4. 
  
  
  
  4.     this.getName = function(){ 
    5. 
  
  
  
  5.        return this.name; 
    6. 
  
  
  
  6.     } 
    7. 
  
  
  
  7. } 
    8. 
  
  
  
  8.   
    9. 
  
  
  
  9. //声明一个对象child 
    10. 
  
  
  
  10. function Child(id){ 
    11. 
  
  
  
  11.     this.id = id; 
    12. 
  
  
  
  12.     this.getId = function(){ 
    13. 
  
  
  
  13.        return this.id;   
    14. 
  
  
  
  14.     } 
    15. 
  
  
  
  15. } 
    16. 
  
  
  
  16.   
    17. 
  
  
  
  17. //将child的原型指向一个新的base对象 
    18. 
  
  
  
  18. Child.prototype = new Base("base"); 
    19. 
  
  
  
  19.   
    20. 
  
  
  
  20. //实例化一个child对象 
    21. 
  
  
  
  21. var c1 = new Child("child"); 
    22. 
  
  
  
  22.   
    23. 
  
  
  
  23. //c1本身具有getId方法 
    24. 
  
  
  
  24. print(c1.getId()); 
    25. 
  
  
  
  25. //由于c1从原型链上"继承"到了getName方法，因此可以访问 
    26. 
  
  
  
  26. print(c1.getName());
    27.

得出结果：

child

base

由于遍历原型链的时候，是有下而上的，所以最先遇到的属性值最先返回，通过这种机制可以完成重载的机制。

this指针

JavaScript中最容易使人迷惑的恐怕就数this指针了，this指针在传统OO语言中，是在类中声明的，表示对象本身，而在JavaScript中，this表示当前上下文，即调用者的引用。这里我们可以来看一个常见的例子：

 
 
 
    
  
  
  
  1. //定义一个人，名字为jack 
    2. 
  
  
  
  2. var jack = { 
    3. 
  
  
  
  3.     name : "jack", 
    4. 
  
  
  
  4.     age : 26 
    5. 
  
  
  
  5. } 
    6. 
  
  
  
  6.   
    7. 
  
  
  
  7. //定义另一个人，名字为abruzzi 
    8. 
  
  
  
  8. var abruzzi = { 
    9. 
  
  
  
  9.     name : "abruzzi", 
    10. 
  
  
  
  10.     age : 26 
    11. 
  
  
  
  11. } 
    12. 
  
  
  
  12.   
    13. 
  
  
  
  13. //定义一个全局的函数对象 
    14. 
  
  
  
  14. function printName(){ 
    15. 
  
  
  
  15.     return this.name; 
    16. 
  
  
  
  16. } 
    17. 
  
  
  
  17.   
    18. 
  
  
  
  18. //设置printName的上下文为jack, 此时的this为jack 
    19. 
  
  
  
  19. print(printName.call(jack)); 
    20. 
  
  
  
  20. //设置printName的上下文为abruzzi,此时的this为abruzzi 
    21. 
  
  
  
  21. print(printName.call(abruzzi));
    22.

运行结果：

jack

Abruzzi

应该注意的是，this的值并非函数如何被声明而确定，而是被函数如何被调用而确定，这一点与传统的面向对象语言截然不同，call是Function上的一个函数，详细描述在第四章。

使用对象

对象是JavaScript的基础，我们使用JavaScript来完成编程工作就是通过使用对象来体现的，这一小节通过一些例子来学习如何使用JavaScript对象：

对象的声明有三种方式：

◆ 通过new操作符作用域Object对象，构造一个新的对象，然后动态的添加属性，从无到有的构筑一个对象。

◆ 定义对象的“类”:原型，然后使用new操作符来批量的构筑新的对象。

◆ 使用JSON，这个在下一节来进行详细说明

这一节我们详细说明第二种方式，如：

 
 
 
    
  
  
  
  1. //定义一个"类"，Address 
    2. 
  
  
  
  2. function Address(street, xno){ 
    3. 
  
  
  
  3.     this.street = street || 'Huang Quan Road'; 
    4. 
  
  
  
  4.     this.xno = xno || 135; 
    5. 
  
  
  
  5.     this.toString = function(){ 
    6. 
  
  
  
  6.        return "street : " + this.street + ", No : " + this.xno;    
    7. 
  
  
  
  7.     } 
    8. 
  
  
  
  8. } 
    9. 
  
  
  
  9.   
    10. 
  
  
  
  10. //定义另一个"类"，Person 
    11. 
  
  
  
  11. function Person (name, age, addr) { 
    12. 
  
  
  
  12.   this.name = name || 'unknown'; 
    13. 
  
  
  
  13.   this.age = age; 
    14. 
  
  
  
  14.   this.addr = addr || new Address(null, null); 
    15. 
  
  
  
  15.   this.getName = function () {return this.name;} 
    16. 
  
  
  
  16.   this.getAge = function(){return this.age;} 
    17. 
  
  
  
  17.   this.getAddr = function(){return this.addr.toString();} 
    18. 
  
  
  
  18. } 
    19. 
  
  
  
  19.   
    20. 
  
  
  
  20. //通过new操作符来创建两个对象，注意，这两个对象是相互独立的实体 
    21. 
  
  
  
  21. var jack = new Person('jack', 26, new Address('Qing Hai Road', 123)); 
    22. 
  
  
  
  22. var abruzzi = new Person('abruzzi', 26); 
    23. 
  
  
  
  23.   
    24. 
  
  
  
  24. //查看结果 
    25. 
  
  
  
  25. print(jack.getName()); 
    26. 
  
  
  
  26. print(jack.getAge()); 
    27. 
  
  
  
  27. print(jack.getAddr()); 
    28. 
  
  
  
  28.   
    29. 
  
  
  
  29. print(abruzzi.getName()); 
    30. 
  
  
  
  30. print(abruzzi.getAge()); 
    31. 
  
  
  
  31. print(abruzzi.getAddr());
    32.

运行结果如下：

jack

26

street : Qing Hai Road, No : 123

abruzzi

26

street : Huang Quan Road, No : 135

#p#

JSON及其使用

JSON全称为JavaScript对象表示法(JavaScript Object Notation)，即通过字面量来表示一个对象，从简单到复杂均可使用此方式。比如：

 
 
 
    
  
  
  
  1. var obj = { 
    2. 
  
  
  
  2.     name : "abruzzi", 
    3. 
  
  
  
  3.     age : 26, 
    4. 
  
  
  
  4.     birthday : new Date(1984, 4, 5), 
    5. 
  
  
  
  5.     addr : { 
    6. 
  
  
  
  6.        street : "Huang Quan Road", 
    7. 
  
  
  
  7.        xno : "135"
    8. 
  
  
  
  8.     } 
    9. 
  
  
  
  9. }
    10.

这种方式，显然比上边的例子简洁多了，没有冗余的中间变量，很清晰的表达了obj这样一个对象的结构。事实上，大多数有经验的JavaScript程序员更倾向与使用这种表示法，包括很多JavaScript的工具包如jQuery，ExtJS等都大量的使用了JSON。JSON事实上已经作为一种前端与服务器端的数据交换格式，前端程序通过Ajax发送JSON对象到后端，服务器端脚本对JSON进行解析，还原成服务器端对象，然后做一些处理，反馈给前端的仍然是JSON对象，使用同一的数据格式，可以降低出错的概率。

而且，JSON格式的数据本身是可以递归的，也就是说，可以表达任意复杂的数据形式。JSON的写法很简单，即用花括号括起来的键值对，键值对通过冒号隔开，而值可以是任意的JavaScript对象，如简单对象String，Boolean，Number，Null，或者复杂对象如Date，Object，其他自定义的对象等。

JSON的另一个应用场景是：当一个函数拥有多个返回值时，在传统的面向对象语言中，我们需要组织一个对象，然后返回，而JavaScript则完全不需要这么麻烦，比如：

 
 
 
    
  
  
  
  1. function point(left, top){ 
    2. 
  
  
  
  2.     this.left = left; 
    3. 
  
  
  
  3.     this.top = top; 
    4. 
  
  
  
  4.     //handle the left and top 
    5. 
  
  
  
  5.     return {x: this.left, y:this.top}; 
    6. 
  
  
  
  6. }
    7.

直接动态的构建一个新的匿名对象返回即可：

 
 
 
    
  
  
  
  1. var pos = point(3, 4); 
    2. 
  
  
  
  2. //pos.x = 3; 
    3. 
  
  
  
  3. //pos.y = 4;
    4.

使用JSON返回对象，这个对象可以有任意复杂的结构，甚至可以包括函数对象。

在实际的编程中，我们通常需要遍历一个JavaScript对象，事先我们对对象的内容一无所知。怎么做呢?JavaScript提供了for..in形式的语法糖：

 
 
 
    
  
  
  
  1. for(var item in json){ 
    2. 
  
  
  
  2.     //item为键 
    3. 
  
  
  
  3.     //json[item]为值 
    4. 
  
  
  
  4. }
    5.

这种模式十分有用，比如，在实际的WEB应用中，对一个页面元素需要设置一些属性，这些属性是事先不知道的，比如：

 
 
 
    
  
  
  
  1. var style = { 
    2. 
  
  
  
  2.     border:"1px solid #ccc", 
    3. 
  
  
  
  3.     color:"blue"
    4. 
  
  
  
  4. };
    5.

然后，我们给一个DOM元素动态的添加这些属性：

 
 
 
    
  
  
  
  1. for(var item in style){ 
    2. 
  
  
  
  2.     //使用jQuery的选择器 
    3. 
  
  
  
  3.     $("div#element").css(item, style[item]); 
    4. 
  
  
  
  4. }
    5.

当然，jQuery有更好的办法来做这样一件事，这里只是举例子，应该注意的是，我们在给$("div#element")添加属性的时候，我们对style的结构是不清楚的。

另外比如我们需要收集一些用户的自定义设置，也可以通过公开一个JSON对象，用户将需要设置的内容填入这个JSON，然后我们的程序对其进行处理。

 
 
 
    
  
  
  
  1. function customize(options){ 
    2. 
  
  
  
  2.     this.settings = $.extend(default, options); 
    3. 
  
  
  
  3. }
    4.

原文：http://abruzzi.iteye.com/blog/641532

【系列文章】

JavaScript内核之基本概念

JavaScript概述

新闻名称：JavaScript入门之对象与JSON
标题网址：http://www.shufengxianlan.com/qtweb/news25/226275.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

品牌网站建设知识

行业网站建设

宣威网站建设　　 　成都机房机柜租用　　 　wap手机网站　　 　中建建业环保　　 　重庆网站制作　　 　众诚伟业　　 　网站seo优化　　 　中国西部信息中心　　 　响应式网站建设　　 　网站推广优化　　 　乐山服务器托管　　 　云锦斋建筑　　 　微信小程序　　 　网站域名　　 　宜宾做网站　　 　防护网厂　　 　盐亭网站设计　　 　资中网站建设　　 　成都雨棚定制　　 　成都网站推广