返回

原型与原型链复习

前端

原型

在 JavaScript 中,每个函数都有一个特殊的属性,称为原型(prototype)。原型是一个对象,它包含其他对象可以访问的属性和方法。

显式原型

显式原型(prototype)是构造函数的原型对象。每个构造函数都有一个 prototype 属性,它指向一个对象。这个对象就是该构造函数的显式原型。

隐式原型

隐式原型(proto)是对象的原型对象。每个对象都有一个 proto 属性,它指向另一个对象。这个对象就是该对象的隐式原型。

原型链

原型链是一个对象到另一个对象的链。它从一个对象开始,然后沿着 proto 属性一直向下,直到找到一个对象没有 proto 属性为止。这个对象就是原型链的终点。

原型的妙用

原型可以用来扩展对象。我们可以向对象的原型添加属性和方法,从而让所有该对象的实例都可以访问这些属性和方法。

例如,我们可以向 Array.prototype 添加一个 remove() 方法,从而让所有数组都可以使用这个方法。

Array.prototype.remove = function(element) {
  const index = this.indexOf(element);
  if (index > -1) {
    this.splice(index, 1);
  }
};

现在,我们可以像这样使用 remove() 方法:

const array = [1, 2, 3, 4, 5];
array.remove(2);
console.log(array); // [1, 3, 4, 5]

用实例与您轻松说原型

为了更好地理解原型和原型链,我们来看一个简单的例子。

我们有一个 Person 构造函数,它有两个属性:name 和 age。

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

现在,我们创建一个 Person 实例。

const person = new Person('John', 30);

我们可以通过 person 的 name 和 age 属性来访问 person 的 name 和 age 值。

console.log(person.name); // John
console.log(person.age); // 30

我们也可以通过 person 的 proto 属性来访问 Person.prototype。

console.log(person.__proto__); // Person {}

Person.prototype 是一个对象,它包含所有 Person 实例都可以访问的属性和方法。

例如,Person.prototype 有一个 toString() 方法,它可以用来返回一个对象的字符串表示。

console.log(person.toString()); // John, 30

原型和原型链是一个复杂的概念,但它们对理解 JavaScript 的工作原理非常重要。我希望这篇文章能帮助您更好地理解原型和原型链。