一文搞懂JavaScript中原型与原型链

在JavaScript中，每个对象都有一个原型对象，这个对象可以拥有自身的属性和方法，并且还可以指向另一个原型对象，称为原型链。理解原型和原型链的概念，对于JavaScript的面向对象编程是非常重要的。在本文中，我们将详细讲解JavaScript中原型和原型链的概念及其实现方式。

原型

在JavaScript中，每个对象都有一个原型对象。原型对象可以为对象提供“继承”功能。我们可以通过使用Object.create()方法创建一个对象的原型对象：

const Person = function(name, age) {
  this.name = name;
  this.age = age;
};
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`);
};
const person1 = new Person("John Doe", 30);
person1.sayHello(); // 输出"Hello, my name is John Doe."

在这个例子中，我们使用了构造函数Person创建了一个Person对象，然后我们在Person.prototype上添加了sayHello方法。这个sayHello方法被person1对象所继承，在person1对象上调用sayHello方法时，将输出“Hello, my name is John Doe.”。

原型链

JavaScript中的对象可以指向一个原型对象，这个原型对象也可以指向另外一个原型对象。这样一直层层链接下去，便形成了原型链。

在JavaScript中，每个对象都有一个原型对象。当我们尝试访问一个对象的属性时，会首先在这个对象本身的属性中查找，如果找不到，就会去它的原型对象中查找。如果还找不到，就会一直顺着原型链向上查找，直到到达一个原型对象为止（通常是Object.prototype）。

让我们来看一个示例：

function TriAngle() {}
TriAngle.prototype.sides = 3;

function Equilateral() {}
Equilateral.prototype = Object.create(TriAngle.prototype);

const equi = new Equilateral();
console.log(equi.sides); // 输出3

在这个例子中，我们定义了两个构造函数TriAngle和Equilateral。TriAngle定义了一个属性sides，值为3。Equilateral对象通过使用Object.create()从TriAngle对象中创建了一个原型对象。最后我们创建了一个新的equi对象，并打印它的sides属性。

在这个示例中，我们通过原型链，从Equilateral对象中找到了TriAngle对象中的sides属性。这是因为在Equilateral对象中没有sides属性，所以在原型链中继续向上查找，找到了TriAngle对象。

总结

本文我们讲解了JavaScript中原型和原型链的概念及其实现方式。在JavaScript中，每个对象都有一个原型对象，原型对象可以为对象提供“继承”功能。原型链则是JavaScript中实现继承的方式之一，通过原型链可以访问一个对象的原型对象。