JS查看对象原型的实用方法

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《如何用JS查看对象原型》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

要查看JavaScript对象的原型对象，应优先使用Object.getPrototypeOf()方法，其次可使用__proto__属性；1. Object.getPrototypeOf(obj)是标准且推荐的方法，语义清晰、兼容性好，适用于所有需要安全获取原型的场景；2. obj.__proto__是非标准但广泛支持的属性，可用于调试或查看原型，但不推荐在生产环境中用于修改原型链；3. 运行时通过Object.setPrototypeOf()修改原型链虽可行，但会导致严重性能问题和维护困难，应避免使用；4. 更佳实践是在创建对象时通过Object.create()指定原型，或使用ES6类继承与组合模式实现代码复用。理解原型链对掌握JavaScript继承机制、提升代码效率与可维护性至关重要，是深入学习框架与解决复杂问题的基础。

在JavaScript中，要查看一个对象的原型对象，我们主要依赖两种方式：一是使用标准的Object.getPrototypeOf()方法，二是利用非标准的但广泛支持的__proto__属性。这两种方式都能让你一窥对象“血统”的奥秘，理解它从何而来，继承了哪些特性。

解决方案

要查看一个JavaScript对象的原型对象，最推荐且标准的方法是使用Object.getPrototypeOf()。这个方法接收一个对象作为参数，并返回该对象的原型。

// 示例1：查看普通对象的原型
const obj = {};
console.log(Object.getPrototypeOf(obj)); // 输出: [Object: null prototype] {} (或者在浏览器中显示为 Object.prototype)

// 示例2：查看数组的原型
const arr = [];
console.log(Object.getPrototypeOf(arr)); // 输出: [Object: null prototype] [] (或者在浏览器中显示为 Array.prototype)

// 示例3：查看自定义构造函数实例的原型
function MyConstructor() {
  this.name = 'test';
}
const instance = new MyConstructor();
console.log(Object.getPrototypeOf(instance)); // 输出: MyConstructor {} (或者在浏览器中显示为 MyConstructor.prototype)

另一种方式是直接访问对象的__proto__属性。这个属性是一个内部属性（通常被称为[[Prototype]]），它直接指向该对象的原型。尽管它在ES6之前并不是标准的一部分，但由于其便利性，几乎所有现代JavaScript环境都支持它。不过，从规范的角度看，不推荐直接使用它来修改原型链，但用于查看是完全可以的。

// 示例1：使用__proto__查看普通对象的原型
const obj = {};
console.log(obj.__proto__); // 输出: [Object: null prototype] {} (或者 Object.prototype)

// 示例2：使用__proto__查看数组的原型
const arr = [];
console.log(arr.__proto__); // 输出: [Object: null prototype] [] (或者 Array.prototype)

// 示例3：使用__proto__查看自定义构造函数实例的原型
function MyConstructor() {
  this.name = 'test';
}
const instance = new MyConstructor();
console.log(instance.__proto__); // 输出: MyConstructor {} (或者 MyConstructor.prototype)

在大多数情况下，Object.getPrototypeOf()是首选，因为它更符合标准，且语义更清晰。__proto__虽然方便，但它更像是一个历史遗留的便捷访问方式，而不是一个应该被广泛用于生产代码中进行操作的属性。

为什么理解JavaScript原型链对开发者至关重要？

在我看来，理解JavaScript的原型链，就像理解一门语言的语法骨架一样，少了它，很多东西都只能停留在表面。这不单单是语法层面的问题，更是关乎到你如何高效、优雅地组织代码，以及如何避免一些看似简单却又让人头疼的性能陷阱。

说到底，JavaScript是一个基于原型的语言，它的继承机制就是通过原型链来实现的。当你访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript引擎就会沿着它的原型链向上查找，直到找到为止，或者查到原型链的顶端（null）为止。

这带来了几个核心的好处和应用场景：

1. 代码复用与继承： 这是最显而易见的。通过原型，我们可以让多个对象共享同一个方法或属性，而不是每个对象都拥有自己独立的副本。比如，所有的数组实例都共享Array.prototype上的push、pop等方法，而不是每个数组都复制一份。这极大地节省了内存，也让代码更具模块化。

   function Animal(name) {
     this.name = name;
   }
   Animal.prototype.speak = function() {
     console.log(`${this.name} makes a sound.`);
   };
   
   const dog = new Animal('Doggy');
   const cat = new Animal('Kitty');
   
   dog.speak(); // Doggy makes a sound.
   cat.speak(); // Kitty makes a sound.
   // dog 和 cat 共享同一个 speak 方法
   console.log(dog.speak === cat.speak); // true

2. 性能优化： 刚才提到的共享方法就是性能优化的一种体现。如果每个对象都有一份自己的方法，那内存消耗会非常大。原型链的存在，使得方法只需定义一次，所有实例都能通过原型链访问到。

3. 理解this的指向： 在原型方法中，this的指向往往是调用该方法的对象实例。深入理解原型链如何工作，能帮助你更好地掌握this的动态绑定机制，避免常见的this指向错误。

4. 框架与库的实现： 很多JavaScript框架和库，尤其是那些面向对象的、或者需要大量继承和复用功能的，其底层实现都离不开原型链。如果你想深入学习它们，或者自己编写类似的底层代码，原型链是绕不过去的坎。

5. 调试与问题排查： 当一个对象的方法行为不符合预期时，追踪其原型链是排查问题的重要手段。通过查看原型，你可以知道这个方法是从哪个原型对象继承而来的，以及是否被某个原型链上的对象覆盖了。

总之，原型链是JavaScript这门语言的基石，掌握它，你才能真正理解JavaScript的面向对象编程范式，并写出更健壮、更高效的代码。

__proto__与Object.getPrototypeOf()：实践中应如何选择与规避？

这确实是个老生常谈的问题，但每次讲起来都觉得很有意思，因为它牵扯到JavaScript语言的演进和一些最佳实践的考量。简单来说，Object.getPrototypeOf()是官方推荐的、更现代、更安全的获取对象原型的方法；而__proto__则是一个历史遗留的、非标准的（但事实上的标准）属性，主要用于内部访问和调试。

Object.getPrototypeOf()：

• 标准与推荐： 它是ES5中引入的，明确定义在ECMAScript规范中。这意味着它在所有符合ES5及更高版本的JavaScript环境中都会以相同的方式工作，并且是获取对象原型最稳健的方式。
• 语义清晰： 方法名直接告诉你它的作用——“获取对象的原型”。这让代码更具可读性。
• 不可变性（对于获取）： 它只是返回一个引用，不会让你不小心地修改原型链。
• 使用场景： 任何你需要安全、标准地获取对象原型的地方。比如在库或框架中，你希望你的代码在不同环境下的行为一致。

const myObject = {};
const proto = Object.getPrototypeOf(myObject);
console.log(proto === Object.prototype); // true

__proto__：

• 历史与便利： 它最初是Mozilla（Firefox）的一个私有属性，后来被其他浏览器也实现了。因为它直接挂在对象实例上，用起来非常方便，尤其是在调试控制台中快速查看原型时。
• 非标准（曾是）： 在ES6之前，它不是ECMAScript规范的一部分。ES6将其标准化，但主要是为了兼容性，并明确指出它不应该用于生产代码中进行设置操作（尽管获取是允许的）。
• 可变性（警告）： 最大的问题是，__proto__不仅可以用来获取，还可以用来设置对象的原型。直接修改__proto__是一个非常慢的操作，因为它会打乱JavaScript引擎内部的优化，导致对象“形状”发生变化，从而触发重新编译和去优化，严重影响性能。

  const obj1 = {};
  const obj2 = { a: 1 };
  obj1.__proto__ = obj2; // 这种操作非常不推荐，会严重影响性能
  console.log(obj1.a); // 1

• 使用场景： 我个人觉得，它更适合在开发和调试时快速查看原型链，或者在一些非常特殊的、你明确知道自己在做什么的场景下（比如某些遗留代码或非常底层的性能测试）使用。但在日常的业务逻辑或库开发中，能避免就避免，特别是避免用它来修改原型。

实践中的选择与规避：

• 优先使用Object.getPrototypeOf()： 这是黄金法则。它更清晰、更安全、更符合未来趋势。
• 规避直接修改__proto__： 除非你真的对性能优化有极致要求，并且清楚知道自己在做什么，否则永远不要直接通过obj.__proto__ = anotherObj来改变一个已存在对象的原型。这几乎总是一个性能杀手。
• 创建时指定原型： 如果你需要在创建对象时就指定它的原型，可以使用Object.create()方法，这比先创建再修改__proto__要高效得多。

  const protoObj = {
    greet: function() { console.log('Hello!'); }
  };
  const newObj = Object.create(protoObj);
  newObj.greet(); // Hello!
  console.log(Object.getPrototypeOf(newObj) === protoObj); // true

记住，选择合适的工具，才能写出更健壮、性能更好的代码。对于原型链的查看，Object.getPrototypeOf()无疑是更“体面”的选择。

运行时修改JavaScript对象原型链：可行性与潜在陷阱

运行时修改JavaScript对象的原型链，这听起来有点像在给一辆正在高速行驶的汽车换发动机，理论上可行，但实际操作起来，风险和代价都非常大。JavaScript确实提供了这样的能力，主要通过Object.setPrototypeOf()方法。

Object.setPrototypeOf()方法：

这个方法允许你改变一个现有对象的原型。它接收两个参数：要修改原型的对象和新的原型对象。

const animal = {
  jumps: true
};
const rabbit = {
  eats: true
};

// 初始时 rabbit 的原型是 Object.prototype
console.log(Object.getPrototypeOf(rabbit)); // Object.prototype

// 将 rabbit 的原型设置为 animal
Object.setPrototypeOf(rabbit, animal);

console.log(rabbit.jumps); // true (现在 rabbit 可以访问 animal 的属性了)
console.log(Object.getPrototypeOf(rabbit) === animal); // true

可行性：

从技术上讲，它是可行的，而且在某些非常特定的场景下，比如需要动态地“混入”行为（虽然现在有更好的方案如组合），或者在一些高级的元编程场景中，你可能会见到它的身影。它确实提供了一种极大的灵活性，让你可以动态地调整对象的继承关系。

潜在陷阱（为什么不推荐）：

尽管Object.setPrototypeOf()提供了这种能力，但在绝大多数情况下，它被认为是一种“反模式”（anti-pattern），应该尽量避免。主要原因在于其严重的性能影响和可能导致的难以预测的行为。

1. 严重的性能问题： 这是最主要的原因。JavaScript引擎在内部会对对象的“形状”（shape）进行优化，这包括了对象的属性布局和它的原型链。当你改变一个对象的原型时，它的“形状”就变了。这会导致：

   • 去优化（Deoptimization）： 引擎之前为该对象或其类似对象所做的所有优化都可能失效，需要重新进行优化。
   • 慢路径执行： 访问该对象的属性可能会从快速路径（V8的隐藏类）切换到慢路径，导致每次属性查找都变得非常慢。
   • 缓存失效： 任何依赖于对象原型链的缓存都可能失效。

   你可以想象一下，如果你的代码频繁地修改对象的原型，那么整个应用程序的性能可能会一落千丈。

2. 代码可读性与维护性差： 动态改变原型链会让代码的执行路径变得难以预测。当一个对象在运行时突然改变了它的行为来源，对于后续的开发者来说，理解和维护这段代码将成为一个噩梦。这增加了调试的复杂性，因为你不能仅仅通过静态代码分析来判断一个对象最终会拥有哪些属性和方法。

3. 意外的行为： 如果不小心修改了共享的原型，可能会影响到所有继承自该原型的对象，导致意想不到的副作用。

替代方案：

与其在运行时修改原型，不如在对象创建时就正确地设置原型，或者采用其他更现代、更安全的模式：

• Object.create()： 如果你想创建一个以特定对象为原型的新对象，这是最推荐的方式。

  const protoObj = { method: function() { /* ... */ } };
  const newInstance = Object.create(protoObj); // newInstance 的原型就是 protoObj

• 类（Classes）和继承（extends）： ES6引入的class语法提供了更清晰、更易于理解的继承机制，其底层也是基于原型链的，但抽象了这些复杂性。
• 组合（Composition）： 相比于继承，组合是一种更灵活的设计模式。你可以将功能封装在独立的对象中，然后将这些对象作为属性添加到你的主对象上，而不是通过原型链来继承。这通常比复杂的继承链更易于管理。

所以，尽管Object.setPrototypeOf()提供了这种“超能力”，但通常情况下，我们应该把它视为一个“危险的工具”，除非你对它的性能影响和潜在风险有非常深入的理解，并且确实没有其他更好的解决方案时，才考虑使用它。在日常开发中，尽量避免运行时修改原型链，坚持在创建时定义好对象的继承关系，或者通过组合来复用功能。

到这里，我们也就讲完了《JS查看对象原型的实用方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于继承,原型链,原型,__proto__,Object.getPrototypeOf()的知识点！