JavaScript 原型链（Prototype Chain）

最新推荐文章于 2024-12-08 13:42:20 发布

Amo 6729

最新推荐文章于 2024-12-08 13:42:20 发布

阅读量966

点赞数 19

分类专栏： js 文章标签：原型模式 javascript 开发语言

本文链接：https://blog.csdn.net/print_2022/article/details/144190454

版权

js 专栏收录该内容

38 篇文章

订阅专栏

在 JavaScript 中，原型链（Prototype Chain）是对象继承的机制之一。它是通过对象的 prototype 属性实现的，允许一个对象继承另一个对象的属性和方法。每当你访问一个对象的属性或方法时，JavaScript 会按照原型链的顺序依次查找，直到找到该属性/方法，或者到达原型链的顶端 Object.prototype。

1. 原型（Prototype）概念

每个 JavaScript 函数在创建时都会有一个内部属性 prototype，这个属性指向一个对象，这个对象上包含了该构造函数实例可以继承的属性和方法。

当你通过构造函数创建一个新对象时，这个新对象会自动拥有一个 [[Prototype]] 内部属性（也可以通过 Object.getPrototypeOf() 获取），它指向构造函数的 prototype 对象。这个 [[Prototype]] 就是原型链的一部分。

2. 原型链的工作原理

当你访问对象的某个属性或方法时，JavaScript 引擎会先检查该对象本身是否有这个属性。如果没有，JavaScript 会查找该对象的原型（[[Prototype]]）。如果原型上没有这个属性，继续查找原型的原型，直到找到为止，或者最终到达 Object.prototype，如果还没有找到，则返回 undefined。

// 构造函数
function Person(name) {
  this.name = name;
}

// 在原型上添加方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

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

在这个例子中，p 对象没有 sayHello 方法，但它通过原型链继承了 Person.prototype 上的 sayHello 方法。原型链的查找过程如下：

查找 p 对象本身是否有 sayHello 方法（没有）。
查找 p.__proto__（即 Person.prototype）是否有 sayHello 方法（有）。

3. 原型链的构成

构造函数的 prototype：每个函数都有一个 prototype 属性，当该函数作为构造函数使用时，实例对象的 [[Prototype]] 就指向该构造函数的 prototype 属性。
Object.prototype：所有 JavaScript 对象的原型链的顶端是 Object.prototype。它包含了一些通用的方法，比如 toString() 和 hasOwnProperty()。

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

Animal.prototype.say = function() {
  console.log('I am an animal');
};

const animal = new Animal('Dog');

console.log(animal.__proto__ === Animal.prototype); // true
console.log(Animal.prototype.__proto__ === Object.prototype); // true
console.log(animal.__proto__.__proto__ === Object.prototype); // true

在上面的例子中，animal 的原型链是这样的：

animal.__proto__ 指向 Animal.prototype
Animal.prototype.__proto__ 指向 Object.prototype
Object.prototype.__proto__ 为 null，这是原型链的终点。

4. `proto` vs `prototype`

prototype 是构造函数的一个属性，指向该构造函数的原型对象。prototype 本身是一个对象，存储的是所有实例对象会继承的属性和方法。
__proto__ 是每个对象内部的一个指针，指向该对象的原型。通过 __proto__ 可以访问该对象的原型链。

5. 修改原型链

虽然 JavaScript 的原型链是自动构建的，但你可以手动操作对象的原型链来改变其继承结构。

通过 Object.create() 创建对象

Object.create() 方法可以创建一个新对象，并将指定对象作为新对象的原型。

const animal = {
  speak: function() {
    console.log("Animal speaks");
  }
};

const dog = Object.create(animal);
dog.speak(); // 输出: Animal speaks

2.通过 Object.setPrototypeOf() 修改对象的原型

Object.setPrototypeOf() 允许你动态修改一个对象的原型。

const person = {
  greet: function() {
    console.log("Hello!");
  }
};

const student = {};
Object.setPrototypeOf(student, person);
student.greet(); // 输出: Hello!