JS如何检测原型链静态属性

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《JS如何检测原型链上的静态属性》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

静态属性直接属于构造函数自身，不在实例的原型链上；检测静态属性应直接在构造函数上使用Object.prototype.hasOwnProperty.call(Constructor, 'prop')判断；检测原型链上的属性则需区分：用'prop' in object可检查属性是否存在于对象自身或其原型链上，而Object.prototype.hasOwnProperty.call(object, 'prop')仅判断是否为对象自身的属性；遍历原型链可通过Object.getPrototypeOf()逐层向上查找，直至null，从而定位属性所在层级。

JavaScript里谈及“静态属性”和“原型链”时，其实有个小小的概念交错需要厘清。简单来说，静态属性是直接定义在构造函数（类）上的，它不属于实例对象，自然也不会出现在实例的原型链上。 原型链承载的，是实例共享的属性和方法。如果你想检测一个属性是否是某个构造函数的“静态属性”，你直接去那个构造函数上找就行了；如果你想看一个属性是否在某个对象的原型链上，那是另一回事，需要沿着原型链往上查。

要检测JavaScript中的属性，特别是当“静态”和“原型链”这两个概念混在一起时，我们得先把它俩掰扯清楚。

1. 检测“静态属性”（即构造函数自身的属性）： 一个属性被称为“静态”的，意味着它直接挂在构造函数（比如 Array、String 或你自定义的 MyClass）上，而不是通过 new 关键字创建的实例上。 要检测这类属性，你直接在构造函数上进行操作：

   

   class MyClass {
     static staticProp = 'I am static';
     instanceProp = 'I am instance';
   
     static staticMethod() {
       console.log('Static method called');
     }
     instanceMethod() {
       console.log('Instance method called');
     }
   }
   
   // 检测静态属性是否存在
   console.log(MyClass.staticProp); // 'I am static'
   // 更严谨地判断是否是其自身的静态属性
   console.log(Object.prototype.hasOwnProperty.call(MyClass, 'staticProp')); // true
   
   // 检测一个不存在的静态属性
   console.log(MyClass.nonExistentStaticProp); // undefined
   console.log(Object.prototype.hasOwnProperty.call(MyClass, 'nonExistentStaticProp')); // false

   这里 Object.prototype.hasOwnProperty.call(MyClass, 'propertyName') 是一个很靠谱的方法，它能准确告诉你这个属性是不是对象“自己”的，而不是从原型链上继承来的。

2. 检测原型链上的属性（实例共享的属性和方法）： 当你说“原型链上的属性”时，通常指的是那些定义在构造函数的 prototype 对象上的属性或方法。这些属性和方法会被所有由该构造函数创建的实例所共享。它们是实例的“共享遗产”，而不是构造函数本身的“静态”成员。

   

   class MyClass {
     static staticProp = 'Static'; // 这是一个静态属性
     constructor(value) {
       this.value = value; // 这是一个实例自身的属性
     }
     // 这是一个原型方法，所有实例共享
     getDoubled() {
       return this.value * 2;
     }
   }
   
   // 也可以在类外部给原型添加属性
   MyClass.prototype.protoProp = 'I am on the prototype';
   
   const instance = new MyClass(5);
   
   // 1. 使用 'in' 操作符：它会检查对象自身以及整个原型链
   console.log('value' in instance); // true (实例自身的属性)
   console.log('getDoubled' in instance); // true (原型链上的方法)
   console.log('protoProp' in instance); // true (原型链上的属性)
   console.log('toString' in instance); // true (来自 Object.prototype)
   console.log('staticProp' in instance); // false (静态属性不在实例的原型链上)
   
   // 2. 使用 Object.prototype.hasOwnProperty.call()：只检查对象自身的属性
   console.log(Object.prototype.hasOwnProperty.call(instance, 'value')); // true
   console.log(Object.prototype.hasOwnProperty.call(instance, 'getDoubled')); // false (它在原型上)
   console.log(Object.prototype.hasOwnProperty.call(MyClass.prototype, 'getDoubled')); // true
   console.log(Object.prototype.hasOwnProperty.call(instance, 'protoProp')); // false
   console.log(Object.prototype.hasOwnProperty.call(MyClass.prototype, 'protoProp')); // true
   
   // 3. 遍历原型链：如果你想明确知道属性在哪一层
   let current = instance;
   while (current) {
     if (Object.prototype.hasOwnProperty.call(current, 'getDoubled')) {
       console.log('getDoubled found on:', current);
       break;
     }
     current = Object.getPrototypeOf(current);
   }
   // 这种方式能让你看到属性是在实例本身，还是在原型对象，还是更上层。

   这里的关键在于理解 in 操作符和 hasOwnProperty 的区别。in 是“宽松”查找

终于介绍完啦！小伙伴们，这篇关于《JS如何检测原型链静态属性》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！