JavaScript 原型 （Prototype）

JavaScript Prototype（原型）详解

在 JavaScript 中，原型（Prototype） 是理解对象、继承、构造函数的核心机制之一。原型让我们能够实现对象之间的继承，是 JavaScript 中面向对象编程的重要基础。

一、什么是 Prototype？

每个 JavaScript 函数在创建时，都会自动获得一个名为 prototype 的属性，它是一个对象。这个 prototype 对象包含了该函数构造出的所有实例共享的属性和方法。

简单理解：

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

Person.prototype.sayHello = function () {
  console.log("Hello, I am " + this.name);
};

let p1 = new Person("Alice");
p1.sayHello(); // Hello, I am Alice

• sayHello 定义在 Person.prototype 上；
• 所有通过 new Person() 创建的对象都可以访问这个方法。

---

二、构造函数与原型的关系图示

Person → prototype → { sayHello: function() { ... } }
          ↑
         [[Prototype]]
          ↑
        p1 = new Person()

也可以通过代码验证：

console.log(p1.__proto__ === Person.prototype); // true

---

三、prototype 和 proto 的区别

名称	说明
prototype	函数对象的属性，指向将被用作原型的对象
__proto__	实例对象的内部属性，指向其构造函数的 prototype

function Animal() {}
let a = new Animal();

console.log(Animal.prototype); // 原型对象
console.log(a.__proto__);      // 指向 Animal.prototype

---

四、原型链（Prototype Chain）

JavaScript 中对象的属性访问是通过原型链进行的：

1. 首先查找对象自身；
2. 如果找不到，就查找其 __proto__（也就是构造函数的 prototype）；
3. 一直向上查找，直到找到 Object.prototype；
4. 如果仍未找到，返回 undefined。

let obj = {};
console.log(obj.toString); // 来自 Object.prototype

---

五、给所有对象添加方法

由于所有对象最终都会继承自 Object.prototype，我们可以向其添加方法（不推荐，可能污染全局）：

Object.prototype.sayHi = function () {
  console.log("Hi from Object");
};

let o = {};
o.sayHi(); // Hi from Object

---

六、构造函数与原型继承

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); // 继承方法
Dog.prototype.constructor = Dog;

let d = new Dog("Lucky");
d.speak(); // Lucky makes a noise

---

七、ES6 中的 class 与原型的关系

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log("Hello, " + this.name);
  }
}

let p = new Person("Tom");
p.sayHello();

实际上，sayHello 方法仍然是挂载在 Person.prototype 上的。

---

八、小结

原型知识点	描述
每个函数都有 prototype 属性	用于定义实例共享的方法
每个对象都有 __proto__ 属性	指向构造函数的 prototype
原型链	实现属性查找和继承
class 是语法糖	底层仍然基于 prototype