JavaScript基础篇02：对象篇的构造函数、原型和继承背后的逻辑

2023-12-15 04:55:45

构造函数、原型和继承：JavaScript 对象的基础

引言

在 JavaScript 的广阔世界中，理解对象是至关重要的。对象允许我们存储数据并对其进行操作，它是构建复杂应用程序和网站的基础。在这篇文章中，我们将深入探讨构造函数、原型和继承，这三个概念是 JavaScript 对象的基础。

什么是构造函数？

构造函数 是创建对象实例的蓝图。它定义了对象应该具有的属性和方法。为了使用构造函数创建一个对象实例，我们使用 new 。

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

const person1 = new Person('John Doe', 30);

在这个例子中，Person 构造函数接收两个参数：name 和 age。当我们使用 new 关键字调用 Person 构造函数时，它会创建一个新对象实例，并将 name 和 age 参数的值分别分配给实例的 name 和 age 属性。

原型：对象的共享行为

每个对象都有一个原型，它是一个包含对象可以访问的所有属性和方法的对象。我们可以将原型看作是对象的父对象。当一个对象访问不存在的属性或方法时，它会自动在原型中查找。

const person1 = new Person('John Doe', 30);
console.log(person1.name); // John Doe

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}!`);
};

person1.greet(); // Hello, my name is John Doe!

在这个例子中，我们定义了一个 greet 方法并将其添加到 Person 原型的 greet 属性。现在，我们可以使用 greet 方法来访问每个 Person 实例的 name 属性。

继承：从父类到子类

继承允许我们创建新的类（子类），该类可以从另一个类（父类）继承属性和方法。子类可以访问父类的所有属性和方法，还可以定义自己的属性和方法。

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

  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
}

class Student extends Person {
  constructor(name, age, major) {
    super(name, age);
    this.major = major;
  }

  study() {
    console.log(`${this.name} is studying ${this.major}!`);
  }
}

const student1 = new Student('Jane Doe', 20, 'Computer Science');
student1.greet(); // Hello, my name is Jane Doe!
student1.study(); // Jane Doe is studying Computer Science!