属性扩展 class，Getter 扩展 class。 Getter 从未被调用

Question

我正在使用新的 Class Public Field Declarations available in Chrome 72，我遇到了这个非常奇怪的行为：

class Extended {
  property = 5;
}

class Extending extends Extended {
  get property() {
    return false;
  }
}

const extending = new Extending();

console.log(extending.property);
//logs 5

如果这是预期的结果，我会感到惊讶，因为它使扩展 class 上的 getter 无法访问。这是一个错误吗？

Answer 1

调用了getter。当您首先调用 extending.property 时，Extending class 将被检查属性，如果在那里没有找到，那么它会在 Extended class 中搜索属性，一旦找到，它将记录属性.

的值

让我们检查另外 2 个代码片段：

1.

class Extended {

}

class Extending extends Extended {
  get property() {
    return false;
  }
}

const extending = new Extending();

console.log(extending.property);
//logs false

此代码将打印到控制台 false，因为在扩展 class 和扩展 class 中都找不到属性，那么 getter会 return 虚假陈述吗。

2.

class Extended {
  property = 5;
}

class Extending extends Extended {
      property = 6;
      get property() {
        return false;
      }
    }

const extending = new Extending();

console.log(extending.property);
//logs 6

这将向控制台打印 6，因为属性是在扩展 class 中找到的，它不会在扩展 class

中继续检查它

属性扩展 class，Getter 扩展 class。 Getter 从未被调用

Property on extended class, Getter on extending class. Getter is never called

javascript

google-chrome

ecmascript-6

es6-class

ecmascript-next

属性 扩展 class，Getter 扩展 class。 Getter 从未被调用

Property on extended class, Getter on extending class. Getter is never called

javascript

google-chrome

ecmascript-6

es6-class

ecmascript-next

属性扩展 class，Getter 扩展 class。 Getter 从未被调用