用两分钟了解 JavaScript 高级程序设计之理解对象

2024-02-03 13:13:47

对象的世界：深入浅出地了解 JavaScript 对象

在计算机科学的浩瀚海洋中，对象就像迷人的岛屿，它们容纳着代码世界的基础数据结构。在 JavaScript 中，对象扮演着至关重要的角色，是构建交互式和动态 web 应用的基石。在这篇综合指南中，我们将深入探讨 JavaScript 中对象的各个方面，从创建自定义对象到利用原型和类。

认识对象：属性的宝库

想象一下一个虚拟的皮革包，里面塞满了各种必需品，每个物品都整齐地放在特定的隔间中。这个包就是一个对象，每个隔间就是一个属性，存储着不同的值，就像姓名、年龄或职业。

创造你的定制对象：两种方法

创建自己的 JavaScript 对象就像定制一个独一无二的皮革包。您可以使用 Object() 构造函数，就像用皮革裁出包的形状，或使用字面量语法，就像亲手缝制隔间。两种方法都通向同样令人惊叹的结果。

方法 1：Object() 构造函数

let person = new Object();
person.name = "John Doe";
person.age = 30;

方法 2：字面量语法

let person = {
  name: "John Doe",
  age: 30
};

访问对象的属性：打开皮革包

要访问对象中的信息，就像拉开皮革包的拉链，您可以使用点号（.）或方括号（[]）。两者都能让您获取所需的物品（属性值）。

// 使用点号
let name = person.name;

// 使用方括号
let age = person["age"];

添加和删除属性：扩充和改造你的包

随着时间的推移，您可能需要添加更多物品到包中，或清除不再需要的物品。使用点号（.）或方括号（[]）可以轻松地实现这一点，就像重新整理皮革包一样。

// 添加属性
person.job = "Software Engineer";

// 删除属性
delete person.age;

对象方法：包中的工具

除了属性之外，对象还可以拥有方法，就像皮革包中用于特定任务的工具。方法是具有函数值的属性，可以执行各种操作。

let person = {
  name: "John Doe",
  age: 30,
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  }
};

// 调用方法
person.sayHello();

原型和原型链：继承的家族树

每个对象都有一个隐藏的家庭血统，称为原型，它就像一张家谱。原型也是一个对象，它包含了该对象继承的所有属性和方法。当对象无法找到所需的信息时，它会向上追溯到其原型。

let person = {
  name: "John Doe",
  age: 30
};

let employee = Object.create(person);
employee.job = "Software Engineer";

console.log(employee.name); // "John Doe"
console.log(employee.age); // 30
console.log(employee.job); // "Software Engineer"

类：对象的工厂

类就像大规模生产定制皮革包的工厂。它们提供了一个蓝图，可以创建具有相同属性和方法的多个对象。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log("Hello, my name is " + this.name);
  }
}

let person = new Person("John Doe", 30);

console.log(person.name); // "John Doe"
console.log(person.age); // 30
person.sayHello(); // "Hello, my name is John Doe"