JavaScript inheritance: Object.create vs new
inheritance, javascript, object-create
Solution
In your question you have mentioned that `Both examples seem to do the same thing`, It's not true at all, because
Your first example
function SomeBaseClass(){...}
SomeBaseClass.prototype = {
doThis : function(){...},
doThat : function(){...}
}
function MyClass(){...}
MyClass.prototype = Object.create(SomeBaseClass.prototype);
In this example, you are just inheriting `SomeBaseClass' prototype` but what if you have a property in your `SomeBaseClass` like
function SomeBaseClass(){
this.publicProperty='SomeValue';
}
and if you use it like
var obj=new MyClass();
console.log(obj.publicProperty); // undefined
console.log(obj);
The `obj` object won't have `publicProperty` property like in this example.
Your second example
MyClass.prototype = new SomeBaseClass();
It's executing the `constructor` function, making an instance of `SomeBaseClass` and inheriting the whole `SomeBaseClass` object. So, if you use
var obj=new MyClass();
console.log(obj.publicProperty); // SomeValue
console.log(obj);
In this case its `publicProperty` property is also available to the `obj` object like in this example.
Since the `Object.create` is not available in some old browsers, in that case you can use
if(!Object.create)
{
Object.create=function(o){
function F(){}
F.prototype=o;
return new F();
}
}
Above code just adds `Object.create` function if it's not available so you can use `Object.create` function and I think the code above describes what `Object.create` actually does. Hope it'll help in some way.
Problem
In JavaScript what is the difference between these two examples: Prerequisite: ``` function SomeBaseClass(){ } SomeBaseClass.prototype = { doThis : function(){ }, doThat : function(){ } } ``` Inheritance example A using Object.create: ``` function MyClass(){ } MyClass.prototype = Object.create(SomeBaseClass.prototype); ``` Inheritance example B using the new keyword ``` function MyClass(){ } MyClass.prototype = new SomeBaseClass(); ``` Both examples seem to do the same thing. When would you chose one over the other? An additional question: Consider code in below link (line 15), where a reference to the the function's own constructor is stored in the prototype. Why is this useful? https://github.com/mrdoob/three.js/blob/master/src/loaders/ImageLoader.js Excerpt (if you don't want to open the link): ``` THREE.ImageLoader.prototype = { constructor: THREE.ImageLoader } ```