JS：原型与原型链（附带图解与代码）

news2024/9/29 19:31:37

一、原型

写在前面：

任何对象都有原型。

函数也是对象，所以函数也有原型。

1.什么是原型

在 JavaScript 中，对象有一个特殊的隐藏属性 [[Prototype]]，它要么为 null，要么就是对另一个对象的引用，该对象被称为“原型”。所以，被 [[Prototype]] 链接所引用的对象就是该对象的“原型”。

我们可以通过Object.getPrototypeOf/Object.setPrototypeOf（推荐写法）或者是__proto__去设置原型，__proto__ 是 [[Prototype]] 的 getter/setter，我们可以用Object.getPrototypeOf/Object.setPrototypeOf 来取代 __proto__ 去 get/set 原型，也可以继续使用__proto__去访问原型。

例如，在下面的示例中，通过Object.create()将对象b的原型设置为a，实现原型式继承，此时对象a就是对象b的原型。

    const a = {
      name: "小王",
    };
    // Object.create()是一个静态方法，它创建一个新对象，使用现有的对象作为新创建的对象的proto。
    // 在这个例子中，我们使用对象a作为原型来创建新对象b。这意味着b的原型是a`。
    const b = Object.create(a);
    // Object.getPrototypeOf()方法返回指定对象的原型（即内部[[Prototype]]属性的值）。
    console.log(Object.getPrototypeOf(b));//{name: '小王'}
    // proto是一个非标准的属性，但在许多环境中都可用，它提供了对对象原型的直接访问。这里，b.__proto__也返回a，即{name: '小王'}`。
    console.log(b.__proto__);//{name: '小王'}
    console.log(a); //{name: '小王'}
    console.log(b.name); //小王

图像示例：

2.原型的作用

实现继承：原型链是JavaScript中实现对象继承的主要机制。当一个对象试图访问一个属性时，如果它自身没有这个属性，JavaScript会在它的原型链上查找这个属性，直到找到这个属性或者到达链的尽头（null）。通过这种方式，原型允许对象继承其他对象的属性和方法。
共享属性和方法：通过原型，我们可以定义对象的共享属性和方法。这意味着所有对象实例都可以访问和修改这些属性和方法。这在创建大量具有相同属性和方法的对象时非常有用，因为它可以避免在每个对象实例中重复定义这些属性和方法。
动态修改和扩展：由于原型是一个对象，我们可以在运行时动态地修改和扩展它。这允许我们在不修改原始构造函数的情况下，为所有对象实例添加新的属性和方法。这种灵活性使得原型成为JavaScript中一个非常强大的工具。
代码重用和模块化：通过创建具有特定原型的对象，我们可以实现代码的重用和模块化。这有助于降低代码的复杂性，提高代码的可读性和可维护性。

二、原型链

直接上图:

原型链图

讲解：

1.构造函数

构造函数是一种特殊的函数，通常用于初始化新创建的对象实例。每个构造函数都有一个prototype属性，这个属性是一个指针，指向一个对象（原型对象），该对象的用途是包含可以由特定类型的所有实例共享的属性和方法。当访问一个对象的属性时，如果这个对象自身没有这个属性，JavaScript会查找这个对象的原型（即[[Prototype]]指向的对象），以此类推，直到找到这个属性或者到达原型链的尽头（null）。我们可以使用new关键字来调用一个构造函数，它会创建一个新的空对象，然后将这个新对象的内部链接（[[Prototype]]）指向构造函数的prototype属性所引用的对象。构造函数的实例和构造函数的原型对象有一个constructor属性指向构造函数。在上面原型链图中，因为对象b继承了实例a，所以b.constructor也指向构造函数A。当然，构造函数也是一个对象，所以它也有原型，通常是Function.prototype。

2.`Object.prototype和Function.prototype`

Object.prototype是所有JavaScript对象（除了null）的原型。换句话说，几乎所有的对象都会从Object.prototype继承属性和方法，比如.toString(), .hasOwnProperty(), 和 .constructor等。

Function.prototype是所有函数的原型，包括那些被用作构造函数的函数。这意味着所有的函数都会从Function.prototype继承属性和方法，如.apply(), .call(), 和 .bind()等。

所以在查找原型时，在null之前函数会找到Function.prototype,所有对象都会找到Object.prototype。

3.理解原型链

原型链是一种实现继承的机制。在上面的原型链图可以看出，通过把一个对象的原型指向另一个对象，可以让这个对象访问另一个对象的属性，最终形成了一个链条一样的结构。在原型链中查找属性或方法时，JavaScript 会从当前对象开始，沿着原型链（即 __proto__ 链）向上查找，直到找到相应的属性或方法或直到到达 Object.prototype 的原型（即 null）。如果找不到，则返回 undefined。

4.代码展示

希望下面的代码可以帮你理解上面的原型链图。

<script>
    function A() {
      this.name = "a";
    }
    A.prototype.say = function () {
      return "hello";
    };
    const a = new A();
    const b = Object.create(a);
    const c = Object.create(b);

    console.log(c.say()); //hello,因为c.__proto__指向b，b.__proto__指向a，所以c可以访问到a的原型链上的方法
    console.log(c.name); //a,因为c.__proto__指向b，b.__proto__指向a，所以c可以访问到a的原型链上的属性
    console.log(c.age); //undefined,因为在原型链上没找到age属性
    console.log(c.__proto__.__proto__.__proto__.__proto__.__proto__); //null
    console.log(A.prototype === a.__proto__); //true,它们指向同一个原型对象
    console.log(c.__proto__); //A {}
    console.log(b.__proto__); //A {}
    console.log(c === b); //false,c和b的原型链长度是不一样的，也就是说{}展开的内容是不一样的
  </script>