php动态网站开发网易云课堂外贸企业网站设计公司

在 JavaScript 中，prototype 和 __proto__ 都与原型链相关，但它们的角色和用途有本质区别：

---

1. prototype 和 __proto__ 的区别

特性	prototype	__proto__
归属对象	仅函数对象拥有（如构造函数）	所有对象默认拥有（包括函数对象）
作用	定义构造函数创建实例时的原型模板	指向实例对象的实际原型对象
关系	构造函数的 prototype 是实例的 __proto__	实例的 __proto__ 指向其构造函数的 prototype
示例	function Foo() {} Foo.prototype	const obj = {} obj.__proto__

核心区别

• 构造函数视角：
  函数的 prototype 是一个显式定义的模板对象，用于给所有通过 new 创建的实例提供共享属性和方法。

• 实例视角：
  对象的 __proto__ 是一个隐式引用，指向它的构造函数的 prototype，形成原型链。

代码示例

function Person(name) {this.name = name;
}// 构造函数的 prototype 定义共享方法
Person.prototype.sayHello = function() {console.log(`Hello, I'm ${this.name}`);
};const alice = new Person("Alice");// 实例的 __proto__ 指向构造函数的 prototype
console.log(alice.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true

---

2. 手动修改对象的原型

JavaScript 允许通过以下方式动态修改对象的原型：

方法 1：Object.setPrototypeOf(obj, proto)

• 作用：直接设置对象的 [[Prototype]]（即 __proto__）。
• 示例：

  const parent = { value: 42 };
  const child = {};// 修改 child 的原型为 parent
  Object.setPrototypeOf(child, parent);console.log(child.value); // 42（通过原型链访问）
  

方法 2：obj.__proto__ = proto

• 作用：通过 __proto__ 属性直接赋值（非标准，但广泛支持）。
• 示例：

  const parent = { value: 42 };
  const child = {};child.__proto__ = parent;
  console.log(child.value); // 42
  

方法 3：创建时指定原型（Object.create()）

• 作用：在对象创建时直接指定原型。
• 示例：

  const parent = { value: 42 };
  const child = Object.create(parent); // child 的原型是 parentconsole.log(child.value); // 42
  

---

注意事项

1. 性能问题：
   动态修改原型（如 Object.setPrototypeOf）可能影响 JavaScript 引擎的优化，尽量避免在性能敏感场景使用。

2. 更安全的替代：
   优先使用 Object.getPrototypeOf(obj) 获取原型，避免直接操作 __proto__。

3. 构造函数场景：
   若需批量修改实例的原型，应直接修改构造函数的 prototype：

   function Animal() {}
   Animal.prototype.eat = function() {};function Dog() {}
   // 让 Dog 的实例继承 Animal 的原型
   Dog.prototype = Object.create(Animal.prototype);
   

---

总结

• prototype 是构造函数的显式原型模板，__proto__ 是实例的隐式原型引用。
• 修改原型时，优先使用 Object.create() 或 Object.setPrototypeOf()，避免直接操作 __proto__。