JavaScript inheritance: Object.create vs new

by

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.

More Related Contents:

  1. Prototypical inheritance – writing up [duplicate]
  2. What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
  3. JavaScript inheritance and the constructor property
  4. Why is it necessary to set the prototype constructor?
  5. Understanding the difference between Object.create() and new SomeFunction()
  6. Why wouldn’t I use Child.prototype = Parent.Prototype rather than Child.prototype = new Parent(); for Javascript inheritance?
  7. Using “Object.create” instead of “new”
  8. Benefits of prototypal inheritance over classical?
  9. prototype based vs. class based inheritance
  10. Understanding prototypal inheritance in JavaScript
  11. JavaScript Inheritance [closed]
  12. How to extend a class without having to use super in ES6?
  13. How to extend Function with ES6 classes?
  14. classical inheritance vs prototypal inheritance in javascript
  15. How to implement inheritance in JS Revealing prototype pattern?
  16. Grasping prototypical Inheritance through pseudoclassical instantiation (JavaScript)
  17. Can I construct a JavaScript object without using the new keyword?
  18. Javascript Class Inheritance For Functions
  19. Pseudo-classical inheritance with privacy?
  20. Subclassing Javascript Arrays. TypeError: Array.prototype.toString is not generic
  21. Understanding Crockford’s Object.create shim
  22. Why are my JavaScript object properties being overwritten by other instances?
  23. Objects don’t inherit prototyped functions
  24. Define Private field Members and Inheritance in JAVASCRIPT module pattern
  25. How to check if a Javascript Class inherits another (without creating an obj)?
  26. Performing inheritance in JavaScript
  27. Typescript: can not access member value in inherited class constructor
  28. Advantages of setting the “constructor” Property in the “prototype”
  29. Extending React.js components
  30. Super in Backbone

Leave a Comment