JavaScript 原型

JavaScript 的原型（Prototype）是其面向对象编程模型的核心概念之一，它决定了对象如何继承属性和方法。通过理解 JavaScript 的原型，你可以更好地理解对象之间的关系以及如何扩展对象功能。

核心概念

1. [[Prototype]]（内部属性）

   • 每个 JavaScript 对象都有一个隐藏的内部属性，称为 [[Prototype]]。
   • 这个属性通常指向另一个对象，也就是该对象的原型。

2. Object.prototype

   • 所有普通对象都最终继承自 Object.prototype，除非手动更改。
   • Object.prototype 是原型链的顶端，它的 [[Prototype]] 为 null。

3. __proto__

   • 这是一些浏览器（如 Chrome 和 Firefox）中提供的访问 [[Prototype]] 的非标准方式。
   • 它主要用于调试，不推荐在实际代码中使用。
   • 现代的方式是使用 Object.getPrototypeOf(obj) 和 Object.setPrototypeOf(obj, prototype)。

4. 构造函数与 .prototype

   • 每个函数（作为构造函数）都有一个 prototype 属性。
   • 当用构造函数创建一个对象时，该对象的 [[Prototype]] 会被设置为该构造函数的 prototype。

示例

1. 创建对象与原型链

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

Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person("Alice");
person1.sayHello(); // Hello, my name is Alice

console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

2. 使用 Object.create 创建对象

const proto = {
  greet() {
    console.log("Hello!");
  },
};

const obj = Object.create(proto);
obj.greet(); // Hello!
console.log(Object.getPrototypeOf(obj) === proto); // true

3. 修改原型

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

const dog = new Dog("Rex");

// 修改原型
Dog.prototype.bark = function () {
  console.log(`${this.name} says Woof!`);
};

dog.bark(); // Rex says Woof!

原型链

JavaScript 通过原型链实现继承。如果对象在自身没有找到属性或方法，会沿着原型链向上查找，直到顶端的 Object.prototype，若仍未找到，则返回 undefined。

示例：

const obj = {};
console.log(obj.toString()); // "[object Object]" 来自 Object.prototype

原型链结构：

• obj → Object.prototype → null

注意点

1. 避免循环引用
   修改原型链时要小心，避免导致无限循环。

   const a = {};
   a.__proto__ = a; // 不推荐，可能导致错误
   

2. 性能问题
   频繁访问深层次的原型链可能会导致性能问题。

3. 现代方法
   使用 class 语法可以更优雅地操作原型。

   class Animal {
     speak() {
       console.log("Animal speaks");
     }
   }
   
   class Dog extends Animal {
     bark() {
       console.log("Dog barks");
     }
   }
   
   const dog = new Dog();
   dog.speak(); // Animal speaks
   dog.bark();  // Dog barks