JS原型链属性获取方法全解析

想要彻底掌握 JavaScript 对象属性？本文为你深度解析如何安全高效地获取对象原型链上的所有属性。告别原型链遍历的困惑，本文详细介绍了利用 `Object.getPrototypeOf()` 向上遍历，并结合 `Object.getOwnPropertyNames()` 收集属性的实用方法，同时使用 `Set` 数据结构进行去重，最终转化为数组。此外，文章还深入探讨了原型链污染的防范措施，以及如何处理原型链过长带来的性能问题，并推荐使用标准的 `Object.getPrototypeOf()` 方法。最后，通过 `hasOwnProperty()` 方法，教你精准判断属性是对象自身所有还是继承而来，确保代码的健壮性和可维护性。

要获取JavaScript对象所有原型链上的属性，需遍历原型链并收集每层的属性，同时避免污染和性能问题。1. 使用 Object.getPrototypeOf() 沿原型链向上遍历，结合 Object.getOwnPropertyNames() 收集每个原型的属性，并用 Set 去重，最终转为数组返回；2. 避免原型链污染的方法包括：不直接修改内置对象原型、使用 Object.create(null) 创建无原型对象、用 Object.freeze() 或 Object.seal() 锁定对象、对外部数据严格校验、以及通过 Object.prototype.hasOwnProperty.call(obj, prop) 安全检测自身属性；3. 处理原型链过长应减少继承层级、优先使用组合代替继承、缓存频繁访问的原型属性、并推荐使用标准的 Object.getPrototypeOf() 而非非标准的 __proto__；4. 判断属性是否为对象自身所有，应使用 obj.hasOwnProperty(prop)，但为防止方法被覆盖，应使用 Object.prototype.hasOwnProperty.call(obj, prop) 以确保可靠性，该方法返回布尔值并准确区分自身与继承属性。

要获取JavaScript对象所有原型链上的属性，核心在于遍历对象的原型链，并将每个原型上的属性收集起来。这涉及到理解__proto__、Object.getPrototypeOf()以及如何安全地遍历原型链。

解决方案：

function getAllPrototypeProperties(obj) {
  const properties = new Set(); // 使用Set去重
  let current = obj;

  while (current) {
    Object.getOwnPropertyNames(current).forEach(property => {
      properties.add(property);
    });
    current = Object.getPrototypeOf(current); // 沿着原型链向上
  }

  return Array.from(properties); // 转换为数组返回
}

// 示例
const obj = { a: 1 };
const parent = { b: 2 };
Object.setPrototypeOf(obj, parent);
const grandParent = { c: 3 };
Object.setPrototypeOf(parent, grandParent);

const allProps = getAllPrototypeProperties(obj);
console.log(allProps); // 输出: ["a", "b", "c"] (顺序可能不同)

如何避免原型链污染？

原型链污染是指恶意修改内置对象的原型，从而影响所有继承自该原型的对象。防范的关键在于避免直接修改内置对象的原型，以及对外部输入的数据进行严格的校验和过滤。

1. 避免直接修改内置原型： 尽量不要直接修改Object.prototype、Array.prototype等。如果确实需要扩展功能，考虑使用静态方法或创建自定义类。

   

2. 使用Object.create(null)创建无原型对象： 如果不需要继承任何属性，可以使用Object.create(null)创建一个完全空的对象，避免继承Object.prototype上的属性，从而减少被污染的风险。

   const noProtoObj = Object.create(null);
   noProtoObj.myProp = 'value'; // 安全地添加属性
   console.log(noProtoObj.toString); // undefined，没有继承toString方法

3. 使用Object.freeze()或Object.seal()： Object.freeze()可以冻结对象，使其属性不可修改，Object.seal()可以阻止对象添加新属性。这可以防止对象被意外修改。

   const safeObj = { x: 1 };
   Object.freeze(safeObj);
   safeObj.x = 2; // 严格模式下会报错，非严格模式下修改无效

4. 数据校验和过滤： 对于外部输入的数据，例如来自URL参数或用户提交的数据，需要进行严格的校验和过滤，确保数据符合预期格式，避免恶意代码注入。

5. 使用hasOwnProperty()检查属性： 在访问对象的属性时，使用hasOwnProperty()方法检查属性是否是对象自身的属性，而不是继承来的。这可以防止访问到被污染的属性。

   const obj = { a: 1 };
   if (obj.hasOwnProperty('a')) {
     console.log('obj has property a');
   }

如何处理原型链过长的情况？

原型链过长会影响性能，因为每次访问属性都需要沿着原型链向上查找。虽然JavaScript引擎通常会进行优化，但过长的原型链仍然可能成为性能瓶颈。

1. 减少继承层级： 尽量避免过度使用继承，保持原型链的简洁。如果多个类之间只有少量相似之处，可以考虑使用组合而不是继承。

2. 使用组合代替继承： 组合是指在一个类中包含其他类的实例，通过委托来使用这些实例的功能。这可以避免创建深层的原型链。

   class Engine {
     start() {
       console.log('Engine started');
     }
   }
   
   class Car {
     constructor() {
       this.engine = new Engine(); // 组合
     }
   
     start() {
       this.engine.start(); // 委托
     }
   }
   
   const myCar = new Car();
   myCar.start(); // 输出: Engine started

3. 缓存常用的属性： 如果需要频繁访问原型链上的属性，可以将这些属性缓存到对象自身的属性中，避免每次都沿着原型链向上查找。

   function MyClass() {
     this.cachedValue = this.getLongCalculation(); // 缓存
   }
   
   MyClass.prototype.getLongCalculation = function() {
     // 复杂的计算
     return 'result';
   };
   
   const instance = new MyClass();
   console.log(instance.cachedValue); // 直接访问缓存的值

4. 使用Object.getPrototypeOf()优化： 虽然__proto__在浏览器中可用，但推荐使用Object.getPrototypeOf()方法来获取对象的原型，因为它更符合标准，并且在某些情况下可能更高效。

如何判断一个属性是继承来的还是对象自身的？

使用 hasOwnProperty() 方法可以准确判断一个属性是对象自身的属性还是继承自原型链的属性。

const obj = { a: 1 };
const parent = { b: 2 };
Object.setPrototypeOf(obj, parent);

console.log(obj.hasOwnProperty('a')); // true，a 是 obj 自身的属性
console.log(obj.hasOwnProperty('b')); // false，b 是继承来的属性

// 安全地使用 hasOwnProperty，防止被覆盖
console.log(Object.prototype.hasOwnProperty.call(obj, 'a')); // true

hasOwnProperty() 方法返回一个布尔值，指示对象自身是否具有指定的属性。需要注意的是，hasOwnProperty() 方法本身也可能被对象覆盖，因此推荐使用 Object.prototype.hasOwnProperty.call(obj, propertyName) 的方式来调用，以确保使用的是原始的 hasOwnProperty() 方法。

本篇关于《JS原型链属性获取方法全解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！