夯实JS基础 - 原型、原型链解析

前端

2023-12-13 14:09:51

「前端料包」深入理解JavaScript原型和原型链

前言

JavaScript中的原型和原型链是理解对象和继承的重要概念。没有透彻理解原型和原型链，就无法真正入门JavaScript。在本文中，我们将深入浅出地讲解原型和原型链，并提供清晰的示例帮助读者理解。

什么是原型

原型是JavaScript中一个特殊的对象，它为其他对象提供属性和方法。每个JavaScript对象都有一个原型对象，该对象可以通过Object.getPrototypeOf()方法获取。

原型对象通常是构造函数的prototype属性。构造函数是用来创建对象的函数。当我们使用构造函数创建对象时，该对象就会继承原型对象中的属性和方法。

什么是原型链

原型链是JavaScript中一个对象的属性和方法查找机制。当一个对象试图访问一个不存在的属性或方法时，JavaScript就会沿着原型链向上查找，直到找到该属性或方法。

原型链的顶端是Object.prototype对象，它是所有JavaScript对象的根原型。Object.prototype对象提供了一些基本的方法，例如toString()和valueOf()。

原型和原型链的作用

原型和原型链在JavaScript中发挥着重要的作用。它们使我们能够创建和使用对象，并允许对象继承其他对象的属性和方法。

原型和原型链还使我们能够在不修改现有对象的情况下向对象添加新属性和方法。

原型和原型链的示例

为了更好地理解原型和原型链，我们来看一个示例。

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

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

const person1 = new Person("John");
const person2 = new Person("Mary");

person1.sayHello(); // Hello, my name is John
person2.sayHello(); // Hello, my name is Mary

在这个示例中，Person函数是构造函数，它用来创建Person对象。Person.prototype对象是Person构造函数的原型对象。person1和person2是使用Person构造函数创建的两个对象。

当person1和person2调用sayHello()方法时，JavaScript会沿着原型链向上查找，直到找到sayHello()方法。sayHello()方法在Person.prototype对象中定义，因此JavaScript会在Person.prototype对象中找到该方法。