JS原型链构造函数查看方法

在JavaScript中，如何有效地检测和理解原型链中的构造函数是提升代码健壮性和安全性的关键。本文深入探讨了使用`Object.getPrototypeOf()`方法遍历原型链，以查找特定构造函数的标准方法。同时，强调了避免使用非标准属性`__proto__`的重要性，以及防范原型链污染的安全策略，例如使用`Object.create(null)`创建无原型对象并谨慎复制属性。此外，文章还介绍了如何使用`Object.getPrototypeOf(obj) === constructor.prototype`精确判断对象是否直接继承自某个构造函数，而非通过原型链间接继承，从而帮助开发者更准确地理解和控制JavaScript的继承机制。

首先使用Object.getPrototypeOf()逐层遍历原型链以检测构造函数，1. 通过循环从对象开始向上查找，比较每层的constructor是否匹配目标构造函数；2. 若找到则返回true，否则继续遍历直至原型链末端null并返回false；3. 为防止原型链污染，应避免使用__proto__等非标准属性，优先采用标准方法Object.getPrototypeOf()；4. 防御污染的有效方式是使用Object.create(null)创建无原型的干净对象，并仅复制可信的自有属性；5. 判断对象是否直接继承自某构造函数时，需使用Object.getPrototypeOf(obj) === constructor.prototype进行严格相等比较，确保是直接继承而非通过原型链间接继承。该方法完整覆盖了原型链检测、安全防护及继承关系判断的核心需求。

检测JavaScript原型链中的构造函数，其实没有一个“一键搞定”的魔法棒。你需要一层层地往上爬，直到找到你想找的构造函数，或者爬到尽头——null。

解决方案

最直接的方法就是使用instanceof操作符，但它只能告诉你某个对象是否是某个构造函数的实例，而不能直接告诉你原型链上所有构造函数。所以，我们需要一个循环，手动遍历原型链。

function checkPrototypeChain(obj, targetConstructor) {
  let current = obj;

  while (current) {
    if (current.constructor === targetConstructor) {
      return true;
    }
    current = Object.getPrototypeOf(current);
  }

  return false;
}

// 示例
function MyObject() {}
const myInstance = new MyObject();

console.log(checkPrototypeChain(myInstance, MyObject)); // true
console.log(checkPrototypeChain(myInstance, Object));   // true
console.log(checkPrototypeChain(myInstance, Array));    // false

这个函数从给定的对象开始，沿着原型链向上查找，每次检查当前对象的构造函数是否与目标构造函数匹配。如果找到匹配项，则返回true；如果到达原型链的末尾（即current变为null），则返回false。

如何避免原型链污染带来的安全风险？

原型链污染是个挺烦人的问题，特别是当你处理来自不受信任来源的数据时。攻击者可能会修改Object.prototype，从而影响到你代码中的每一个对象。

一个简单的防御方法是冻结Object.prototype，但这可能会破坏一些依赖于修改原型链的库。更好的方法是在使用从外部来源获取的数据时，创建一个没有原型的新对象，然后将数据复制到这个对象中。

function createSafeObject(data) {
  const safeObject = Object.create(null); // 创建一个没有原型的对象
  for (const key in data) {
    if (Object.hasOwn(data, key)) { // 确保只复制自身的属性
      safeObject[key] = data[key];
    }
  }
  return safeObject;
}

// 示例
const untrustedData = JSON.parse('{"__proto__": {"isAdmin": true}}');
const safeData = createSafeObject(untrustedData);

console.log(safeData.isAdmin); // undefined
console.log(({}).isAdmin);      // undefined (如果 Object.prototype 没有被污染)

这样可以有效地隔离不受信任的数据，防止它污染你的原型链。

Object.getPrototypeOf() 和 __proto__ 有什么区别？

Object.getPrototypeOf() 是一个标准方法，用于获取对象的原型。而__proto__是一个非标准属性，虽然大多数浏览器都支持它，但它不应该被用于生产代码中。Object.getPrototypeOf()更可靠，也更符合规范。

const obj = {};
console.log(Object.getPrototypeOf(obj) === Object.prototype); // true
console.log(obj.__proto__ === Object.prototype);              // true (但最好别用)

使用Object.getPrototypeOf()可以避免一些潜在的问题，例如，如果一个对象覆盖了__proto__属性，那么你可能无法正确地获取它的原型。

如何判断一个对象是否直接继承自某个构造函数，而不是通过原型链？

有时候，你可能只想知道一个对象是否直接继承自某个构造函数，而不是通过原型链。可以使用Object.getPrototypeOf()和严格相等(===)来判断。

function isDirectInstanceOf(obj, constructor) {
  return Object.getPrototypeOf(obj) === constructor.prototype;
}

function MyObject() {}
const myInstance = new MyObject();

console.log(isDirectInstanceOf(myInstance, MyObject)); // true
console.log(isDirectInstanceOf(myInstance, Object));   // false

这个函数检查对象的原型是否与构造函数的prototype属性严格相等。如果是，则说明对象直接继承自该构造函数。

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