JavaScript对象与JSON详解：从原型链到数据交互

JavaScript对象基础与动态特性

JavaScript中的对象与传统面向对象语言中的对象概念存在显著差异。在传统语言中，创建对象需先定义包含属性和方法的类模板，通过实例化生成对象，再依靠对象协作完成功能。JavaScript则没有类的概念，利用其动态特性，可以直接创建一个空对象，随后动态添加属性来完善功能。

JSON是JavaScript对象的字面量表示形式，旨在简化对象构建。通过JSON，可以减少中间变量，使代码结构更清晰直观。它允许动态构建对象，无需依赖类实例化，从而显著提升编码效率。

JavaScript对象本质上是属性的集合，遵循数学集合的确定性、无序性和互异性原则。这意味着可以明确判断某属性是否属于对象，属性之间无序排列且互不相同。若存在同名属性，后声明的会覆盖先声明的。

通常声明的对象初始为空集合，通过不断添加属性使其具备完整功能。这种动态添加属性的方式无需创建类并实例化，赋予了代码更高的灵活性，允许任意增删对象属性。

对于有Python或其他动态语言经验的开发者，理解JavaScript对象更为容易。JavaScript对象类似于字典、Java中的Map或关联数组，通过键关联值，且值可以是任意JavaScript对象（包括函数）。因此，JavaScript对象能表示任意复杂的数据结构。

对象属性的定义与访问

属性由键值对组成，键名为字符串，值可为任意JavaScript对象（JavaScript中一切皆对象，含函数）。例如，声明一个对象：

 
//声明一个对象
var jack = new Object();
jack.name = "jack";
jack.age = 26;
jack.birthday = new Date(1984, 4, 5);
//声明另一个对象
var address = new Object();
address.street = "Huang Quan Road";
address.xno = "135";
//将addr属性赋值为对象address
jack.addr = address;

这种声明方式与传统面向对象语言截然不同，提供了极大的灵活性来定制对象行为。

属性读取通过点操作符(.)进行，例如获取jack对象的addr属性。

var ja = jack.addr;
ja = jack[addr];

使用方括号访问旨在避免属性名包含点号(.)时的歧义。若属性名为foo.bar，使用jack.foo.bar会被解释为访问foo下的bar字段。使用jack[foo.bar]可确保正确访问。在开发通用工具包时，对用户输入不做假设，使用[属性名]形式可保证正确性。

属性与变量的关系

对象属性与变量行为相似，事实上二者本质相同。

JavaScript引擎初始化时构建全局对象，客户端环境中即为window。在其他JavaScript环境中引用全局对象，只需在顶级作用域（所有函数声明之外）声明：

var global = this;

在顶级作用域声明的变量作为全局对象的属性保存，因此变量即属性。例如客户端常见代码：

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

事实上相当于：

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

原型链与继承机制

原型(prototype)是JavaScript特有的概念，用于建立传统面向对象语言中的继承关系，体现对象层次。JavaScript基于原型，每个对象都有prototype属性（本身也是对象），可拥有自己的原型，形成链结构。

访问属性时，解析器从下向上遍历链结构，直到找到属性返回对应值，或遇到原型为null的对象（Object的prototype为null）。若仍未找到属性，则返回undefined。

具体例子如下：

 
//声明一个对象base
function Base(name){
this.name = name;
this.getName = function(){
return this.name;
} 
} 
//声明一个对象child
function Child(id){
this.id = id;
this.getId = function(){
return this.id;
} 
} 
//将child的原型指向一个新的base对象
Child.prototype = new Base("base");
//实例化一个child对象
var c1 = new Child("child");
//c1本身具有getId方法
print(c1.getId());
//由于c1从原型链上"继承"到了getName方法，因此可以访问
print(c1.getName());

得出结果：

child

base

原型链遍历由下而上，最先遇到的属性值优先返回，此机制可实现重载。

this指针的上下文绑定

this指针

JavaScript中this指针易使人迷惑。传统面向对象语言中，this在类中声明表示对象本身；JavaScript中，this表示当前上下文，即调用者引用。常见例子：

 
//定义一个人，名字为jack
var jack = {
name : "jack",
age : 26
} 
//定义另一个人，名字为abruzzi
var abruzzi = {
name : "abruzzi",
age : 26
} 
//定义一个全局的函数对象
function printName(){
return this.name;
} 
//设置printName的上下文为jack, 此时的this为jack
print(printName.call(jack));
//设置printName的上下文为abruzzi,此时的this为abruzzi
print(printName.call(abruzzi));

运行结果：

jack

Abruzzi

注意，this的值由函数调用方式确定，而非声明方式，这与传统面向对象语言不同。call是Function上的函数，详情见第四章。

JavaScript对象的使用方式

使用对象

对象是JavaScript基础，编程通过对象体现。本小节通过示例学习使用JavaScript对象：

对象声明有三种方式：

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

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

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

本节详细说明第二种方式，如：

 
//定义一个"类"，Address
function Address(street, xno){
this.street = street || 'Huang Quan Road';
this.xno = xno || 135;
this.toString = function(){
return "street : " + this.street + ", No : " + this.xno;
} 
} 
//定义另一个"类"，Person
function Person (name, age, addr) {
this.name = name || 'unknown';
this.age = age;
this.addr = addr || new Address(null, null);
this.getName = function () {return this.name;}
this.getAge = function(){return this.age;}
this.getAddr = function(){return this.addr.toString();}
} 
//通过new操作符来创建两个对象，注意，这两个对象是相互独立的实体
var jack = new Person('jack', 26, new Address('Qing Hai Road', 123));
var abruzzi = new Person('abruzzi', 26);
//查看结果
print(jack.getName());
print(jack.getAge());
print(jack.getAddr());
print(abruzzi.getName());
print(abruzzi.getAge());
print(abruzzi.getAddr());

运行结果如下：

jack

26

street : Qing Hai Road, No : 123

abruzzi

26

street : Huang Quan Road, No : 135

JSON的应用与数据交互

JSON全称为JavaScript对象表示法(JavaScript Object Notation)，通过字面量表示对象，适用于简单到复杂场景。例如：

 
var obj = {
name : "abruzzi",
age : 26,
birthday : new Date(1984, 4, 5),
addr : {
street : "Huang Quan Road",
xno : "135"
} 
} 

此方式比前例简洁，无冗余中间变量，清晰表达obj结构。经验丰富的JavaScript程序员更倾向此表示法，包括jQuery、ExtJS等工具包大量使用JSON。JSON已作为前后端数据交换格式，前端通过Ajax发送JSON对象到后端，服务器端脚本解析JSON还原为服务器端对象处理，反馈给前端的仍是JSON对象。使用同一数据格式可降低出错概率。

此外，JSON格式数据可递归，表达任意复杂数据形式。JSON写法简单，即用花括号括起来的键值对，键值对通过冒号隔开，值可为任意JavaScript对象，如简单对象String、Boolean、Number、Null，或复杂对象如Date、Object、其他自定义对象等。

JSON另一应用场景：当函数拥有多个返回值时，传统面向对象语言需组织对象返回，JavaScript无需如此。例如：

function point(left, top){
this.left = left;
this.top = top;
//handle the left and top
return {x: this.left, y:this.top};
}

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

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

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

实际编程中，常需遍历JavaScript对象，事先不知对象内容。JavaScript提供for..in语法糖：

for(var item in json){
//item为键
//json[item]为值
}

此模式十分有用，例如WEB应用中，对页面元素设置事先未知的属性：

var style = {
border:"1px solid #ccc",
color:"blue"
};

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

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

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

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

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