JavaScript 对象、原型 Prototype 及继承的妙用

2024-01-01 10:21:03

在软件开发中，理解 JavaScript 的对象、原型和继承对于构建健壮且可维护的应用程序至关重要。这三个概念是面向对象编程 (OOP) 的基础，使开发人员能够创建可重用和可扩展的代码。

对象 (Object)

对象是具有属性（字段）和行为（方法）的实体。它封装了数据并提供了操作这些数据的函数。在 JavaScript 中，对象是使用花括号 ({}) 定义的，属性和方法使用冒号 (:) 分隔。例如：

const person = {
  name: "John Doe",
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

在这个例子中，person 对象具有 name 和 age 两个属性，以及一个 greet 方法。我们可以通过属性名访问对象属性，并通过方法名调用对象方法。

原型 (Prototype)

原型是用于创建新对象的模板。它定义了对象的属性和方法，这些属性和方法将被所有从该原型创建的新对象所继承。在 JavaScript 中，原型是通过 prototype 属性访问的。例如：

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

// 为 Person 原型添加 greet 方法
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

// 创建一个新的 Person 对象
const person1 = new Person("John Doe", 30);

// 调用 greet 方法
person1.greet(); // 输出: "Hello, my name is John Doe"

在这个例子中，Person 函数创建了 Person 对象的原型。然后，我们使用 prototype 属性为原型添加了一个 greet 方法。当我们使用 new 创建一个新的 Person 对象时，该对象将继承原型中定义的属性和方法。

继承 (Inheritance)

继承允许一个对象从另一个对象中获取属性和方法。在 JavaScript 中，继承是通过原型链实现的。当一个对象从另一个对象继承时，它会将该对象的原型作为自己的原型。这使得子对象可以访问和使用父对象的属性和方法。例如：

function Employee(name, age, salary) {
  Person.call(this, name, age); // 调用父类构造函数
  this.salary = salary;
}

// 设置 Employee 原型为 Person 原型
Employee.prototype = Object.create(Person.prototype);

// 为 Employee 原型添加工作方法
Employee.prototype.work = function() {
  console.log(`I'm working!`);
};

// 创建一个新的 Employee 对象
const employee1 = new Employee("Jane Doe", 35, 100000);

// 调用工作方法
employee1.work(); // 输出: "I'm working!"

在这个例子中，Employee 函数创建了 Employee 对象的原型。然后，我们使用 Object.create() 方法将 Person 原型设置为 Employee 原型的父原型。这使得 Employee 对象可以访问和使用 Person 原型中的属性和方法。当我们使用 new 关键字创建一个新的 Employee 对象时，该对象将继承 Person 原型和 Employee 原型中定义的属性和方法。