JS对象object – JavaScript教程

上一章JavaScript教程请查看：JS函数function

在本教程中，你将学习如何在JavaScript中创建和使用对象object。

什么是对象？

JavaScript是一种基于对象的语言，在JavaScript中几乎所有东西都是对象或像对象一样工作。因此，为了有效地使用JavaScript，我们需要了解对象是如何工作的，以及如何创建自己的对象并使用它们。

JavaScript对象只是一个命名值的集合。这些命名值通常被称为对象的属性。如果你还记得JavaScript数组那一章，数组是值的集合，其中每个值都有一个索引(一个数字键)，索引从零开始，每个值递增1。对象类似于数组，但不同之处在于你自己定义键，如名称、年龄、性别等。在下面几节中，我们将详细了解对象。

创建对象

可以使用带可选属性列表的花括号{}创建对象。属性是“key: value”对，其中键(或属性名)总是字符串，而值(或属性值)可以是任何数据类型，如字符串、数字、布尔值或复杂数据类型，如数组、函数和其他对象。此外，将函数作为其值的属性通常被称为方法，以将它们与其他属性区分开来。一个典型的JavaScript对象可能是这样的:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

上面的示例创建了一个名为person的对象，该对象有三个属性名称、年龄和性别，以及一个方法displayName()，displayName()方法显示this.name的值，该值解析为person.name，这是在JavaScript中创建新对象的最简单和首选的方法，称为对象字面值语法。

属性名通常不需要加引号，除非它们是保留字，或者它们包含空格或特殊字符(除了字母、数字和_和$字符以外的任何字符)，或者它们以数字开头，如下面的示例所示:

var person = {
    "first name": "Peter",
    "current age": 28,
    gender: "Male"
};

注意: 由于ECMAScript 5，保留字可以用作对象的属性名，而不需要引用。但是，为了更好的兼容性，应该避免这样做。

访问对象的属性

要访问或获取属性的值，可以使用点(.)或方括号([])符号，如下面的示例所示:

var book = {
    "name": "Harry Potter",
    "author": "J. K. Rowling",
    "year": 2000
};

// 点操作符
document.write(book.author);  // : J. K. Rowling

// 中括号操作符
document.write(book["year"]); // : 2000

点表示法更容易读和写，但它不能总是被使用。如果属性的名称无效(即如果它包含空格或特殊字符)，则不能使用点符号;你将不得不使用括号表示法，如下面的例子所示:

var book = {
    name: "Harry Potter",
    author: "J. K. Rowling",
    "publication date": "8 July 2000"
};

// 括号语法
document.write(book["publication date"]); // : 8 July 2000

方括号表示法比点表示法提供了更多的灵活性，它还允许你指定属性名作为变量，而不只是字符串文字，如下面的例子所示:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var key = prompt("输入任何属性名以获取其值");
alert(person[key]); // : Peter (if enter "name")

遍历对象的属性

可以使用for…in遍历对象的键-值对，这个循环特别针对遍历对象的属性进行了优化。这里有一个例子:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

// 遍历对象属性
for(var i in person) {  
    document.write(person[i] + "<br>"); // : name, age and gender
}

设置对象的属性

类似地，可以使用点(.)或括号([])符号设置新属性或更新现有属性，如下面的示例所示:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

// 设置属性
person.country = "United States";
document.write(person.country); // : United States

person["email"] = "abc@mail.com";
document.write(person.email); // : abc@mail.com

// 更新
person.age = 30;
document.write(person.age); // : 30

person["name"] = "Peter Parker";
document.write(person.name); // : Peter Parker

删除对象的属性

delete操作符可用于完全删除对象中的属性，删除是从对象中实际删除属性的唯一方法，将属性设置为undefined或null只会更改属性的值，它不会从对象中删除属性。

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

// 删除属性
delete person.age;
alert(person.age); // : undefined

注意: delete操作符只删除对象属性或数组元素。它对变量或声明的函数没有影响。但是，应该避免删除数组元素的delete操作符，因为它不会改变数组的长度，只会在数组中留下一个洞。

调用对象的方法

你可以像访问属性一样访问对象的方法—使用点表示法或方括号表示法。这里有一个例子:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

person.displayName(); // : Peter
person["displayName"](); // : Peter

通过值和引用操作

JavaScript对象是引用类型，这意味着当你复制它们时，你实际上只是复制了对那个对象的引用，而像字符串和数字这样的原始值是作为一个整体值分配或复制的。为了更好地理解这一切，让我们看看下面的例子:

var message = "Hello World!";

var greet = message; // 赋值给新变量
greet = "Hi, there!";

document.write(message);  // : Hello World!
document.write(greet);  // : Hi, there!

在上面的例子中，我们复制了一个变量消息并更改了该副本的值(即变量greet)，这两个变量仍然是独立的。但是，如果我们对一个对象做同样的事情，我们会得到一个不同的结果，正如你在下面的例子中看到的:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var user = person; // 新赋值
user.name = "Harry";

document.write(person.name);  // : Harry
document.write(user.name);  // : Harry

你可以清楚地看到，对变量user所做的任何更改也会更改person变量;这是因为两个变量都引用了同一个对象。因此，简单地复制对象实际上并不是复制它，而是复制对该对象的引用。