JS：原型和原型链

原型 和 原型链 是 JavaScript 中实现继承和共享属性的核心机制。
理解 [[Prototype]]、prototype 和 constructor 的关系，是掌握 JavaScript 面向对象编程的关键。

1. 对象的 [[Prototype]] 属性

• 每个对象（对象实例）都有一个内部属性 [[Prototype]]，默认指向一个对象。
• 这个对象（称为原型对象），它包含可以由该函数创建的所有实例共享的属性和方法。
• 这个 [[Prototype]] 属性可以通过 Object.getPrototypeOf(obj) 或 obj.__proto__ 访问。
• 如果对象是通过字面量创建的，[[Prototype]] 默认指向 Object.prototype。

示例：

const obj = {};
console.log(Object.getPrototypeOf(obj) === Object.prototype); // 输出: true
console.log(obj.__proto__ === Object.prototype); // 输出: true

2. new 关键字和构造函数

• 当使用 new 关键字调用构造函数时，会创建一个新的对象。

• 这个新对象的 [[Prototype]] 属性会被设置为构造函数的 prototype 属性指向的对象。

示例：

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

const alice = new Person('Alice');
console.log(Object.getPrototypeOf(alice) === Person.prototype); // 输出: true
console.log(alice.__proto__ === Person.prototype); // 输出: true

• 解释：

  • alice 是通过 new Person() 创建的对象。

  • alice 的 [[Prototype]] 属性指向 Person.prototype。

3. 函数的 prototype 属性

• 每个函数都有一个 prototype 属性，这个属性是一个对象，这个对象是实例的原型

• 这个 prototype 对象有一个 constructor 属性，指向函数本身。

示例：

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

console.log(Person.prototype.constructor === Person); // 输出: true

• 解释：

  • Person.prototype 是一个对象，它的 constructor 属性指向 Person 函数本身。

4. 原型链

• 当访问对象的属性或方法时，如果对象本身没有该属性或方法，JavaScript 会沿着 [[Prototype]] 链向上查找，直到找到该属性或方法，或者到达原型链的尽头（null）。

示例：

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

// 在 Person.prototype 上添加方法
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 方法，但它的 [[Prototype]] 指向 Person.prototype，而 Person.prototype 上有 sayHello 方法。

  • 因此，alice 可以调用 sayHello 方法。

5. 原型链的尽头

• 原型链的尽头是 null。

• Object.prototype 是大多数对象的原型链的终点，它的 [[Prototype]] 是 null。

示例：

console.log(Object.getPrototypeOf(Object.prototype)); // 输出: null

总结

1. [[Prototype]]：

   • 每个对象都有一个 [[Prototype]] 属性，指向它的原型对象。

   • 默认情况下，对象的 [[Prototype]] 指向 Object.prototype。

2. new 关键字：

   • 使用 new 关键字调用构造函数时，新对象的 [[Prototype]] 会被设置为构造函数的 prototype 属性指向的对象。

3. 函数的 prototype 属性：

   • 每个函数都有一个 prototype 属性，指向一个对象。

   • 这个对象的 constructor 属性指向函数本身。

4. 原型链：

   • 当访问对象的属性或方法时，JavaScript 会沿着 [[Prototype]] 链向上查找，直到找到该属性或方法，或者到达 null。

图示原型链

以下是一个简单的原型链图示：

alice (实例对象)
  |
  | [[Prototype]]
  v
Person.prototype
  |
  | [[Prototype]]
  v
Object.prototype
  |
  | [[Prototype]]
  v
null

• alice 是 Person 的实例，它的 [[Prototype]] 指向 Person.prototype。

• Person.prototype 的 [[Prototype]] 指向 Object.prototype。

• Object.prototype 的 [[Prototype]] 指向 null。

示例代码

以下是一个完整的示例，展示原型链的工作原理：

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

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

const alice = new Person('Alice');

// 访问属性和方法
console.log(alice.name); // 输出: Alice
alice.sayHello(); // 输出: Hello, my name is Alice

// 检查原型链
console.log(Object.getPrototypeOf(alice) === Person.prototype); // 输出: true
console.log(Object.getPrototypeOf(Person.prototype) === Object.prototype); // 输出: true
console.log(Object.getPrototypeOf(Object.prototype) === null); // 输出: true

示例图

// 把这个代码中的原型链绘制出来，绘制到null为止

class Fruit { }

class Apple extends Fruit { }

class Grape extends Fruit { }

class Hongfushi extends Apple { }

const apple = new Apple();