JavaScript 对象基础

什么是对象？

在 JavaScript 中，对象是一种复合数据类型，它允许你存储和组织相关数据和功能的集合。可以将对象想象成一个容器，里面可以装各种不同类型的值，这些值以键值对（key-value pairs）的形式存在。

JavaScript 是一种基于对象的语言 - 几乎 JavaScript 中的所有东西都是对象，或者可以被视为对象。

思考方式

可以把对象看作现实世界中的实体，比如一个人有姓名、年龄、地址等属性，还有说话、走路等行为。在 JavaScript 中，属性是变量，行为是函数。

对象的创建方式

在 JavaScript 中，有多种创建对象的方法。以下是最常见的三种：

1. 对象字面量

这是最简单和最常用的方法：

javascript

const person = {
  firstName: "张",
  lastName: "三",
  age: 25,
  greet: function() {
    console.log("你好，我是" + this.firstName + this.lastName);
  }
};

console.log(person.firstName); // 输出: 张
person.greet(); // 输出: 你好，我是张三

2. 使用 new Object() 构造函数

javascript

const car = new Object();
car.brand = "特斯拉";
car.model = "Model 3";
car.year = 2021;
car.displayInfo = function() {
  console.log(this.year + "年" + this.brand + " " + this.model);
};

car.displayInfo(); // 输出: 2021年特斯拉 Model 3

3. 使用构造函数

javascript

function Student(name, age, grade) {
  this.name = name;
  this.age = age;
  this.grade = grade;
  this.introduce = function() {
    console.log(`我叫${this.name}，今年${this.age}岁，就读${this.grade}年级。`);
  };
}

const student1 = new Student("小明", 15, "九");
student1.introduce(); // 输出: 我叫小明，今年15岁，就读九年级。

访问对象属性

我们可以通过两种方式访问对象的属性：

1. 点符号（Dot Notation）

javascript

const book = {
  title: JavaScript 高级程序设计,
  author: "尼古拉斯·泽卡斯",
  pages: 816
};

console.log(book.title); // 输出: JavaScript高级程序设计
console.log(book.pages); // 输出: 816

2. 方括号符号（Bracket Notation）

javascript

console.log(book["author"]); // 输出: 尼古拉斯·泽卡斯

// 方括号符号的优势是可以使用变量作为属性名
const propertyName = "title";
console.log(book[propertyName]); // 输出: JavaScript高级程序设计

修改对象

JavaScript 对象是动态的，我们可以随时添加、修改或删除属性：

javascript

const computer = {
  brand: "苹果",
  model: "MacBook Pro",
  year: 2020
};

// 修改属性
computer.year = 2021;

// 添加新属性
computer.memory = "16GB";

// 删除属性
delete computer.year;

console.log(computer);
// 输出: {brand: "苹果", model: "MacBook Pro", memory: "16GB"}

对象方法

对象方法是作为对象属性的函数。这使得对象可以"做事情"：

javascript

const calculator = {
  num1: 0,
  num2: 0,
  
  // 设置数字
  setNumbers: function(a, b) {
    this.num1 = a;
    this.num2 = b;
  },
  
  // 加法方法
  add: function() {
    return this.num1 + this.num2;
  },
  
  // 乘法方法
  multiply: function() {
    return this.num1 * this.num2;
  }
};

calculator.setNumbers(5, 3);
console.log(calculator.add()); // 输出: 8
console.log(calculator.multiply()); // 输出: 15

在 ES6 之后，可以使用更简洁的方法定义语法：

javascript

const calculator = {
  num1: 0,
  num2: 0,
  
  setNumbers(a, b) {
    this.num1 = a;
    this.num2 = b;
  },
  
  add() {
    return this.num1 + this.num2;
  },
  
  multiply() {
    return this.num1 * this.num2;
  }
};

this 关键字

在对象方法内部，this 关键字指的是"当前对象"：

javascript

const user = {
  name: "李四",
  age: 30,
  sayHello() {
    console.log(`大家好，我是${this.name}，今年${this.age}岁。`);
  }
};

user.sayHello(); // 输出: 大家好，我是李四，今年30岁。

注意

this 的值取决于函数的调用方式，而不是函数的定义位置。在不同的上下文中，this 可能指向不同的对象。

对象的实际应用

示例：购物车系统

javascript

const shoppingCart = {
  items: [],
  
  addItem(name, price, quantity) {
    this.items.push({
      name: name,
      price: price,
      quantity: quantity
    });
  },
  
  removeItem(name) {
    this.items = this.items.filter(item => item.name !== name);
  },
  
  calculateTotal() {
    let total = 0;
    for (let i = 0; i < this.items.length; i++) {
      total += this.items[i].price * this.items[i].quantity;
    }
    return total;
  },
  
  displayCart() {
    console.log("购物车内容：");
    this.items.forEach(item => {
      console.log(`${item.name} - 单价：¥${item.price} - 数量：${item.quantity}`);
    });
    console.log(`总计: ¥${this.calculateTotal()}`);
  }
};

// 使用购物车
shoppingCart.addItem("苹果", 3.5, 5);
shoppingCart.addItem("面包", 8.5, 2);
shoppingCart.addItem("牛奶", 6, 1);
shoppingCart.displayCart();
// 输出:
// 购物车内容：
// 苹果 - 单价：¥3.5 - 数量：5
// 面包 - 单价：¥8.5 - 数量：2
// 牛奶 - 单价：¥6 - 数量：1
// 总计: ¥40.5

shoppingCart.removeItem("面包");
shoppingCart.displayCart();
// 输出:
// 购物车内容：
// 苹果 - 单价：¥3.5 - 数量：5
// 牛奶 - 单价：¥6 - 数量：1
// 总计: ¥23.5

对象与JSON

JSON (JavaScript Object Notation) 是受 JavaScript 对象语法启发的数据格式，但它们之间有区别：

javascript

// JavaScript 对象
const jsObject = {
  name: "王五",
  age: 28,
  hobbies: ["阅读", "游泳"]
};

// 转换为 JSON 字符串
const jsonString = JSON.stringify(jsObject);
console.log(jsonString);
// 输出: {"name":"王五","age":28,"hobbies":["阅读","游泳"]}

// 从 JSON 字符串转回 JavaScript 对象
const parsedObject = JSON.parse(jsonString);
console.log(parsedObject.name); // 输出: 王五

JSON 在客户端与服务器之间传输数据时非常有用。

检查对象属性

我们可以检查一个对象是否包含特定的属性：

javascript

const laptop = {
  brand: "联想",
  model: "ThinkPad",
  year: 2021
};

// 使用 in 运算符
console.log("brand" in laptop); // 输出: true
console.log("price" in laptop); // 输出: false

// 使用 hasOwnProperty 方法
console.log(laptop.hasOwnProperty("model")); // 输出: true
console.log(laptop.hasOwnProperty("color")); // 输出: false

遍历对象属性

我们可以使用 for...in 循环遍历对象的所有属性：

javascript

const phone = {
  brand: "小米",
  model: "Mi 11",
  price: 3999,
  color: "蓝色"
};

for (let key in phone) {
  console.log(`${key}: ${phone[key]}`);
}
// 输出:
// brand: 小米
// model: Mi 11
// price: 3999
// color: 蓝色

其他遍历对象属性的方法：

javascript

// 获取所有键
const keys = Object.keys(phone);
console.log(keys); // 输出: ["brand", "model", "price", "color"]

// 获取所有值
const values = Object.values(phone);
console.log(values); // 输出: ["小米", "Mi 11", 3999, "蓝色"]

// 获取所有键值对
const entries = Object.entries(phone);
console.log(entries); 
// 输出: [["brand", "小米"], ["model", "Mi 11"], ["price", 3999], ["color", "蓝色"]]

对象的使用场景

1. 数据存储与组织：将相关数据组合在一起
2. 配置对象：将程序的配置选项集中管理
3. 命名空间：避免变量名冲突
4. 模块化代码：将相关功能组织在一起
5. 模拟类与实例：在ES6的类出现前，对象是实现面向对象编程的主要方式

总结

JavaScript 对象是一种强大、灵活的数据结构，它是理解和掌握 JavaScript 的核心内容。通过对象，我们可以：

• 将相关数据组织在一起
• 创建包含属性和方法的复杂数据结构
• 模拟现实世界的实体
• 组织和模块化代码

本文介绍了对象的基础知识，包括创建方式、属性访问、方法定义以及常见操作。掌握这些基础知识对于深入学习 JavaScript 至关重要。

练习与挑战

为了巩固所学知识，请尝试以下练习：

1. 创建一个代表图书的对象，包含标题、作者、出版年份等属性，以及一个显示图书信息的方法。
2. 创建一个简单的通讯录对象，能够添加、删除和查找联系人。
3. 实现一个计算器对象，包含基本的数学运算功能。
4. 创建一个学生管理系统，可以添加学生、记录成绩并计算平均分。

进一步学习的资源

• MDN Web Docs: JavaScript 对象基础
• JavaScript.info: 对象
• 现代 JavaScript 教程

掌握对象是理解 JavaScript 的重要一步。随着你的深入学习，你会发现对象在 JavaScript 中无处不在，而且理解它们的工作方式对于成为一名优秀的 JavaScript 开发者至关重要。