JavaScript 原型和原型链：深入浅出修炼内功

2024-02-08 02:54:43

从原型到原型链，修炼 JavaScript 内功这篇文章真的不能错过！

原型和原型链是 JavaScript 中至关重要的概念，对于初级和中级前端开发人员来说，理解它们至关重要。在这篇文章中，我们将深入探讨原型和原型链，帮助你修炼 JavaScript 内功。

原型和构造函数

在 JavaScript 中，每个对象都有一个原型，原型是一个包含属性和方法的对象。当我们使用 new 创建一个对象时，JavaScript 会创建一个新的对象，并将该对象的原型设置为构造函数的 prototype 属性。

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

const person = new Person('John Doe');
console.log(person.__proto__ === Person.prototype); // true

原型链

每个对象都有一个内部属性 [[Prototype]]，它指向该对象的原型。如果对象的属性或方法不存在，JavaScript 将沿着原型链查找，直到找到该属性或方法。

const person = new Person('John Doe');
person.getName(); // "John Doe"

在上面的示例中，getName() 方法不存在于 person 对象中，因此 JavaScript 将沿着原型链查找，最终在 Person.prototype 中找到该方法。

this 指向

this 关键字引用当前执行上下文中的对象。在普通函数中，this 指向全局对象（通常是 window 对象）。在方法中，this 指向当前对象。

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

const person = new Person('John Doe');
console.log(person.getName()); // "John Doe"

在上面的示例中，this 在 getName() 方法中指向 person 对象，因此我们可以访问对象的 name 属性。

修改原型

我们可以修改对象的原型，添加或删除属性和方法。例如，我们可以向 Person.prototype 添加一个 greet() 方法：

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

const person = new Person('John Doe');
person.greet(); // "Hello, my name is John Doe"