js原型链，继承，new详解

2023-11-26 18:49:59

深入了解 JavaScript 原型、原型链和继承

在 JavaScript 中，对象是第一公民，而理解原型、原型链和继承对于构建强大且可维护的代码至关重要。让我们深入探讨这些概念，了解它们如何赋能 JavaScript 的对象系统。

原型：对象祖先

想象一下，每个 JavaScript 对象都有一个秘密导师，它就是原型。每个对象都从它的原型那里继承属性和方法，就好像它的祖先一样。这个原型对象本身也是一个对象，它可以有自己的原型，依此类推。

原型链：沿着祖先寻找

当我们访问对象的属性或方法时，JavaScript 会沿着一系列原型（称为原型链）进行搜索。首先，它会检查对象本身。如果找不到，它会检查对象的原型，然后是该原型的原型，直到找到该属性或方法，或者到达原型链的末尾（通常是 Object.prototype）。

继承：遗产传承

继承允许你从现有的对象（父对象）创建新的对象（子对象），子对象继承父对象的所有属性和方法。这类似于生物遗传，只不过是在 JavaScript 的对象世界中。

new 的魔力：创建新对象

当使用 new 调用函数时，JavaScript 会发生一些幕后魔法：

创建空对象： 它创建一个新的空对象。
设置原型： 空对象的原型被设置为构造函数的 prototype 属性。
执行构造函数： 构造函数的代码在此新对象上执行，初始化其属性和方法。
返回对象： 当构造函数执行完成时，这个新对象就被返回。

实例：用代码理解

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person1 = new Person('John', 30);
const person2 = new Person('Jane', 25);

person1.greet(); // Hello, my name is John and I am 30 years old.
person2.greet(); // Hello, my name is Jane and I am 25 years old.

在这个示例中，Person 构造函数创建一个 Person 对象，该对象的原型指向 Person.prototype 对象，其中包含 greet 方法。当创建 person1 和 person2 对象时，它们都继承了 Person.prototype 中的 greet 方法，并使用自己的 name 和 age 属性调用该方法。

总结：利用对象的力量

理解 JavaScript 中的原型、原型链和继承至关重要。它们使我们能够创建、管理和扩展对象，从而构建出健壮且高效的代码。

常见问题解答