返回

原型与原型链:JavaScript 的基石

前端

原型是 JavaScript 中一个核心的概念,理解它对于掌握这门语言至关重要。它为对象提供了一个继承机制,使我们能够轻松地创建和扩展对象。

原型链是一个链接对象的链条,它决定了对象可以访问哪些属性和方法。每个对象都有一个指向其原型的指针,而原型又可以有自己的原型,以此类推。

构造函数和原型

构造函数是用来创建对象的蓝图。当我们使用 new 调用构造函数时,它会创建一个新的对象实例。这个实例对象具有一个 __proto__ 属性,该属性指向构造函数的 prototype 属性。

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

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

在这个示例中,Person 是构造函数,我们使用 new 创建了两个实例对象 person1person2person1person2__proto__ 属性都指向 Person.prototype 对象。

原型对象

原型对象包含了构造函数所有实例对象共享的属性和方法。我们可以通过构造函数的 prototype 属性访问原型对象。

console.log(Person.prototype); // {constructor: ƒ}

如上所示,Person 的原型对象只有一个属性 constructor,它指向构造函数本身。我们可以向原型对象添加我们想要所有实例对象共享的任何属性或方法。

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

现在,所有 Person 实例都可以访问 greet() 方法。

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

原型链

当我们访问一个对象的不存在于自身中的属性或方法时,JavaScript 会沿着原型链向上查找。如果在原型中找到了该属性或方法,则会返回该值。

console.log(person1.name); // John
console.log(person1.age); // undefined

person1.__proto__ === Person.prototype; // true

在这个示例中,person1 没有一个名为 age 的属性,但是它的原型 Person.prototype 有。因此,JavaScript 沿着原型链找到了 age 属性,并返回了 undefined

摘要

  • 原型是对象继承的基础,它为对象提供了一个共享属性和方法的机制。
  • 构造函数的 prototype 属性指向原型对象。
  • 原型链是一个对象的链条,它允许对象访问其原型中的属性和方法。
  • 当我们访问一个对象不存在的属性或方法时,JavaScript 会沿着原型链向上查找。