prototype 和 __proto__的区别

prototype__proto__ 在 JavaScript 中都与对象的原型链有关,但它们各自有不同的用途和含义。

prototype

  • prototype 是函数对象的一个属性,它指向一个对象,这个对象包含了可以由特定类型的所有实例共享的属性和方法。
  • 当我们创建一个新的对象实例时,这个实例会继承其构造函数的 prototype 对象上的属性和方法。
  • 我们可以使用 Constructor.prototype.methodName = function() { ... } 的方式来给构造函数的所有实例添加新的方法或属性。

proto

  • __proto__ 是一个非标准的属性,但在大多数现代浏览器中都可用,它指向对象的原型对象。
  • 当你访问一个对象的属性时,如果该对象自身没有这个属性,JavaScript 就会在该对象的原型链上查找这个属性。
  • 需要注意的是,由于 __proto__ 是非标准的,因此在生产环境中应避免使用它,而是使用 Object.getPrototypeOf()Object.setPrototypeOf() 这样的标准方法来访问和修改对象的原型。

区别

  • prototype 是函数对象的一个属性,而 __proto__ 是对象的一个属性(尽管是非标准的)。
  • prototype 用于定义构造函数的所有实例可以共享的属性和方法,而 __proto__ 用于在运行时访问或修改对象的原型。
  • 当你使用 new 关键字创建一个新的对象实例时,这个实例的 __proto__ 会被设置为构造函数的 prototype

示例

javascript 复制代码
function Person() {}
// 通过 prototype 添加方法
Person.prototype.sayHello = function() {
  console.log("Hello, I am a person!");
};
var person1 = new Person();
// 访问 sayHello 方法,它存在于 person1 的原型链上
person1.sayHello(); // 输出 "Hello, I am a person!";
// 访问 __proto__ 来查看 person1 的原型对象
console.log(person1.__proto__ === Person.prototype); // 输出 true
// 注意:不推荐在生产环境中使用 __proto__
var a = {}, b = Object.prototype;
console.log(a.prototype === b, Object.getPrototypeOf(a)===b);// false, true
// 1、只有函数对象才有prototype,a是普通对象,没有prototype,所以a.prototype是undefined
// 2、当使用字面量 `{}` 或 `new Object()` 来创建一个对象时,这个对象会继承自`Object.prototype`。
// 3、`Object.getPrototypeOf(a)` 是一个方法,它返回指定对象的原型。对于普通对象(如通过 `{}` 或 `new Object()` 创建的对象),这个方法会返回 `Object.prototype`。

总结

prototype__proto__ 都是 JavaScript 原型链机制的一部分,但它们的用途和用法是不同的。在编写健壮和可维护的代码时,应优先使用标准方法(如 Object.getPrototypeOf()Object.setPrototypeOf())来操作对象的原型。

相关推荐
ttod_qzstudio19 小时前
【软考设计模式】原型模式:“克隆“对象与深拷贝、浅拷贝精讲
设计模式·原型模式
希冀1235 天前
【JavaScript】Javascript—JS进阶—Day03
开发语言·javascript·原型模式
想吃火锅100524 天前
【前端手撕】instanceof
前端·javascript·原型模式
UXbot24 天前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app
UXbot24 天前
如何选择适合公司项目的UI设计工具?企业选型指南
前端·低代码·ui·团队开发·原型模式·设计规范·web app
UXbot24 天前
原型设计工具如何帮助新人快速进入产品行业?
前端·低代码·ui·交互·团队开发·原型模式·web app
sunny.day1 个月前
js原型与原型链
开发语言·javascript·原型模式·js原型链
UXbot1 个月前
AI网页开发工具能替代工具吗?5大平台对比
前端·人工智能·低代码·ui·原型模式·web app
weixin_307779131 个月前
从“大海捞针”到“主动推理”:AI如何重塑云原生故障诊断的根因链
开发语言·人工智能·算法·自动化·原型模式
swordbob1 个月前
prototype 注入到 singleton 里,prototype是否还是线程安全的
安全·spring·单例模式·原型模式