class Human{
talk(){
return 'talking';
}
}
class SuperHuman extends Human{
constructor(){
super();
this.age = 12;
}
fly(){
return 'flying';
}
}
let me = new Human();
let you = new SuperHuman();
you.gender = 'male';
console.log(you);
let she = Object.create(you);
console.log(she);
when study prototypal inheritance the she(object) proto looks like this.
在研究原型遗传时,客体原型是这样的。
but my expectation is it should look like this...
但我的期望是它应该是这样的..。
Why it shows in this way?
为什么会以这种方式表现出来?
更多回答
Hi! Please post code, error messages, markup, and other textual information as text, not as a picture of text. Why: meta.stackoverflow.com/q/285551/157247
嗨!请以文本形式发布代码、错误消息、标记和其他文本信息,而不是文本图片。原因:meta.stackoverflow.com/Q/285551/157247
Honestly I find this pretty confusing too. Not sure why the Chrome devtools chose to display .__proto__.constructor.name
there.
老实说,我也觉得很困惑。不知道为什么Chrome devtools选择显示。这里有proto__.constructor.name。
@JonasWilms - It's showing (speaking loosely) the type or kind of the object __proto__
refers to.
@JonasWilms-它显示(不严格地说)__proto__指的对象的类型或种类。
@t.j. yeah, but actually that's the next object in the hierarchy. I'd expect that anybody looking at that hierarchy is familiar with the prototype chain, this "type" is rather class like thinking. I think the devtools mix two concepts here in a confusing way.
@T.J.是的,但实际上那是层次结构中的下一个对象。我希望任何关注该层次结构的人都熟悉原型链,这种“类型”更像是类的思考。我认为DevTool在这里以一种令人困惑的方式混合了两个概念。
@JonasWilms - Oh, I agree it's confusing -- certainly I've been confused by it more than once. :-) Also, they really shouldn't be using __proto__
where they mean [[Prototype]]
. :-)
@JonasWilms-哦,我同意这很令人困惑--当然,我不止一次被它迷惑了。:-)此外,他们真的不应该使用__Proto__,他们的意思是[[Prototype]]。:-)
优秀答案推荐
Devtools is just telling you that the prototype of she
is a SuperHuman
(specifically, you
), not that the prototype is the function SuperHuman
.
Devtools只是告诉你,她的原型是一个超人(具体来说,你),而不是原型是功能超人。
The prototype chain of she
is:
SHE的原型链是:
she −> you −> SuperHuman.prototype −> Human.prototype −> Object.prototype
she
's prototype is you
because you created it with Object.create(you)
.
you
's prototype is SuperHuman.prototype
because you created it with new SuperHuman
.
SuperHuman.prototype
's prototype is Human.prototype
because you created the SuperHuman
function via class SuperHuman extends Human
which sets up two chains of inheritance (one for the prototype
objects and the other for the functions themselves).
Human.prototype
's prototype is Object.prototype
because that's what class
does when there's no extends
.
As a complete aside, it's unfortunate that some devtools implementations (such as the one in Chromium-based browsers) use __proto__
where what they mean is [[Prototype]]
. For one thing, it encourages using __proto__
, which one shouldn't (not all objects have it and it can be shadowed; always use Object.getPrototypeOf
or Object.setPrototypeOf
). Separately, it's misleading: Chromium's devtools will happily show you __proto__
for an object that doesn't have the __proto__
accessor property at all because it doesn't inherit from Object.prototype
(which is where the accessor comes from):
另外,不幸的是,有些DevTools实现(例如基于Chromium的浏览器中的实现)使用__proto__,其中它们的意思是[[Prototype]]。首先,它鼓励使用__proto__,而不应该使用__proto__(并不是所有的对象都有它,它可以被隐藏;总是使用Object.getPrototypeOf或Object.setPrototypeOf)。另外,它具有误导性:对于一个根本没有__proto__存取器属性的对象,Chrome的DevTools会很高兴地向您显示__proto__,因为它不是从对象原型(这就是存取器的来源)继承的:
// An object with no prototype
const p = Object.create(null);
// An object using that as its prototype
const c = Object.create(p);
// An object inheriting from Object.prototype has the `__proto__` accessor property:
console.log("__proto__" in {}); // true
// `c` does not have the `__proto__` accessor property:
console.log("__proto__" in c); // false
// And yet, Chromium's devtools show you one if you expand it in the console
console.log(c);
Look in the real browser console.
更多回答
For what it's worth, I go into the inheritance chains set up by class
syntax in a fair bit of detail in Chapter 4 of my recent book JavaScript: The New Toys. Links in my profile if you're interested.
无论如何,在我的新书《JavaScript:The New Toys》的第4章中,我相当详细地介绍了由类语法建立的继承链。链接在我的个人资料,如果你感兴趣。
"it's unfortunate that some devtools implementations use __proto__
where what they mean is [[Prototype]]
." - couldn't agree more. They use bracket syntax for other internals already, so why not here? bugs.chromium.org/p/chromium/issues/detail?id=817305
“不幸的是,有些DevTools实现使用了__proto__,他们的意思是[[Prototype]]。”--完全同意。他们已经在其他内部使用括号语法了,那么为什么不在这里呢?Bugs.chromium.org/p/chromium/issues/detail?id=817305
我是一名优秀的程序员,十分优秀!