JS如何访问原型链的getter方法

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JS如何获取原型链上的getter方法》，聊聊，我们一起来看看吧！

要获取JavaScript原型链上的getter方法，必须沿原型链向上查找，使用Object.getPrototypeOf和Object.getOwnPropertyDescriptor；对于Symbol类型，需通过Object.getOwnPropertySymbols遍历Symbol属性匹配目标；不推荐使用已废弃的__lookupGetter__；若getter可能抛出错误，应使用try...catch安全调用。1. 使用getGetterFromPrototypeChain函数遍历原型链，通过Object.getOwnPropertyDescriptor检测属性描述符中的get字段，找到则返回getter；2. 对于Symbol类型的getter，使用getSymbolGetterFromPrototypeChain函数，先用Object.getOwnPropertySymbols获取对象自身的Symbol属性，再逐一比对并检查其描述符的get字段；3. 避免使用__lookupGetter__，因其为非标准且已被废弃；4. 在调用getter时使用safeGetGetterValue函数包裹try...catch，捕获可能的执行错误并返回默认值，确保程序健壮性。该方法完整实现了对普通属性和Symbol属性的getter查找与安全调用。

获取JavaScript原型链上的getter方法，需要沿着对象的原型链向上查找，直到找到目标getter或者到达原型链的顶端（null）。这涉及到对Object.getPrototypeOf()和Object.getOwnPropertyDescriptor()的理解和应用。

解决方案

function getGetterFromPrototypeChain(obj, propertyName) {
  let current = obj;

  while (current) {
    const descriptor = Object.getOwnPropertyDescriptor(current, propertyName);

    if (descriptor && descriptor.get) {
      return descriptor.get;
    }

    current = Object.getPrototypeOf(current);
  }

  return undefined; // 没有找到 getter
}

// 示例
const myObject = {
  value: 10,
  get doubleValue() {
    return this.value * 2;
  }
};

const inheritedObject = Object.create(myObject);

const getter = getGetterFromPrototypeChain(inheritedObject, 'doubleValue');

if (getter) {
  console.log(getter.call(inheritedObject)); // 输出 20
} else {
  console.log("没有找到 getter");
}

这段代码首先定义了一个函数getGetterFromPrototypeChain，它接受一个对象和属性名作为参数。 函数内部使用while循环遍历原型链。在每次循环中，它尝试使用Object.getOwnPropertyDescriptor获取当前对象上指定属性的属性描述符。如果描述符存在并且包含一个get属性，则说明找到了getter方法，函数返回该getter。如果循环结束时仍然没有找到getter，函数返回undefined。示例代码展示了如何使用这个函数来获取并调用原型链上的getter。

如何处理Symbol类型的getter？

Symbol类型的属性需要特别处理，因为它们不是字符串，不能直接用字符串字面量访问。需要使用Object.getOwnPropertySymbols()获取对象自身拥有的Symbol属性，然后遍历这些Symbol，找到目标getter。

function getSymbolGetterFromPrototypeChain(obj, symbol) {
    let current = obj;

    while (current) {
        const symbols = Object.getOwnPropertySymbols(current);
        for (const sym of symbols) {
            if (sym === symbol) {
                const descriptor = Object.getOwnPropertyDescriptor(current, sym);
                if (descriptor && descriptor.get) {
                    return descriptor.get;
                }
            }
        }
        current = Object.getPrototypeOf(current);
    }

    return undefined;
}


// 示例
const mySymbol = Symbol('myGetter');

const myObject = {
  [mySymbol]: 10,
  get [mySymbol]() {
    return this[mySymbol] * 2;
  }
};

const inheritedObject = Object.create(myObject);

const getter = getSymbolGetterFromPrototypeChain(inheritedObject, mySymbol);

if (getter) {
  console.log(getter.call(inheritedObject)); // 输出 NaN，因为 inheritedObject 没有 [mySymbol] 属性
} else {
  console.log("没有找到 getter");
}

这个函数getSymbolGetterFromPrototypeChain与之前的函数类似，但它接受一个Symbol作为参数。 它使用Object.getOwnPropertySymbols获取对象自身拥有的所有Symbol属性，然后遍历这些Symbol，找到与目标Symbol匹配的属性。如果找到匹配的属性，并且该属性有一个getter，则返回该getter。

为什么不直接用obj.__lookupGetter__(propertyName)？

__lookupGetter__是一个非标准的、已废弃的方法。虽然在某些环境中可能仍然可用，但不建议使用，因为它可能在未来的JavaScript版本中被移除，并且在不同的JavaScript引擎中的行为可能不一致。使用Object.getOwnPropertyDescriptor和Object.getPrototypeOf是更标准、更可靠的方法。

如果getter抛出错误，如何处理？

在调用getter时，需要考虑getter可能抛出错误的情况。可以使用try...catch语句来捕获并处理这些错误。

function safeGetGetterValue(obj, propertyName) {
  const getter = getGetterFromPrototypeChain(obj, propertyName);

  if (getter) {
    try {
      return getter.call(obj);
    } catch (error) {
      console.error(`调用 getter 出错: ${error}`);
      return undefined; // 或者返回其他默认值，取决于你的需求
    }
  }

  return undefined;
}

// 示例
const myObject = {
  value: 10,
  get dangerousValue() {
    throw new Error("故意抛出的错误");
  }
};

const result = safeGetGetterValue(myObject, 'dangerousValue');
console.log(result); // 输出 undefined，并打印错误信息

这个函数safeGetGetterValue首先获取getter，然后使用try...catch块来调用getter。如果在调用getter时发生错误，catch块会捕获错误，打印错误信息，并返回undefined（或者其他默认值）。

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