理解 JavaScript 原型、原型链和继承，提升你的编码技巧

2023-12-12 13:14:08

JavaScript 原型、原型链和继承：深入解析与应用

1. JavaScript 原型

原型（prototype） 是 JavaScript 中一个非常重要的概念，它是一个对象，包含其他对象可以访问的属性和方法。每个 JavaScript 对象都拥有一个原型，可以通过对象.运算符访问。例如：

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

console.log(person.name); // "John Doe"
console.log(person.__proto__); // Object {constructor: ƒ}

person.__proto__ 是 person 对象的原型，它包含了一些通用的属性和方法，如 constructor 函数。通过原型，我们可以访问和使用这些通用的属性和方法。

2. 原型链

原型链（prototype chain） 是一个由原型对象组成的链条，每个对象都指向其原型，依次向上追溯直到 Object.prototype。Object.prototype 是所有 JavaScript 对象的祖先原型。例如：

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

const student = {
  school: "XYZ School",
};

student.__proto__ = person; // 设置 student 的原型为 person

console.log(student.name); // "John Doe"
console.log(student.age); // 30
console.log(student.school); // "XYZ School"
console.log(student.__proto__); // {name: "John Doe", age: 30}
console.log(student.__proto__.__proto__); // Object {constructor: ƒ}

在上面的示例中，student 对象的原型是 person 对象，而 person 对象的原型是 Object.prototype。因此，student 对象可以访问和使用 person 对象以及 Object.prototype 的属性和方法。

3. JavaScript 继承

继承（inheritance） 是面向对象编程中一种重要的概念，它允许一个对象从另一个对象继承属性和方法。在 JavaScript 中，可以通过函数原型实现继承。

函数原型 是一个函数的属性，它指向一个原型对象。函数原型中的属性和方法可以被该函数创建的对象继承。例如：

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

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

person.greet(); // "Hello, my name is John Doe and I am 30 years old."

在上面的示例中，Person 函数的原型是一个对象，包含了一个名为 greet 的方法。当使用 new 创建 person 对象时，person 对象会继承 Person 函数原型的属性和方法。因此，person 对象可以访问和使用 Person 函数原型中的 greet 方法。