为什么Object.getPrototypeOf（）和Constructor.prototype记录不同的值

Question

In following code, using getPrototypeOf() and constructor.prototype gives different values.

function C(){ }
function D(){ }

C.prototype.fname = "John";  

console.log(Object.getPrototypeOf(C)); //function () {}
console.log(C.prototype); // C{fname: "John"}

Answer 1

That is because Object.prototype.isPrototypeOf() returns the prototype inherited from its parent constructor.

function C(){ }

Now this is constructed by primitive type Function

Hence when you call getPrototypeOf on C __Proto__ lookup from inherited parent constructor is returned(Read this description ).

See the below for illustration: See the inline comments for understanding

typeof C // "function"
C instanceof Function // True
Object.getPrototypeOf(C) === Function.constructor.prototype // "True"
Function.constructor.prototype // "function(){}"
Object.getPrototypeOf(C) // "function(){}"

Now the next part:

C.prototype.fname = "John";
typeof C.prototype // object

Hence its constructor becomes C() with prototype object chain inherited from C() which will be inherited when you create instance like this new C()

Hence:

C.prototype.constructor // "function C(){}" -- Parent constructor

So when you lookup Prototype on C() it returns the prototype inherited from its contructor like below

C.prototype.constructor === C //true
C.prototype === C.prototype.constructor.prototype // True
C.prototype.constructor.prototype // C {fname: "John"}
C.prototype // C {fname: "John"}

Conclusion:

When ever you search for a prototype on a Object or Function lookup happens on the properties inherited from its parent constructor.

Object.getPrototypeOf(C) === C.constructor.prototype //true
Object.getPrototypeOf(C) === Function.prototype // true
C.prototype === (new C()).__proto__ // true (this is for illustration only dont use __proto__ in your code)

Object.getPrototypeOf(C) is not equal to C.prototype because their constructors are different.

---

References:

• https://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype

Answer 2

console.log(Object.getPrototypeOf(C)); 

This returns the prototype of the class C rather than an instance of C. These should return the same result:

console.log(Object.getPrototypeOf(new C()));
console.log(C.prototype);

Answer 3

Object.getPrototypeOf(C); is basically doing the same thing that C.__proto__ does, which is it

"Points to the object which was used as prototype when the object was instantiated."

When C() was instantiated, it was a function. Check out this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto

And part of the description of Object.prototype from MDN:

"All objects in JavaScript are descended from Object; all objects inherit methods and properties from Object.prototype, although they may be overridden (except an Object with a null prototype, ie Object.create(null))."

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

Meaning C.prototype is just pointing to the object that contains the methods and properties an object instantiated from it will inherit (or in this case it was overridden to a string), while Object.getPrototypeOf(C) is looking at the initial object that was used to create C aka C.__proto__ .