JavaScript中的原型和原型链

给大家推荐一个实用面试题库

1、前端面试题库 （ 面试必备）推荐：★★★★★

地址：web前端面试题库

原型和原型链是JavaScript中一个重要且常常被误解的概念。它们在理解对象、继承和属性查找时扮演着关键的角色。

1. 原型：JavaScript对象的基础

在JavaScript中，几乎所有的对象都是通过构造函数（constructor）创建的。每个构造函数都有一个特殊的属性称为原型（prototype），它是一个对象，包含了构造函数的属性和方法。当我们创建一个对象时，它会继承构造函数的原型上的属性和方法。

1.1 构造函数和原型的关系

让我们通过一个示例来理解构造函数和原型之间的关系：

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

// 创建一个 Person 对象
const person1 = new Person('Alice', 25);

// 创建另一个 Person 对象
const person2 = new Person('Bob', 30);

console.log(person1.name); // 输出 'Alice'
console.log(person2.age);  // 输出 30

在上面的示例中，我们定义了一个 Person 构造函数，它有两个属性 name 和 age。然后，我们使用 new 关键字创建了两个 Person 对象 person1 和 person2。这两个对象继承了 Person 构造函数的属性。

1.2 对象的原型

每个JavaScript对象都有一个指向其原型的隐藏属性 [[Prototype]]（通常通过 __proto__ 访问）。这个原型对象是一个普通对象，它包含了对象的方法和属性。

让我们看一下 person1 对象的原型：

console.log(person1.__proto__); // 输出 Person {}

person1 的原型是一个空的对象，它实际上就是 Person 构造函数的原型。这意味着 person1 可以访问 Person 构造函数原型上的属性和方法。它们之间的关系可以用下图表示：

需要注意：constructor 是原型的一个属性。

1.3 属性查找过程

当我们访问一个对象的属性时，JavaScript 引擎会首先查找对象本身是否包含这个属性。如果对象没有这个属性，它会继续查找对象的原型，以及原型链上的其他原型，直到找到属性或查找到达原型链的末端。

让我们来看一个属性查找的例子：

console.log(person1.name); // 输出 'Alice'
console.log(person1.toString()); // 输出 '[object Object]'

在上面的示例中，当我们访问 person1 的 name 属性时，它首先查找 person1 对象本身，找到了属性 name 并输出 'Alice'。当我们调用 toString() 方法时，它查找 person1 对象本身没有这个方法，然后继续查找 Person 构造函数的原型，最终找到了 Object 构造函数的原型上的 toString() 方法。

2. 原型链：连接原型的链条

原型链是由一系列对象链接在一起的链条，用于实现属性和方法的继承。每个对象都有一个原型，这个原型又有自己的原型，以此类推，形成了原型链。原型链的终点是一个对象，它的原型为 null。

2.1 原型链的构建

让我们通过一个例子来构建原型链：

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

// Animal 的原型
Animal.prototype.eat = function() {
  console.log(`${this.name} is eating.`);
};

function Dog(name, breed) {
  // 调用 Animal 构造函数
  Animal.call(this, name);
  this.breed = breed;
}

// 建立原型链，使 Dog 继承 Animal
Dog.prototype = Object.create(Animal.prototype);

// Dog 的原型
Dog.prototype.bark = function() {
  console.log(`${this.name} is barking.`);
};

const myDog = new Dog('Buddy', 'Golden Retriever');

在上面的示例中，我们定义了一个 Animal 构造函数和一个 Dog 构造函数。然后，我们通过 Object.create() 来建立原型链，使 Dog 继承了 Animal。最后，我们创建了一个 myDog 对象。

2.2 属性和方法的继承

现在，myDog 对象继承了 Dog 构造函数和 Animal 构造函数的属性和方法。这意味着它可以访问 Dog 构造函数原型上的方法 bark，以及 Animal 构造函数原型上的方法 eat。

myDog.bark(); // 输出 'Buddy is barking.'
myDog.eat();  // 输出 'Buddy is eating.'

在上面的示例中，myDog 对象成功地继承了原型链上的属性和方法。

2.3 修改原型链上的方法

你还可以在继承的基础上修改原型链上的方法，以满足子类型的需求。

// 修改 Dog 原型上的方法
Dog.prototype.bark = function() {
  console.log(`${this.name} is barking loudly.`);
};

myDog.bark(); // 输出 'Buddy is barking loudly.'

在上面的示例中，我们修改了 Dog 构造函数原型上的 bark 方法，使其输出不同的消息。

2.4 原型链的终点

原型链的终点是一个对象，它的原型为 null。这个对象是所有对象原型链的顶层，没有任何属性或方法。

console.log(Object.getPrototypeOf(Object.prototype)); // 输出 null

在上面的示例中，我们使用 Object.getPrototypeOf() 方法来获取 Object.prototype 的原型，发现它的原型是 null。

3. JavaScript中的内置原型链

在JavaScript中，每个对象都继承自 Object 构造函数的原型。这意味着所有对象都具有一些通用的属性和方法，例如 toString()、valueOf() 等。

3.1 Object.prototype

所有对象的原型链的顶端都是 Object.prototype，它包含了一些通用的方法，例如 toString() 和 valueOf()。

const obj = {};
console.log(obj.toString()); // 输出 '[object Object]'

在上面的示例中，我们使用 obj 对象调用了 toString() 方法，这个方法实际上是从 Object.prototype 继承而来的。

3.2 Array.prototype

数组对象继承自 Array.prototype，这个原型包含了许多用于操作数组的方法，如 push()、pop()、forEach() 等。

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // 输出 5
numbers.push(6);
console.log(numbers); // 输出 [1, 2, 3, 4, 5, 6]

在上面的示例中，我们使用了 Array.prototype 上的方法来操作数组 numbers。

3.3 Function.prototype

所有函数对象继承自 Function.prototype，这个原型包含了一些用于函数的方法，如 call() 和 apply()。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet.call(null, 'Alice'); // 输出 'Hello, Alice!'

在上面的示例中，我们使用了 Function.prototype 上的 call() 方法来调用函数 greet。

4. 实际应用：原型和原型链的使用

原型和原型链在JavaScript中的实际应用非常广泛，它们是面向对象编程的基础，并且可以用于实现继承和共享方法。以下是一些实际应用的示例：

4.1 继承

通过构造函数和原型链，你可以实现对象之间的继承关系，创建子类型并继承父类型的属性和方法。

function Shape() {
  this.color = 'red';
}

Shape.prototype.getArea = function() {
  return 0;
};

function Circle(radius) {
  this.radius = radius;
}

// Circle 继承 Shape
Circle.prototype = Object.create(Shape.prototype);

// 添加 Circle 自己的方法
Circle.prototype.getArea = function() {
  return Math.PI * Math.pow(this.radius, 2);
};

const circle = new Circle(5);
console.log(circle.color);    // 输出 'red'，继承自 Shape
console.log(circle.getArea()); // 输出 78.53981633974483，来自 Circle

在上面的示例中，我们创建了一个 Shape 构造函数，它有一个 color 属性和一个 getArea() 方法。然后，我们创建了一个 Circle 构造函数，通过原型链实现了对 Shape 的继承，并添加了自己的 getArea() 方法。

4.2 对象的共享方法

通过将方法添加到原型上，可以实现多个对象之间共享方法，节省内存并提高性能。

function Car(make, model) {
  this.make = make;
  this.model = model;
}

// 将方法添加到 Car 构造函数的原型上
Car.prototype.start = function() {
  console.log(`Starting ${this.make} ${this.model}`);
};

const car1 = new Car('Toyota', 'Camry');
const car2 = new Car('Honda', 'Accord');

car1.start(); // 输出 'Starting Toyota Camry'
car2.start(); // 输出 'Starting Honda Accord'

在上面的示例中，我们将 start() 方法添加到 Car 构造函数的原型上，这意味着所有的 Car 对象都可以共享这个方法。

4.3 使用对象字面量创建对象

对象字面量是一种方便快捷的方式来创建对象，但它们实际上是通过原型链继承自 Object 构造函数的。

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

console.log(person.toString()); // 输出 '[object Object]'

在上面的示例中，person 对象是通过对象字面量创建的，它实际上继承了 Object.prototype 上的方法，包括 toString()。

5. 总结

原型和原型链是JavaScript中非常重要的概念，它们用于实现对象的继承和方法的共享。了解原型和原型链的工作原理对于理解JavaScript中的对象和继承非常关键。

总结一下：

• 原型是构造函数的属性，它包含了构造函数的方法和属性，被新创建的对象继承。
• 原型链是一系列对象链接在一起的链条，用于实现属性和方法的继承。
• 所有对象都有一个原型，它可以通过 __proto__ 或 Object.getPrototypeOf() 来访问。
• 原型链的顶端是 Object.prototype，它包含了一些通用的方法。
• 通过构造函数和原型链，可以实现对象之间的继承和方法的共享。

给大家推荐一个实用面试题库

1、前端面试题库 （ 面试必备）推荐：★★★★★

地址：web前端面试题库