对象

代码中的对象

提示：需要注意的是，虽然我们可以将现实中的对象表示为 JavaScript 对象，但是并非始终可以这么做。一开始这么理解，有助于你思考对象的结构和作用，但是作为开发者，随着经验的不断增长，就会发现 JavaScript 对象可能与实际的物体有很大的区别。

---

注意：typeof 是个运算符，可以返回后面的数据类型的名称：

typeof "hello" // 返回 "string"
typeof true // 返回 "boolean"
typeof [1, 2, 3] // 返回 "object"（数组是一种对象类型）
typeof function hello() { } // 返回 "function"

练习：Umbrella (7-1)

说明：

回到之前视频中的 umbrella 示例，看看你能否根据示例 open() 方法创建 close() 方法。如果一开始遇到问题，也没关系！我们将在这节课的稍后阶段详细介绍。

var umbrella = { 
  color: "pink",
  isOpen: false,
  open: function() { 
    if (umbrella.isOpen === true) {
      return "The umbrella is already opened!";
    } else {
      umbrella.isOpen = true;
      return "Julia opens the umbrella!";
    }
   }
};

提示：记得将对象的所有属性和方法放在花括号里：var myObject = { greeting: "hello", name: "Julia" };。此外，注意对象是另一种数据类型。就像字符串变量声明 var myString = "hello"; 一样，会在末尾添加分号，声明对象时别忘了在末尾添加分号。

你的代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

/*

* Programming Quiz: Umbrella (7-1)

*/

var umbrella = {

color : "pink" ,

isOpen : true ,

open : function ( ) {

if ( umbrella . isOpen === true ) {

return "The umbrella is already opened!" ;

} else {

umbrella . isOpen = true ;

return "Julia opens the umbrella!" ;

}

} ,

// your code goes here

} ;

对象字面值

对象字面值记法

var sister = {
  name: "Sarah", 
  age: 23,
  parents: [ "alice", "andy" ],
  siblings: ["julia"],
  favoriteColor: "purple",
  pets: true
};

你在上面看到的语法叫做对象字面值记法。在构建对象字面值时需要注意几个重要事项：

• “键”（表示属性或方法名称）和它的“值”用分号隔开了
• 键值对用逗号隔开
• 整个对象包含在花括号 { } 里。

和在字典中查找单词的定义一样，通过键值对中的键可以查找关于对象的信息。下面这几个示例展示了可以如何使用你所创建的对象获取我姐姐父母的信息。

// two equivalent ways to use the key to return its value
sister["parents"] // returns [ "alice", "andy" ]
sister.parents // also returns ["alice", "andy"]

sister["parents"] 叫做括号记法（因为使用了括号！），sister.parents 叫做点记法（因为使用了点！）。

字典 -  Caleb Roenigk -  知识共享

方法呢？

上述 sister 对象包含了关于我姐姐的各种属性，但是并没指明我的姐姐是干什么的。例如，假设我的姐姐喜欢画画。你可以创建一个 paintPicture() 方法，每次调用该方法都会返回“Sarah paints a picture!”。语法和定义对象属性的语法几乎一样。唯一的区别是该键值对中的值将为函数。

var sister = {
  name: "Sarah",
  age: 23,
  parents: [ "alice", "andy" ],
  siblings: ["julia"],
  favoriteColor: "purple",
  pets: true,
  paintPicture: function() { return "Sarah paints!"; }
};

sister.paintPicture();

返回："Sarah paints!"

你可以通过访问 name 属性访问我姐姐的姓名：

sister.name

Returns: "Sarah"

命名规则

习题 1/2

对于以下 user 对象，你会使用什么输出 email 属性的值？

var user = {
  email: "user@example.com",
  firstName: "first",
  lastName: "last"
};

• console.log(user[email]);

• console.log(email);

• console.log(user.email);

• console.log(user["email"]);

提交

习题 2/2

下面哪段代码创建了描述红色 Honda Civic 的对象：

• var car = { manufacturer: "honda", model: "civic", class: "compact", color: "red" };

• var manufacturer = "honda"; var model = "civic"; var class = "compact"; var color = "red";

• var car = { color: "red" , manufacturer: "honda", model: "civic", class: "compact" };

• var car = [ "red", "honda", "civic", "compact" ];

提交

对象总结

对象是 JavaScript 中最重要的数据结构之一。你将到处看到它们！

它们具有属性（关于对象的信息）和方法（对象具有的函数或功能）。对象是非常强大的数据类型，当你使用 JavaScript 或任何其他面向对象编程语言时，将经常看到对象类型。

对象字面值、方法和属性

你可以使用对象字面值记法定义对象：

var myObj = { 
  color: "orange",
  shape: "sphere",
  type: "food",
  eat: function() { return "yummy" }
};

myObj.eat(); // method
myObj.color; // property

命名规则

可以随便使用大小写字母和数字，但是属性名称不要以数字开始。 字符串不需要放在引号里！如果是多个单词构成的属性，则采用驼峰式大小写形式。 属性名称里不要使用连字符

var richard = {
  "1stSon": true;
  "loves-snow": true;
};

richard.1stSon // error
richard.loves-snow // error

练习：菜单内容 (7-2)

说明：

创建一个 breakfast 对象来表示以下菜单项：

The Lumberjack - $9.95
eggs, sausage, toast, hashbrowns, pancakes

该对象应该包含 name、price 和ingredients 属性。

你的代码：

练习：银行账户 1 (7-3)

说明：

使用给定对象：

var savingsAccount = {
  balance: 1000,
  interestRatePercent: 1,
  deposit: function addMoney(amount) {
    if (amount > 0) {
      savingsAccount.balance += amount;
    }
  },
  withdraw: function removeMoney(amount) {
    var verifyBalance = savingsAccount.balance - amount;
    if (amount > 0 && verifyBalance >= 0) {
      savingsAccount.balance -= amount;
    }
  }
};

添加一个返回以下账户消息的 printAccountSummary() 方法：

Welcome!
Your balance is currently $1000 and your interest rate is 1%.

你的代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

/*

* Programming Quiz: Bank Accounts 1 (7-3)

*/

var savingsAccount = {

balance : 1000 ,

interestRatePercent : 1 ,

deposit : function addMoney ( amount ) {

if ( amount > 0 ) {

savingsAccount . balance += amount ;

}

} ,

withdraw : function removeMoney ( amount ) {

var verifyBalance = savingsAccount . balance - amount ;

if ( amount > 0 && verifyBalance >= 0 ) {

savingsAccount . balance -= amount ;

}

} ,

// your code goes here

} ;

console . log ( savingsAccount . printAccountSummary ( )) ;

练习：银行账户 2 (7-4)

说明：

使用上一道练习的对象回答以下问题：

var savingsAccount = {
  balance: 1000,
  interestRatePercent: 1,
  deposit: function addMoney(amount) {
    if (amount > 0) {
      savingsAccount.balance += amount;
    }
  },
  withdraw: function removeMoney(amount) {
    var verifyBalance = savingsAccount.balance - amount;
    if (amount > 0 && verifyBalance >= 0) {
      savingsAccount.balance -= amount;
    }
  }
};

你的代码：

练习题

以下哪些是访问 savingsAccount 对象的属性和调用方法的有效方式？

• savingsAccount.balance;

• savingsAccount[balance];

• savingsAccount["balance"];

• savingsAccount."balance";

• savingsAccount.withdraw = 50;

• savingsAccount.removeMoney = 50;

• savingsAccount.withdraw(50);

• savingsAccount.removeMoney(50);

提交

练习：Facebook 好友 (7-5)

说明：

创建一个叫做 facebookProfile 的对象。该对象应该包含 3 个属性：

1. 你的名称
2. 你的好友数，以及
3. 你发过的消息（字符串）数组

该对象还应该具有 4 个方法：

1. postMessage(message) - 向数组中添加新的消息字符串
2. deleteMessage(index) - 删除给定索引对应的消息
3. addFriend() - 好友数加一
4. removeFriend() - 好友数减一

你的代码：

练习：再次使用 Donut 示例 (7-6)

下面是个 donut 对象数组

var donuts = [
  { type: "Jelly", cost: 1.22 },
  { type: "Chocolate", cost: 2.45 },
  { type: "Cider", cost: 1.59 },
  { type: "Boston Cream", cost: 5.99 }
];

说明：

使用 forEach() 方法循环访问该数组，并使用 console.log 输出以下甜甜圈摘要

Jelly donuts cost $1.22 each
Chocolate donuts cost $2.45 each
Cider donuts cost $1.59 each
Boston Cream donuts cost $5.99 each

你的代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

/*

* Programming Quiz: Donuts Revisited (7-6)

*/

var donuts = [

{ type : "Jelly" , cost : 1.22 } ,

{ type : "Chocolate" , cost : 2.45 } ,

{ type : "Cider" , cost : 1.59 } ,

{ type : "Boston Cream" , cost : 5.99 }

] ;

// your code goes here