In the absence of using the class keyword, what is the difference between the following two ways to construct an inherited object? In the first one I'm attaching things on the .prototype and in the second one I'm doing it directly on the function. What would be the difference?
function basicPrototype(){};
basicPrototype.prototype.sayHi = function(name){
console.log("Hello,", name);
}
function basicConstructor() {
return this; // make sure to pass it a this
}
let basicObj = basicConstructor.call(Object.create(basicPrototype.prototype));
basicObj.sayHi("Tommy");
And removing the .prototype on the two lines?
function basicPrototype(){};
basicPrototype.sayHi = function(name){
console.log("Hello,", name);
}
function basicConstructor() {
return this; // make sure to pass it a this
}
let basicObj = basicConstructor.call(Object.create(basicPrototype));
basicObj.sayHi("Tommy");
The code of both examples can be cleaned up since
basicConstructor.calldoes not have any effect to the passed object which shortly before was created viaObject.reate.In addition
basicConstructordespite its name is not a constructor at all since it never creates instances due to never being invoked withnew. (It also does not feature any implementations neither within the function body nor own prototypal ones.) ThusbasicConstructoracts more like a (identity?) function/method which returns the reference of its call time'sthiscontext. So it's dispensable.From the above comments ...
Well it is pretty obvious that the former creates a new object with
basicPrototype.prototypeset as the new object's prototype, the latter creates an object which has the functionbasicPrototypeset as the new object's prototype ...... which means that calling/sending
sayHion/tobasicObjfor both cases technically is the same. SincebasicObjhas not such an own property there will be lookups into both object's prototype chains.And both methods are found immediately since both prototypes feature
sayHias their own property which is clear for the former case but (for some) maybe surprising for the latter case. (I had to look at it twice/three times myself and countercheck again.) The second example does implement and assignsayHias direct property to the functionbasicPrototype. Thus for the latter case the function mainly acts as a dump object likebasicPrototype.prototypedoes for the former case.As final conclusion one could state. The example code is a tricky brainteaser where at no point anything class related (in terms of constructor functions and constructor function prototypes) is involved. Everything gets achieved by the class/constructor less alternative of
Object.create. The rest is just tricky, harmless obfuscation.