JS原型链属性查看方法

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《JS如何查看原型链属性》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

要检测属性是否存在于对象的原型链上且为数据属性，需遍历原型链并使用Object.getOwnPropertyDescriptor判断属性类型；2. in操作符可检测属性在对象或原型链上的存在性，但无法区分来源和属性类型；3. hasOwnProperty仅检查对象自身的属性，不检查原型链，也无法区分属性类型；4. Object.getOwnPropertyDescriptor是关键，通过检查描述符是否包含value或writable可确定为数据属性，包含get或set则为访问器属性；5. 遍历原型链应从Object.getPrototypeOf(obj)开始，逐级向上直至null，确保安全完整地检查每一级原型上的自有属性。该方法能精准识别原型链上的数据属性，避免将自身属性或访问器属性误判，最终返回布尔值表示检测结果。

在JavaScript中，要检测一个属性是否存在于对象的原型链上，并且它是一个“数据属性”而非“访问器属性”，这确实需要一点技巧，因为它不像in操作符那样简单直接，in只会告诉你属性是否存在，但不会区分它在哪里，也不会区分它是数据属性还是访问器属性。而hasOwnProperty又只检查对象自身的属性。所以，我们需要更精细的控制，通常会结合遍历原型链和Object.getOwnPropertyDescriptor来实现。

解决方案

要准确检测一个属性是否是原型链上的数据属性，我们可以编写一个函数，它会从目标对象的直接原型开始，逐级向上遍历原型链，直到找到该属性或到达原型链的顶端（null）。在每一级原型上，如果找到了这个属性，我们就用Object.getOwnPropertyDescriptor来检查它的特性，特别是要看它是否有value或writable特性，这正是数据属性的标志。

/**
 * 检测一个属性是否作为数据属性存在于对象的原型链上（不包括对象自身）
 * @param {object} obj - 要检查的对象
 * @param {string} propName - 要查找的属性名
 * @returns {boolean} 如果属性是原型链上的数据属性则返回 true，否则返回 false
 */
function isDataPropertyOnPrototypeChain(obj, propName) {
    // 基础检查：如果 obj 不是对象或函数，它就没有原型链可言
    if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
        return false;
    }

    let currentPrototype = Object.getPrototypeOf(obj); // 从对象的直接原型开始检查

    // 向上遍历原型链，直到到达 null（Object.prototype 的原型）
    while (currentPrototype !== null) {
        // 检查当前原型对象是否“拥有”这个属性（而不是继承来的）
        if (Object.prototype.hasOwnProperty.call(currentPrototype, propName)) {
            const descriptor = Object.getOwnPropertyDescriptor(currentPrototype, propName);

            // 如果 descriptor 存在，并且它包含 'value' 或 'writable' 属性，
            // 那么它就是一个数据属性。访问器属性会有 'get' 或 'set'。
            if (descriptor && ('value' in descriptor || 'writable' in descriptor)) {
                return true; // 找到了一个原型链上的数据属性
            }
        }
        // 继续向上移动到下一个原型
        currentPrototype = Object.getPrototypeOf(currentPrototype);
    }

    return false; // 在整个原型链上都没有找到作为数据属性的该属性
}

// 示例用法：
// const proto1 = {
//     dataProp1: 10,
//     get accessorProp1() { return 20; }
// };
// const proto2 = Object.create(proto1);
// proto2.dataProp2 = 'hello';

// const myObj = Object.create(proto2);
// myObj.ownProp = true; // 对象自身的属性

// console.log(isDataPropertyOnPrototypeChain(myObj, 'dataProp1'));     // true (来自 proto1)
// console.log(isDataPropertyOnPrototypeChain(myObj, 'accessorProp1')); // false (是访问器属性)
// console.log(isDataPropertyOnPrototypeChain(myObj, 'dataProp2'));     // true (来自 proto2)
// console.log(isDataPropertyOnPrototypeChain(myObj, 'ownProp'));       // false (是自身属性，不是原型链上的)
// console.log(isDataPropertyOnPrototypeChain(myObj, 'toString'));      // true (来自 Object.prototype)
// console.log(isDataPropertyOnPrototypeChain(myObj, 'nonExistent'));   // false

in操作符和hasOwnProperty：它们能做什么，又不能做什么？

在JavaScript中，处理对象属性时，in操作符和hasOwnProperty方法是我们最常用的两个工具，但它们各自有明确的职责和局限性。理解这些差异，是深入理解原型链的关键一步。

in操作符，比如'prop' in obj，它的作用是检查一个属性名是否在指定对象或其原型链上的任何地方存在。这意味着，无论属性是对象自身的（own property），还是从原型链上继承来的，in操作符都会返回true。它就像一个“存在性”的广谱探测器。这听起来很方便，对吧？但它的不足也很明显：它不会告诉你这个属性是直接属于这个对象的，还是它祖先的；更重要的是，它也无法区分这个属性是普通的数据属性（比如value: 10），还是一个访问器属性（比如get foo() { ... }）。所以，当你需要精确知道属性的来源或类型时，in操作符就显得力不从心了。

相比之下，Object.prototype.hasOwnProperty.call(obj, 'prop')（通常简写为obj.hasOwnProperty('prop')，但为了避免覆盖，前面那种写法更健壮）就显得“专一”多了。它只关心一个问题：这个属性是不是对象“自己”的属性？也就是说，它只检查对象自身的属性，而完全忽略原型链上的继承属性。这使得它在需要判断一个属性是否是对象独有的场景下非常有用，比如在遍历对象属性时，你可能只想处理它自己的属性，而不是那些从原型继承来的方法或数据。然而，它的局限性也很明显：它无法告诉你原型链上是否存在这个属性，也同样无法区分属性的类型。

所以，回到我们最初的问题，仅仅使用in或hasOwnProperty都无法满足“检测原型链上的数据属性”这个需求。in太宽泛，不区分来源和类型；hasOwnProperty太狭窄，只看自身。我们需要一个能结合两者优势，并能进一步探究属性特性的方法。

为什么Object.getOwnPropertyDescriptor在这里如此关键？

当我们需要深入了解一个JavaScript对象属性的“庐山真面目”时，Object.getOwnPropertyDescriptor()方法就成了我们的不二之选。它在这里之所以关键，因为它能提供一个属性的完整“描述符”对象，这个描述符包含了属性的所有元数据，而不仅仅是它的值。

一个属性描述符对象，对于数据属性和访问器属性，会有不同的结构：

• 数据属性（Data Property）：
  • value: 属性的值。
  • writable: 布尔值，表示属性的值是否可以被修改。
  • enumerable: 布尔值，表示属性是否可以通过for...in循环或Object.keys()枚举。
  • configurable: 布尔值，表示属性的描述符是否可以被改变（除了writable改为false），以及属性是否可以被删除。
• 访问器属性（Accessor Property）：
  • get: 函数，当读取属性时调用。
  • set: 函数，当设置属性时调用。
  • enumerable: 同数据属性。
  • configurable: 同数据属性。

正是这种结构上的差异，让Object.getOwnPropertyDescriptor在区分数据属性和访问器属性时变得至关重要。如果我们获取到一个属性的描述符，然后检查这个描述符对象是否包含value属性（或者writable，因为它通常与value一同出现），那么我们就可以确定这是一个数据属性。反之，如果它包含get或set属性，那么它就是一个访问器属性。

在我们的解决方案中，Object.getOwnPropertyDescriptor(currentPrototype, propName)这一步就是核心所在。它允许我们在遍历原型链并找到一个属性后，立即检查这个属性的类型。没有它，我们就无法准确地判断找到的属性究竟是我们要找的“数据属性”，还是一个我们不关心的“访问器属性”。

遍历原型链：如何安全有效地向上查找？

在JavaScript中，原型链是实现继承的核心机制。当一个对象试图访问一个属性时，如果自身没有，它就会沿着原型链向上查找，直到找到该属性或到达原型链的末端（null）。手动遍历原型链，就是模拟这个查找过程，但我们可以加入自定义的逻辑。

最安全且标准的方法是使用Object.getPrototypeOf()。这个方法接收一个对象作为参数，并返回该对象的原型。如果一个对象的原型是null（例如Object.prototype的原型就是null），那么就意味着我们已经到达了原型链的顶端。

遍历原型链的基本模式通常是一个while循环：

let current = someObject;
while (current !== null) {
    // 在这里对 current 对象执行操作，比如检查它自身的属性
    // ...
    current = Object.getPrototypeOf(current); // 向上移动到下一个原型
}

在我们的具体场景中，由于问题要求检测“原型链上”的数据属性，这意味着我们通常不包括对象自身的属性。因此，我们会从Object.getPrototypeOf(obj)开始，而不是直接从obj开始。这样可以确保我们只关注继承而来的属性。

这个循环会一直执行，直到current变量变为null。这保证了我们能够检查到原型链上的每一个环节，包括Object.prototype上的属性（比如toString、hasOwnProperty等），因为Object.prototype本身也是一个对象，它也有自己的原型，只是它的原型是null。

这种遍历方式的优点在于：

1. 安全性：Object.getPrototypeOf()是ECMAScript标准的一部分，行为稳定可靠。
2. 完整性：它能确保我们检查到原型链上的每一个可访问层级。
3. 灵活性：在循环内部，我们可以结合hasOwnProperty来判断属性是否是当前原型对象的自有属性，再结合Object.getOwnPropertyDescriptor来获取更详细的属性信息，从而实现各种复杂的查找逻辑。

避免在遍历中修改原型链，虽然在某些高级元编程场景下可能需要，但在常规的属性检测中，保持原型链的稳定是至关重要的，否则可能导致不可预测的行为。

今天关于《JS原型链属性查看方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！