js如何获取所有原型链上的属性

要获取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()

   登录后复制
   方法检查属性是否是对象自身的属性，而不是继承来的。这可以防止访问到被污染的属性。
   

   如此AI员工

   国内首个全链路营销获客AI Agent

   71

   查看详情

   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如何获取所有原型链上的属性的详细内容，更多请关注php中文网其它相关文章！