Question

好吧，当我尝试在Chrome中使用Object.watch的polyfill时，我遇到了问题。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch https://gist.github.com/eligrey/384583

polyfill非常简短，您可以阅读它如何删除原始属性并立即定义一个新属性相同的值，但使用覆盖getter和setter。

问题是，如果你使用这个polyfill并观察o.p：

var o = { p: 1 };
o.watch("p", function (id, oldval, newval) {
  console.log( "o." + id + " changed from " + oldval + " to " + newval );
  return newval;
});

之后，检查chrome devtool下的对象o。砰!对象o现在是空的！实际上它仍然具有属性p，类型o.p您会找到o.p = 1。

我的问题是，为什么该属性在Chrome开发者工具对象属性列表中不可见？

注意：如果您对Object.watch不了解/不感兴趣，只要您理解Object.defineProperty，您仍然可以帮助我解决这个问题。

编辑：事实证明，它并不像我认为它创建了一个新属性，只是覆盖了它的getter和setter。引自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty “对象中存在的属性描述符有两种主要形式：数据描述符和访问器描述符。数据描述符是一个具有值的属性，可以是也可以不是可写的。访问器描述符是由getter-setter对描述的属性。功能。“

因此，polyfill看起来像是将目标属性从“数据属性”更改为“访问者属性”。我认为这是填充这个的唯一方法吗？

Answer 1

我的问题是，为什么该属性在Chrome开发人员工具对象属性列表中不可见？

答案是：它是可见的，但现在它是一个吸气剂和制定者。

Object {}
get p: function () {
set p: function (val) {
__proto__: Object

jsfiddle

如果，你问为什么你看不到它的价值：那是因为这个值现在是私有的，只能通过使用getter读取。

console.log(o.p);

更新：阅读Mutator method

Mutator方法

来自维基百科，免费的百科全书

在计算机科学中，一个变异者   method是一种用于控制a的变化的方法   变量。它们也被广泛称为'''setter'''方法。通常是   setter伴随着'''getter'''（也称为访问者），   它返回私有成员变量的值。变异者   方法，有时称为“setter”，最常用于   面向对象编程，符合原则   封装。根据这个原则，成员变量a   class被私有隐藏并保护它们免受其他代码的攻击，并且   只能通过公共成员函数（mutator方法）修改，   它将所需的新值作为参数，可选地进行验证   它，并修改私有成员变量。

考虑这个例子

function MyClass() {
    var privateVar = 0;

    this.getPrivate = function () {
        return privateVar;
    }

    this.setPrivate = function (value) {
        privateVar = value;
    }
}

var newObject = new MyClass();

console.log(newObject);

console.log(newObject.getPrivate());

输出

MyClass {getPrivate: function, setPrivate: function}
getPrivate: function () {
setPrivate: function (value) {
__proto__: MyClass

0

在 jsfiddle

上

您可以查看该对象并查看公开方法getPrivate和setPrivate（类似于Object.defineProperty创建的类似真实的getter和setter），但是您无法看到成员变量privateVariable。您只能通过调用getPrivate公共方法来查看该值。

Object.defineProperty在chrome devtool下看不见的道具

1 个答案: