英文:
why i am getting "age" property in my object , it should be only in prototype
问题
为什么我在
的主对象中获得了一个age getter，它应该只在原型中。
class PersonCl {
constructor(fullName, birthYear) {
this.fullName = fullName;
this.birthYear = birthYear;
}
// 实例方法
calcAge() {
console.log(2037 - this.birthYear);
}
greet() {
console.log(`嗨，${this.fullName}`);
}
get age() {
return 2037 - this.birthYear;
}
set fullName(name) {
if (name.includes(' ')) this._fullName = name;
else alert(`${name} 不是一个完整的姓名！`);
}
get fullName() {
return this._fullName;
}
// 静态方法
static hey() {
console.log('嘿，你好👋');
}
}
class StudentCl extends PersonCl {
constructor(fullName, birthYear, course) {
// 必须首先调用 super 函数！
super(fullName, birthYear);
this.course = course;
}
}
const martha = new StudentCl('Martha Jones', 2012, '计算机科学');
console.log(martha);
也许所有的getter都被视为普通属性，我不确定（请原谅我的英语）。这是因为super函数还是继承的原因吗？
英文:
why I am getting a age getter in main Object it should be in prototype only
class PersonCl {
constructor(fullName, birthYear) {
this.fullName = fullName;
this.birthYear = birthYear;
}
// Instance methods
calcAge() {
console.log(2037 - this.birthYear);
}
greet() {
console.log(`Hey ${this.fullName}`);
}
get age() {
return 2037 - this.birthYear;
}
set fullName(name) {
if (name.includes(' ')) this._fullName = name;
else alert(`${name} is not a full name!`);
}
get fullName() {
return this._fullName;
}
// Static method
static hey() {
console.log('Hey there 👋');
}
}
class StudentCl extends PersonCl {
constructor(fullName, birthYear, course) {
// Always needs to happen first!
super(fullName, birthYear);
this.course = course;
}
}
const martha = new StudentCl('Matha Jones', 2012, 'Computer Science');
console.log(martha);
maybe all the getter considered as a regular properties idk (pardon my English) is it becuase of super function or inheritance ?
答案1
得分: 2
age getter 在原型上，而不是作为一个自有属性存在于主对象上，就像控制台所让你认为的那样 - 这就是为什么你截图中的 age getter 属性不像其他属性（如 bithYear、course 和 _fullYear）那样加粗，因为它们都是自有属性。自从 Chrome 95 版本开始，它会（来源）：
> 总是将自有属性加粗并排在控制台的前面
注意：你示例中的 getter 属性也显示为灰色，这表示它们是不可枚举的。
以下是另一个示例，演示了当在主对象上记录时，原型上的 getter 仍然会出现，只是不加粗：
const o = {};
Object.defineProperty(o, "b", { // 添加一个可枚举的 getter（可枚举以消除灰色效果，以突出加粗的更改）
get() {
return 2;
},
enumerable: true
});
const r = Object.create(o); // 创建以 `o` 为原型的空对象 `r`
r.a = 1; // 自有属性
console.log(r);
在 Chrome 中的示例输出中，注意到 b 不加粗，而 a 由于是自有属性，所以会加粗显示。
如果你不确定某个属性是否存在于主对象上，最可靠的检查方式是使用 Object.hasOwn()，或者如果你不能支持它，可以使用 Object.prototype.hasOwnProperty()。
英文:
The age getter is on the prototype, not on the main object as an own-property like the console is making you think - that's why the age getter property in your screenshot isn't bold like the other properties such as bithYear, course and _fullYear which are all own-properties. Since Chrome 95, it will (source):
> Always bold and sort own properties first in the Console
Note: The getter properties in your example also appear greyed out, which indicates that they're non-enumerable.
Here's another example that shows how a getter on the prototype still appears on the main object when logged, just non-bolded:
<!-- begin snippet: js hide: true console: false babel: false -->
<!-- language: lang-js -->
const o = {};
Object.defineProperty(o, "b", { // add `b` with an enumerable getter (enmerable to remove the greyed out effect to highlight the change in boldness)
get() {
return 2;
},
enumerable: true
});
const r = Object.create(o); // creates empty object `r` with `o` as the prototype
r.a = 1; // own-property
console.log(r);
<!-- language: lang-html -->
See browser console for output
<!-- end snippet -->
Example output in Chrome, notice how b is not bold, whereas a is as a is an own-property:
If you're unsure about if something is on the main object, the most reliable check is to use Object.hasOwn(), or if you can't support that Object.prototype.hasOwnProperty()
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论