从对象到原型，再到继承：深入浅出地理解 JavaScript 的核心概念

JavaScript 中的对象

对象是一种数据类型，它可以存储一系列以键值对形式组织的数据。对象可以使用点运算符 (.) 来访问其属性，也可以使用方括号 ([]) 来访问其属性，可以通过以下方式创建对象：

const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

JavaScript 中的原型

原型是一个对象，它包含了另一个对象的属性和方法。当您访问一个对象的属性或方法时，JavaScript 首先会在该对象中查找该属性或方法。如果它找不到，它就会在对象的原型中查找。这允许您在对象之间共享属性和方法。

例如，以下代码创建了一个 person 对象，并为其添加了一个 greet() 方法：

const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York',
  greet: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

如果我们创建一个新的对象 student，并将其原型设置为 person，那么 student 对象将能够访问 person 对象的所有属性和方法，包括 greet() 方法。

const student = {
  name: 'Jane Doe',
  age: 20,
  city: 'Boston'
};

student.__proto__ = person;

student.greet(); // Hello, my name is Jane Doe

JavaScript 中的继承

继承允许您创建新对象，这些新对象从现有对象继承属性和方法。这可以使您在不重复代码的情况下轻松创建新的对象。

在 JavaScript 中，您可以使用 extends 来创建继承关系。例如，以下代码创建了一个 Student 类，它从 Person 类继承：

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

  greet() {
    console.log('Hello, my name is ' + this.name);
  }
}

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

  study() {
    console.log('I am studying at ' + this.school);
  }
}

const student = new Student('Jane Doe', 20, 'Boston', 'Harvard University');

student.greet(); // Hello, my name is Jane Doe
student.study(); // I am studying at Harvard University

结论

对象、原型和继承是 JavaScript 中的核心概念，它们对于创建动态和交互式 Web 应用程序至关重要。理解这些概念对于任何 JavaScript 开发人员来说都是必不可少的。