I am reading about prototype chaining in JS. I came across this schematic online.
My question is:
Since function A and B are Object of type Function shouldn't there be a Function and a Function.prototype Object somewhere in the inheritance tree?
1 Answer
The constructor functions are not being diagrammed hierarchically in the prototype chain, the Objects they construct are the focus of the diagram.
There is an important distinction (and confusion) in the difference between [[proto]] (accessible via obj.__proto__ where obj is any Object) and the Prototype property of an object, viz. obj.prototype.
This snippet may explain:
function A(name){
this.name = name
this.getName = function(){ return name }
}
function B(name){
A.call(this, name)
}
var b = new B('yep')
var anotherB = new B('me too')
console.log(b.getName()) // yep
/* both B & A constructors inherit from Function but B doesn't inherit from A */
console.log(B instanceof Function && A instanceof Function) //true
console.log(B.prototype === A.prototype) //false
console.log(B.__proto__ === A.__proto__) //true
console.log(B instanceof A) //false
/* an instance of B is not an instance of A */
console.log(b instanceof B) //true
console.log(b instanceof A) //false
/* an instance of B has the prototype of B but not the same [[proto]] as B */
console.log(B.prototype.isPrototypeOf(b)) //true
console.log(b.__proto__ === B.__proto__ ) //false
/* instances of B have the same [[proto]] but not the same [[proto]] as B */
console.log(b.__proto__ === anotherB.__proto__ ) //truefunction B does not inherit from function A. Both function A and function B inherit from Function which inherits from Object. They both have identical Prototype chains (abbreviated).
function A: function A -> Function -> Object
function B: function B -> Function -> Object
Which is different from the Objects they construct. In the case of the Object returned from function B, the prototype chain is B -> A -> Object.
7 Comments
Sandeep Gupta
I have edited the image to focus on what I want to use. Anyways. I have some problems with your answer. 1.function A -> Function -> Object. Function A or B have their own prototype. Which are empty objects. How can they inherit from Function. Maybe I am missing something from your answer. Could you please elaborate a little? 2.Most importantly, please cite some source. Thanks.
Matt Browne
When new objects are instantiated using a constructor function, the JS engine looks at the
prototype property of the constructor function and uses that to set the prototype of the new object. You could simulate this without calling new A() by writing var aInstance = Object.create(A.prototype) (I mention this only for illustrative purposes). Note that the constructor function's own prototype is Function.prototype - same as for all other functions.Matt Browne
@SKG No, I mean
Object.getPrototypeOf(B) === Function.prototype. The confusing part is that the internal prototype property (often referred to as [[proto]] in the literature and also accessible using .__proto__ in most browsers) is not the same as the prototype property of constructor functions. The prototype property refers only to the prototype that will be used when that constructor creates new objects; it does not refer to the prototype of the constructor function itself.Matt Browne
A good reference is robotlolita.me/2011/10/09/understanding-javascript-oop.html. And for a deeper understanding of prototypes in general, refer to this paper about the
Self programming language, which was largely the inspiration for JS's OO model (although there are some differences).
metame
I've edited my answer to clarify a bit and provide an example
|
prototypeproperty which is added to the chain of objects they construct.function Bdoesn't inherit fromfunction A.function Bis the constructor for an Object with the prototype ofB.