当前位置：首页 > article >正文

JavaScript原型和原型链

article 2025/2/23 23:06:15

在JavaScript中，原型（Prototype）和原型链（Prototype Chain）是实现继承和共享属性的关键机制。

原型（Prototype）

每个JavaScript对象都有一个内部属性 [[Prototype]]，它指向另一个对象或 null。这个被指向的对象就是原对象的原型。可以通过 Object.getPrototypeOf() 方法来获取一个对象的原型，或者通过对象的 __proto__ 属性（虽然不推荐在生产环境中使用，每个 JavaScript 对象（除了 null）都自动拥有一个隐藏的属性 __proto__，它指向该对象的原型对象。这个 __proto__ 是实现继承的关键）。

原型的主要作用是提供属性和方法的共享。当一个对象试图访问一个属性或方法时，JavaScript引擎首先会在对象自身的属性中查找。如果找不到，它会继续在对象的原型中查找。如果在原型中找到了，可以直接使用。如果没有找到，引擎会继续在原型的原型中查找，直到找到或者到达原型链的顶端（即 null）。

构造函数与原型

在JavaScript中，构造函数（Constructor Function）用于创建对象。当你使用构造函数创建对象时，新对象会自动拥有该构造函数的 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 对象没有 sayHello 方法，但它可以调用，因为这个方法是在 Person.prototype 上定义的，而 alice 的原型就是 Person.prototype。

原型链（Prototype Chain）

原型链指的是构造函数的 prototype 对象本身也有一个 [[Prototype]] 属性，指向另一个对象，这样就形成了一个链式结构。当在某个对象上查找属性或方法时，会沿着这个链子一直向上查找，直到找到或者到达链的顶端（null）为止。

原型链的顶端通常是 Object.prototype，它是所有对象的最终原型，包含了一些基本的方法和属性，如 toString()、valueOf() 等。

示例

假设我们有以下代码：

function Animal() {
    this.type = 'animal';
}

Animal.prototype.speak = function() {
    console.log(this.type + ' makes a noise.');
};

function Dog() {
    this.name = 'dog';
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
    console.log(this.name + ' barks.');
};

const dog = new Dog();
dog.speak(); // 输出 "dog barks."

在这个例子中，Dog.prototype 是通过 Object.create(Animal.prototype) 创建的，这使得 Dog.prototype 的原型指向 Animal.prototype，从而形成了一条原型链。dog 对象首先在其自身和 Dog.prototype 上查找 speak 方法，找到后就调用 Dog.prototype.speak。如果 Dog.prototype 上没有定义 speak 方法，那么 JavaScript 会继续沿着原型链向上查找，直到找到 speak 方法或者到达链的顶端。