剖析 JavaScript 原型和继承，领略面向对象编程的奥妙

2023-10-10 12:28:48

JavaScript 原型与继承的奥秘

在 JavaScript 中，原型和继承是面向对象编程的两大基石。理解这两大概念对于提升 JavaScript 编程能力至关重要。本文将深入剖析 JavaScript 原型和继承的精髓，带您领略面向对象编程的奥妙。

原型对象与 proto

JavaScript 中的每个函数都有一个特殊的属性——prototype，称为函数的原型对象。原型对象中又有一个叫做constructor的属性，指向这个函数本身。

例如：

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

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

const person1 = new Person('John Doe');
person1.greet(); // Output: "Hello, my name is John Doe"

在这个例子中，Person.prototype 是 Person 函数的原型对象。原型对象中定义了一个名为 greet 的方法，用于向世界打招呼。当我们使用 new 创建 person1 实例时，会创建一个新对象，该对象的 proto 属性指向 Person.prototype。这意味着 person1 可以访问 Person.prototype 中定义的所有方法和属性。

原型链

JavaScript 中的对象形成一个原型链，通过 proto 属性将对象连接起来。每个对象都有一个 proto 属性，指向其原型对象。原型对象又有自己的 proto 属性，指向其原型对象，依此类推，直到到达最顶层的 Object.prototype 对象。

原型链允许对象继承其原型对象中的方法和属性。例如，在上面的例子中，person1 可以访问 Person.prototype 中定义的 greet 方法，因为 person1 的 proto 属性指向 Person.prototype。

继承

在 JavaScript 中，可以使用原型链来实现继承。子类型可以通过继承父类型来获取父类型的方法和属性。

例如：

function Student(name, major) {
  Person.call(this, name);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

const student1 = new Student('Jane Doe', 'Computer Science');
student1.greet(); // Output: "Hello, my name is Jane Doe"
console.log(student1.major); // Output: "Computer Science"

在这个例子中，Student 函数继承了 Person 函数。Student.prototype 被设置为 Object.create(Person.prototype)，这意味着 Student.prototype.proto 指向 Person.prototype。这使得 Student.prototype 可以访问 Person.prototype 中定义的所有方法和属性。