【前端八股文】原型和原型链_哔哩哔哩_bilibili

JavaScript 中的原型和原型链是理解其对象系统的关键概念。下面分别解释这两个概念及它们之间的关系：

原型 (Prototype)

在 JavaScript 中，每一个对象都有一个称为原型（prototype）的内部属性，它是对另一个对象的引用。这个引用的对象包含了可以由原对象共享的属性和方法。这意味着对象可以继承其原型对象的属性和方法。

构造函数也有一个重要的属性叫做 prototype。这不是实例的原型，而是实例的原型的原型。换句话说，当你使用构造函数创建一个新对象时，新对象的内部原型指向构造函数的 prototype 属性。

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

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

const alice = new Person('Alice');
alice.sayHello(); // 输出: Hello, my name is Alice

在这个例子中，alice 对象的原型是 Person.prototype，所以 alice 可以访问 sayHello 方法。

原型链 (Prototype Chain)

原型链是一种机制，使得一个对象可以访问不直接属于它的属性或方法。当你尝试访问一个对象的属性或方法时，如果这个对象本身没有这个属性或方法，JavaScript 会尝试在对象的原型上找这个属性或方法。如果原型上也没有，它会继续在原型的原型上查找，依此类推，直到找到属性或方法，或者到达原型链的末端。原型链的末端通常是 Object.prototype。如果在原型链上没有找到指定的属性或方法，就会返回 undefined。

这个机制允许对象共享方法和属性，极大地节省了内存，因为这些方法不需要在每个对象实例中重新定义。

举个例子：

// 定义构造函数
function Animal(name) {
    this.name = name;
}
// 向 Animal 的原型添加方法
Animal.prototype.getName = function() {
    return this.name;
};

// 创建一个新的 Animal 实例
const dog = new Animal('Rex');

console.log(dog.getName()); // Rex
console.log(dog.toString()); // [object Object]

在这个例子中，dog 实例可以访问由 Animal 构造函数的 prototype 属性提供的 getName 方法。当我们调用 dog.toString() 方法时，虽然 Animal.prototype 上没有定义这个方法，但是通过原型链，JavaScript 找到了 Object.prototype.toString 方法，因为 Animal.prototype 的原型是 Object.prototype。

原型链是 JavaScript 实现继承和共享方法的基础机制，是理解和使用 JavaScript 对象的核心概念之一。

Untitled