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

js原型和原型链

article 2024/12/25 7:45:50

1. 原型（Prototype）

每个 JavaScript 对象都有一个内部属性 [[Prototype]]，这个属性指向它的原型对象。原型对象本身也是一个对象，通常我们通过 prototype 属性来访问对象的原型。

例如：

函数的原型：
每个函数对象都有一个 prototype 属性，该属性指向一个对象，这个对象就是函数的原型。例如，Array 构造函数的原型对象包含了数组实例的方法，如 push、pop 等。

function MyConstructor() {}
console.log(MyConstructor.prototype);  // 输出：MyConstructor { constructor: ƒ }

2. 原型链（Prototype Chain）

原型链是通过对象的 [[Prototype]] 属性形成的一种链式结构。当我们访问一个对象的属性或方法时，JavaScript 会先在对象本身查找，如果没有找到，就会查找对象的原型（[[Prototype]]）。如果在原型中还没有找到，它会继续查找原型的原型，直到找到 null 为止。

对象的原型是另一个对象，这个对象也有自己的原型，依此类推，直到原型链的顶端，即 null。

3. 原型链的工作原理

当访问一个对象的属性时，JavaScript 会按照以下顺序查找：

如果对象本身有该属性，就直接返回该属性的值。
如果对象本身没有该属性，它会查找该对象的原型（即 [[Prototype]]）。
如果原型上没有该属性，它会继续查找原型的原型。
这一过程一直持续，直到找到该属性或达到原型链的顶端（即 null），如果都找不到，就返回 undefined。

4. 示例

让我们看一个简单的例子，理解原型链的概念：

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

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

function Dog(name) {
  Animal.call(this, name);  // 调用父类构造函数
}

Dog.prototype = Object.create(Animal.prototype);  // 继承Animal的原型
Dog.prototype.constructor = Dog;  // 修正构造函数指向

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

const dog = new Dog('Buddy');
dog.speak();  // 输出: Buddy makes a noise.
dog.bark();   // 输出: Buddy barks.

原型链分析：

dog 是一个 Dog 实例，它的原型是 Dog.prototype。
Dog.prototype 是通过 Object.create(Animal.prototype) 创建的，所以 dog 的原型链包含了 Animal.prototype。
dog 可以访问到 Animal.prototype 中的方法 speak，同时它也有自己的方法 bark。

在这个例子中，dog 会依次查找属性：

dog 是否有 speak 属性？没有。
dog 的原型链指向 Dog.prototype，Dog.prototype 上没有 speak。
Dog.prototype 的原型链指向 Animal.prototype，Animal.prototype 上有 speak，所以 dog.speak() 可以成功调用。