JavaScript 对象创建

JavaScript是一种基于对象的语言，几乎所有内容都可以被视为对象。理解如何创建和操作对象是掌握JavaScript的关键一步。本文将介绍JavaScript中创建对象的多种方式，并探讨每种方法的优缺点及适用场景。

什么是JavaScript对象？

在JavaScript中，对象是一种复合数据类型，可以存储多个键值对（属性和方法）。它们是JavaScript中最基础的数据结构，用于表示现实世界中的实体。

对象由属性和方法组成：

• 属性：描述对象的特征（如名称、年龄等）
• 方法：对象可以执行的操作（函数）

创建对象的方法

JavaScript提供了多种创建对象的方法，让我们逐一探讨：

1. 使用对象字面量

对象字面量是创建对象最简单、最常用的方式，使用花括号 {} 来定义。

javascript

const person = {
  firstName: "张",
  lastName: "三",
  age: 30,
  greet: function() {
    return `你好，我是${this.firstName}${this.lastName}，今年${this.age}岁。`;
  }
};

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

简写方法

ES6提供了对象方法的简写语法：

javascript

const person = {
  firstName: "张",
  lastName: "三",
  age: 30,
  greet() {
    return `你好，我是${this.firstName}${this.lastName}，今年${this.age}岁。`;
  }
};

2. 使用 Object 构造函数

可以使用 Object() 构造函数创建一个空对象，然后添加属性和方法：

javascript

const car = new Object();
car.brand = "特斯拉";
car.model = "Model 3";
car.year = 2023;
car.displayInfo = function() {
  return `${this.brand} ${this.model} (${this.year})`;
};

console.log(car.displayInfo()); // 输出: 特斯拉 Model 3 (2023)

3. 使用工厂函数

工厂函数是一个返回对象的函数，用于创建多个相似对象：

javascript

function createProduct(name, price, category) {
  return {
    name: name,
    price: price,
    category: category,
    getDetails() {
      return `${this.name} - ¥${this.price} (${this.category})`;
    }
  };
}

const product1 = createProduct("手机", 2999, "电子产品");
const product2 = createProduct("书籍", 49, "图书");

console.log(product1.getDetails()); // 输出: 手机 - ¥2999 (电子产品)
console.log(product2.getDetails()); // 输出: 书籍 - ¥49 (图书)

4. 使用构造函数

构造函数是创建对象的特殊函数，通常以大写字母开头：

javascript

function Student(name, grade, studentId) {
  this.name = name;
  this.grade = grade;
  this.studentId = studentId;
  this.study = function() {
    return `${this.name}正在学习。`;
  };
}

const student1 = new Student("李四", "高二", "S12345");
const student2 = new Student("王五", "高三", "S67890");

console.log(student1.name); // 输出: 李四
console.log(student2.study()); // 输出: 王五正在学习。

注意

使用构造函数时必须使用 new 关键字，否则 this 会指向全局对象（浏览器中为 window）！

5. 使用 Object.create() 方法

Object.create() 方法创建一个新对象，使用现有对象作为新创建对象的原型：

javascript

const personProto = {
  greet() {
    return `你好，我是${this.firstName}${this.lastName}`;
  }
};

const person1 = Object.create(personProto);
person1.firstName = "赵";
person1.lastName = "六";

console.log(person1.greet()); // 输出: 你好，我是赵六

6. 使用ES6类语法

ES6引入了类语法，使创建对象的过程更接近传统面向对象编程：

javascript

class Book {
  constructor(title, author, year) {
    this.title = title;
    this.author = author;
    this.year = year;
  }
  
  getSummary() {
    return `《${this.title}》由${this.author}于${this.year}年创作。`;
  }
  
  getAge() {
    return `此书已出版${new Date().getFullYear() - this.year}年。`;
  }
}

const book1 = new Book("JavaScript高级程序设计", "Nicholas C. Zakas", 2011);
console.log(book1.getSummary()); // 输出: 《JavaScript高级程序设计》由Nicholas C. Zakas于2011年创作。
console.log(book1.getAge()); // 输出: 此书已出版12年。(假设当前年份是2023)

对象属性的访问与操作

创建对象后，可以通过多种方式访问和操作其属性：

点符号与方括号符号

javascript

const user = {
  name: "小明",
  age: 25,
  "user-role": "admin" // 包含连字符的属性名
};

// 点符号
console.log(user.name); // 输出: 小明

// 方括号符号
console.log(user["age"]); // 输出: 25
console.log(user["user-role"]); // 输出: admin (不能使用点符号访问)

// 动态属性名访问
const propertyName = "name";
console.log(user[propertyName]); // 输出: 小明

添加、修改和删除属性

javascript

const student = {
  name: "小红"
};

// 添加属性
student.age = 16;
student["class"] = "高一(3)班";

// 修改属性
student.name = "小红红";

// 删除属性
delete student.age;

console.log(student); // 输出: {name: "小红红", class: "高一(3)班"}

实际应用案例

购物车系统

javascript

class CartItem {
  constructor(product, quantity) {
    this.product = product;
    this.quantity = quantity;
  }
  
  getSubtotal() {
    return this.product.price * this.quantity;
  }
}

class Product {
  constructor(id, name, price) {
    this.id = id;
    this.name = name;
    this.price = price;
  }
}

class ShoppingCart {
  constructor() {
    this.items = [];
  }
  
  addItem(product, quantity) {
    const existingItem = this.items.find(item => item.product.id === product.id);
    if (existingItem) {
      existingItem.quantity += quantity;
    } else {
      this.items.push(new CartItem(product, quantity));
    }
  }
  
  removeItem(productId) {
    this.items = this.items.filter(item => item.product.id !== productId);
  }
  
  getTotal() {
    return this.items.reduce((total, item) => total + item.getSubtotal(), 0);
  }
  
  displayCart() {
    console.log("购物车内容：");
    this.items.forEach(item => {
      console.log(`${item.product.name} - ¥${item.product.price} x ${item.quantity} = ¥${item.getSubtotal()}`);
    });
    console.log(`总计: ¥${this.getTotal()}`);
  }
}

// 使用示例
const laptop = new Product(1, "笔记本电脑", 5999);
const phone = new Product(2, "智能手机", 2999);
const headphones = new Product(3, "无线耳机", 999);

const cart = new ShoppingCart();
cart.addItem(laptop, 1);
cart.addItem(phone, 2);
cart.addItem(headphones, 1);
cart.displayCart();

// 添加更多商品
cart.addItem(phone, 1); // 增加1部手机
cart.displayCart();

// 移除商品
cart.removeItem(3); // 移除耳机
cart.displayCart();

输出结果：

购物车内容：
笔记本电脑 - ¥5999 x 1 = ¥5999
智能手机 - ¥2999 x 2 = ¥5998
无线耳机 - ¥999 x 1 = ¥999
总计: ¥12996

购物车内容：
笔记本电脑 - ¥5999 x 1 = ¥5999
智能手机 - ¥2999 x 3 = ¥8997
无线耳机 - ¥999 x 1 = ¥999
总计: ¥15995

购物车内容：
笔记本电脑 - ¥5999 x 1 = ¥5999
智能手机 - ¥2999 x 3 = ¥8997
总计: ¥14996

博客文章系统

javascript

class User {
  constructor(id, username, email) {
    this.id = id;
    this.username = username;
    this.email = email;
  }
}

class Comment {
  constructor(id, author, content, date) {
    this.id = id;
    this.author = author;
    this.content = content;
    this.date = date;
    this.likes = 0;
  }
  
  like() {
    this.likes++;
  }
  
  displayInfo() {
    return `${this.author.username} 发表于 ${this.date.toLocaleDateString()}: ${this.content} (点赞数: ${this.likes})`;
  }
}

class BlogPost {
  constructor(id, title, content, author) {
    this.id = id;
    this.title = title;
    this.content = content;
    this.author = author;
    this.comments = [];
    this.publishDate = new Date();
  }
  
  addComment(user, content) {
    const commentId = this.comments.length + 1;
    const comment = new Comment(commentId, user, content, new Date());
    this.comments.push(comment);
    return comment;
  }
  
  displayComments() {
    console.log(`《${this.title}》的评论:`);
    if (this.comments.length === 0) {
      console.log("暂无评论");
    } else {
      this.comments.forEach(comment => {
        console.log(`- ${comment.displayInfo()}`);
      });
    }
  }
  
  getSummary() {
    return {
      title: this.title,
      author: this.author.username,
      date: this.publishDate.toLocaleDateString(),
      commentsCount: this.comments.length
    };
  }
}

// 使用示例
const user1 = new User(1, "技术达人", "tech@example.com");
const user2 = new User(2, "编程爱好者", "code@example.com");
const user3 = new User(3, "学习者", "learner@example.com");

const blogPost = new BlogPost(
  1, 
  "JavaScript对象详解", 
  "本文将介绍JavaScript对象的创建方式和基本操作...", 
  user1
);

// 添加评论
const comment1 = blogPost.addComment(user2, "非常详细的讲解，学到很多！");
const comment2 = blogPost.addComment(user3, "请问对象字面量和构造函数哪个更好？");
comment1.like();
comment1.like();

// 显示博客信息
console.log(`博客标题: ${blogPost.title}`);
console.log(`作者: ${blogPost.author.username}`);
console.log(`发布日期: ${blogPost.publishDate.toLocaleDateString()}`);

// 显示评论
blogPost.displayComments();

// 添加新评论并回应
blogPost.addComment(user1, "谢谢支持！@学习者：这取决于具体场景，我在文章中有详细比较。");
blogPost.displayComments();

总结

JavaScript对象创建是前端开发中的基础概念，本文介绍了以下创建对象的方法：

1. 对象字面量 {}：最简单直接的方式
2. Object 构造函数：动态创建和扩展对象
3. 工厂函数：批量创建结构相似的对象
4. 构造函数：创建特定类型的对象实例
5. Object.create()：基于现有对象作为原型创建新对象
6. ES6类语法：更接近传统面向对象编程

每种方法都有其适用场景，作为开发者应该根据具体需要选择合适的对象创建方式。对象是JavaScript的核心概念，掌握如何有效创建和操作对象将大大提高你的前端开发能力。

练习题

1. 使用对象字面量创建一个描述电影的对象，包含标题、导演、上映年份和评分等信息，并添加一个返回完整电影信息的方法。

2. 使用构造函数创建一个Circle类，它应该有半径属性和计算面积与周长的方法。

3. 使用ES6类语法创建一个BankAccount类，它应该有账户持有人、余额属性，以及存款、取款和显示当前余额的方法。

扩展阅读

• MDN Web Docs: JavaScript对象基础
• MDN Web Docs: 使用对象
• JavaScript: 理解原型与原型链

通过深入学习对象创建的不同方式，你将能够在实际项目中更灵活地组织代码，创建可维护的、面向对象的应用程序。