理解JavaScript的对象原型和原型链：图文并茂的指南

2023-11-28 05:04:41

在JavaScript中，对象原型（prototype）和原型链（prototype chain）是两个非常重要的概念，它们共同构成了JavaScript的原型系统。了解这两个概念对于理解JavaScript的面向对象编程至关重要。

对象原型

每个JavaScript对象都有一个prototype属性，该属性指向该对象的原型对象。原型对象是一个普通的JavaScript对象，它包含了一些属性和方法，这些属性和方法可以被该对象及其所有后代对象所继承。

例如，以下代码创建了一个名为Person的构造函数：

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

Person构造函数的prototype属性指向一个Person.prototype对象，该对象包含了一些属性和方法，如：

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

greet方法可以被所有Person对象及其后代对象所调用。例如，以下代码创建了一个Person对象，并调用其greet方法：

const person = new Person('John', 30);
person.greet(); // Hello, my name is John and I am 30 years old.

原型链

原型链是指从一个对象到其原型对象，再到原型对象的原型对象，依此类推，直到遇到null为止的一系列对象。

当一个对象试图访问一个不存在的属性或方法时，JavaScript引擎会沿着原型链向上查找，直到找到该属性或方法为止。如果在原型链的末端都找不到该属性或方法，则会返回undefined。

例如，以下代码尝试访问person对象的gender属性，但gender属性并不存在于person对象中：

console.log(person.gender); // undefined

JavaScript引擎会沿着原型链向上查找，它首先检查Person.prototype对象，但gender属性也不存在于Person.prototype对象中。因此，JavaScript引擎会继续向上查找，直到遇到Object.prototype对象，但gender属性仍然不存在。最终，JavaScript引擎会返回undefined。

this

this关键字在JavaScript中是一个非常重要的概念，它指向当前正在执行的函数所属的对象。this关键字可以用于访问当前对象及其原型对象中的属性和方法。

例如，以下代码使用this关键字来访问person对象的name和age属性：

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

函数

在JavaScript中，函数也是对象，它们具有prototype属性。函数的prototype属性指向一个Function.prototype对象，该对象包含了一些属性和方法，如：

Function.prototype.call = function(context, ...args) {
  // ...
};

Function.prototype.apply = function(context, args) {
  // ...
};

Function.prototype.bind = function(context, ...args) {
  // ...
};

这些属性和方法可以被所有函数对象及其后代对象所调用。例如，以下代码使用call方法来调用person对象的greet方法：

Person.prototype.greet.call(person); // Hello, my name is John and I am 30 years old.

构造函数

构造函数是一种特殊的函数，它用于创建新对象。构造函数的prototype属性指向一个构造函数的prototype对象，该对象包含了一些属性和方法，这些属性和方法可以被该构造函数创建的所有对象所继承。

例如，Person构造函数的prototype对象包含一个greet方法，该方法可以被所有Person对象及其后代对象所调用。

继承

在JavaScript中，继承是指一个对象从另一个对象获取属性和方法的能力。JavaScript中的继承可以通过原型链来实现。

例如，以下代码创建了一个Student构造函数，该构造函数继承了Person构造函数：

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

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