javascript - 当我查看 DOM 对象的 getter 属性时，控制台中发生了什么？

Question

在控制台运行以下代码时:

console.dir(document);

在 Chrome 中，我看到了以下内容:

这似乎暗示 domain 属性直接在 document 对象上。然而，事实并非如此。

console.log(document.hasOwnProperty('domain'));

在 Chrome 72 中，沿着原型(prototype)链往上走，它似乎在 Document.prototype 上:

console.log(Document.prototype.hasOwnProperty('domain'));
console.log(Object.getOwnPropertyDescriptor(Document.prototype, 'domain'));

(在 FF 56 和其他一些浏览器中，它似乎在 HTMLDocument.prototype 上)

从代码片段中可以看出，该属性实际上由一个 getter 和一个 setter 组成。但是，我的印象是 getter 在控制台中显示为 (...)，就像在 this image 中一样。 ，您必须单击 (...) 才能调用 getter。

如果我创建一个类似的对象，其原型(prototype)包含一个 getter/setter 属性，并且我记录该对象，则在检查它时不会调用 getter:

// look at results in Chrome's browser console, not snippet console
class theProto {
  get foo() {
    return 'fooVal';
  }
  set foo(arg) {
    // do something
  }
}
class theClass extends theProto {
}
const instance = new theClass();
console.dir(instance);

对于 document 上的许多属性，可以看到相同类型的行为。例如，您在第一个屏幕截图中看到的所有 其他属性似乎也是其中一个原型(prototype)对象的 getter/setter，并且它们都不在 document 上本身:

console.log(
  ['dir', 'doctype', 'documentElement', 'documentURI', 'embeds', 'fgColor', 'firstChild', 'firstElementChild']
  .some(prop => document.hasOwnProperty(prop))
);

您还可以在 window 属性和元素上看到这一点。这也发生在 FF 中。

const input = document.createElement('input');
// console.dir(input);

// but the own property list is empty!
console.log(Object.getOwnPropertyNames(input));

<img src="/image/R5u3S.png">

是否可以创建一个与这些具有相同日志记录行为的对象，其中 console.diring 一个对象也会立即调用原型(prototype)链中的任何 getter，而不是显示 ( ...)？我将如何修改我的 theClass 片段？或者，某些预定义对象(如 DOM 对象)是否只是正常日志记录行为的异常？

我知道如何以编程方式调用 getter，我只是对表面上的不一致感到好奇。

Answer 1

是否可以创建一个与这些具有相同日志记录行为的对象，其中 console.diring 一个对象也会立即调用原型(prototype)链中的任何 getter，而不是显示 (...)？

从理论上讲，是的，尽管它不会准确评估 getter(我不确定您看到的值是否在您对它们进行 console.dir 时进行了评估)。您需要评估属性(property)。但是，使用 hasOwnProperty 将返回 true。

// look at results in Chrome's browser console, not snippet console
class theProto {
  get foo() {
    return 'fooVal';
  }
  set foo(arg) {
    // do something
  }
}
class theClass extends theProto {
   foo = (() => theProto.prototype.foo)(); // or, really, just (() => this.foo)();
}
const instance = new theClass();
console.dir(instance);

工作 fiddle :https://jsfiddle.net/vL6smo51/1/