深入理解JavaScript中的原型与原型链

在JavaScript中，每个对象都有一个称为原型（prototype）的内部属性，它指向另一个对象。而这个被指向的对象恰好也具有一个自己的原型，这样就形成了一个原型链。

原型

我们可以通过Object.create()来创建一个拥有指定原型的新对象。例如：

const parent = {
  name: 'John',
  greet() {
    console.log(`Hello, ${this.name}!`)
  }
}

const child = Object.create(parent);

在上述例子中，child对象通过Object.create(parent)的方式创建。这样，child对象的原型就指向了parent对象，因此child对象可以继承parent对象的属性和方法。

原型是JavaScript中实现继承的基础，并且它在对象之间形成了一条链，即原型链。

原型链

原型链是由一系列对象组成的，每个对象都有一个指向其原型的指针。这个指针就是__proto__。通过__proto__我们可以访问对象的原型。例如：

console.log(child.__proto__ === parent);  // true

在上述例子中，child对象的__proto__指向了parent对象。

而parent对象也有自己的原型，它是Object.prototype。也就是说，parent对象实际上是由Object构造函数创建的。因此，Object.prototype就是parent对象的原型。

继续往上，Object.prototype的原型是null。null是原型链的顶端。

继承与原型链

由原型链的机制可知，子对象可以通过原型链继承父对象的属性和方法。例如：

child.greet();  // Hello, John!

在上述例子中，child对象通过原型链继承了greet方法，从而可以调用这个方法。

原型链的继承是一种非常强大的方式，它使得我们可以在JavaScript中实现复杂的继承关系。

构造函数与原型链

在JavaScript中，构造函数也是对象。每个构造函数都有一个原型。当使用new关键字创建一个实例时，这个实例就会继承构造函数的原型。

例如：

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

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

const person = new Person('John');
person.greet();  // Hello, John

在上述例子中，Person.prototype就是person对象的原型。通过原型链，person对象继承了greet方法。

总结

原型和原型链是JavaScript中一个重要的概念，它们使得对象之间可以通过继承产生联系，实现了一种灵活且可扩展的代码复用机制。

通过深入理解JavaScript中的原型与原型链，我们可以更好地理解JavaScript的面向对象特性，并更好地应用和扩展JavaScript中的对象模型。

本文来自极简博客，作者：数字化生活设计师，转载请注明原文链接：深入理解JavaScript中的原型与原型链