Understanding the difference between Object create and new SomeFunction

Question

I recently stumbled upon the Object create   method in JavaScript  and am trying to deduce how it is different from creating a new instance of an object with new SomeFunction    and when you would want to use one over the other   Consider the following example    x000D   x000D  var test     x000D    val  1  x000D    func  function     x000D      return this val  x000D      x000D     x000D  var testA   Object create test   x000D   x000D  testA val   2  x000D  console log test func        1 x000D  console log testA func        2 x000D   x000D  console log  other test    x000D  var otherTest   function     x000D    this val   1  x000D    this func   function     x000D      return this val  x000D       x000D     x000D   x000D  var otherTestA   new otherTest    x000D  var otherTestB   new otherTest    x000D  otherTestB val   2  x000D  console log otherTestA val      1  x000D  console log otherTestB val      2 x000D   x000D  console log otherTestA func        1 x000D  console log otherTestB func        2 x000D   x000D   x000D    Notice that the same behaviour is observed in both cases   It seems to me that the primary differences between these two scenarios are    The object used in Object create   actually forms the prototype of the new object  whereas in the new Function   from the declared properties functions do not form the prototype    You cannot create closures with the Object create   syntax as you would with the functional syntax   This is logical given the lexical  vs block  type scope of JavaScript    Are the above statements correct  And am I missing something   When would you use one over the other     EDIT  link to jsfiddle version of above code sample  http   jsfiddle net rZfYL

User · Answer

Here are the steps that happen internally for both calls:
(Hint: the only difference is in step 3)

new Test():

create new Object() obj
set obj.__proto__ to Test.prototype
return Test.call(obj) || obj; // normally obj is returned but constructors in JS can return a value

Object.create( Test.prototype )

create new Object() obj
set obj.__proto__ to Test.prototype
return obj;

So basically Object.create doesn't execute the constructor.

User · Answer

function Test        this prop1    prop1       this prop2    prop2       this func1   function            return this prop1   this prop2            Test prototype protoProp1    protoProp1   Test prototype protoProp2    protoProp2   var newKeywordTest   new Test    var objectCreateTest   Object create Test prototype       Object create      console log objectCreateTest prop1      undefined console log objectCreateTest protoProp1      protoProp1  console log objectCreateTest   proto   protoProp1      protoProp1     new       console log newKeywordTest prop1      prop1 console log newKeywordTest   proto   protoProp1      protoProp1   Summary   1  with new keyword there are two things to note   a  function is used as a constructor   b  function prototype object is passed to the   proto   property     or where   proto   is not supported  it is the second place where the new object looks to find properties  2  with Object create obj prototype  you are constructing an object  obj prototype  and passing it to the intended object   with the difference that now new object s   proto   is also pointing to obj prototype  please ref ans by xj9 for that

User · Answer

Object create Constructor prototype  is the part of new Constructor this is new Constructor implementation    1  define constructor function        function myConstructor name  age            this name   name          this age   age                myConstructor prototype greet   function            console log this name  this age               2  new operator implementation        let newOperatorWithConstructor   function name  age            const newInstance   new Object       empty object         Object setPrototypeOf newInstance  myConstructor prototype      set prototype          const bindedConstructor   myConstructor bind newInstance      this binding         bindedConstructor name  age      execute binded constructor function          return newInstance     return instance              3  produce new instance        const instance   new myConstructor  quot jun quot   28         const instance2   newOperatorWithConstructor  quot jun quot   28         console log instance         console log instance2           new Constructor implementation contains Object create method       newOperatorWithConstructor   function name  age            const newInstance   Object create myConstructor prototype      empty object  prototype chaining          const bindedConstructor   myConstructor bind newInstance      this binding         bindedConstructor name  age      execute binded constructor function          return newInstance     return instance                 console log newOperatorWithConstructor  quot jun quot   28

User · Answer

Let me try to explain  more on Blog      When you write Car constructor var Car   function      this is how things are internally   We have one  prototype  hidden link to Function prototype which is not accessible and one prototype link to Car prototype which is accessible and has an actual constructor of Car  Both Function prototype and Car prototype have hidden links to Object prototype  When we want to create two equivalent objects by using the new operator and create method then we have to do it like this  Honda   new Car    and Maruti   Object create Car prototype   What is happening   Honda   new Car     mdash  When you create an object like this then hidden  prototype  property is pointed to Car prototype  So here  the  prototype  of the Honda object will always be Car prototype  mdash  we don t have any option to change the  prototype  property of the object  What if I want to change the prototype of our newly created object  Maruti   Object create Car prototype   mdash  When you create an object like this you have an extra option to choose your object s  prototype  property  If you want Car prototype as the  prototype  then pass it as a parameter in the function  If you don t want any  prototype  for your object then you can pass null like this  Maruti   Object create null     Conclusion  mdash  By using the method Object create you have the freedom to choose your object  prototype  property  In new Car     you don t have that freedom   Preferred way in OO JavaScript     Suppose we have two objects a and b   var a   new Object    var b   new Object      Now  suppose a has some methods which b also wants to access  For that  we require object inheritance  a should be the prototype of b only if we want access to those methods   If we check the prototypes of a and b then we will find out that they share the prototype Object prototype    Object prototype isPrototypeOf b     true a isPrototypeOf b     false  the problem comes into the picture here     Problem  mdash  we want object a as the prototype of b  but here we created object b with the prototype Object prototype  Solution  mdash  ECMAScript 5 introduced Object create    to achieve such inheritance easily  If we create object b like this   var b   Object create a     then   a isPrototypeOf b     true  problem solved  you included object a in the prototype chain of object b     So  if you are doing object oriented scripting then Object create   is very useful for inheritance

User · Answer

Internally Object create does this   Object create   function  o        function F          F prototype   o      return new F         The syntax just takes away the illusion that JavaScript uses Classical Inheritance

User · Answer

The difference is the so-called  pseudoclassical vs  prototypal inheritance   The suggestion is to use only one type in your code  not mixing the two   In pseudoclassical inheritance  with  new  operator   imagine that you first define a pseudo-class  and then create objects from that class  For example  define a pseudo-class  Person   and then create  Alice  and  Bob  from  Person    In prototypal inheritance  using Object create   you directly create a specific person  Alice   and then create another person  Bob  using  Alice  as a prototype  There is no  class  here  all are objects   Internally  JavaScript uses  prototypal inheritance   the  pseudoclassical  way is just some sugar   See this link for a comparison of the two ways

User · Answer

Accordingly to this answer and to this video new keyword does next things    Creates new object  Links new object to constructor function  prototype   Makes this variable point to the new object  Executes constructor function using the new object and implicit perform return this  Assigns constructor function name to new object s property constructor    Object create performs only 1st and 2nd steps

User · Answer

This   var foo   new Foo      and  var foo   Object create Foo prototype     are quite similar   One important difference is that new Foo actually runs constructor code  whereas Object create will not execute code such as  function Foo         alert  This constructor does not run with Object create        Note that if you use the two-parameter version of Object create   then you can do much more powerful things

User · Answer

The object used in Object create actually forms the prototype of the new object  where as in the new Function   form the declared properties functions do not form the prototype    Yes  Object create builds an object that inherits directly from the one passed as its first argument   With constructor functions  the newly created object inherits from the constructor s prototype  e g    var o   new SomeConstructor      In the above example  o inherits directly from SomeConstructor prototype   There s a difference here  with Object create you can create an object that doesn t inherit from anything  Object create null    on the other hand  if you set SomeConstructor prototype   null  the newly created object will inherit from Object prototype      You cannot create closures with the Object create syntax as you would with the functional syntax  This is logical given the lexical  vs block  type scope of JavaScript    Well  you can create closures  e g  using property descriptors argument   var o   Object create  inherited  1       foo        get   function         a closure       var closured    foo         return function              return closured  bar                              o foo      foobar    Note that I m talking about the ECMAScript 5th Edition Object create method  not the Crockford s shim   The method is starting to be natively implemented on latest browsers  check this compatibility table

User · Answer

Very simply said  new X is Object create X prototype  with additionally running the constructor function   And giving the constructor the chance to return the actual object that should be the result of the expression instead of this    That   s it      The rest of the answers are just confusing  because apparently nobody else reads the definition of new either

User · Answer

Object creation variants      Variant 1    new Object    -  Object constructor without arguments   var p1   new Object        new Object    create and return empty object - gt      var p2   new Object        new Object    create and return empty object - gt      console log p1      empty object - gt      console log p2      empty object - gt         p1 and p2 are pointers to different objects console log p1     p2      false  console log p1 prototype      undefined     empty object which is in fact Object prototype console log p1   proto               empty object to which p1   proto   points console log Object prototype          console log p1   proto       Object prototype      true     null  which is in fact Object prototype   proto   console log p1   proto     proto        null  console log Object prototype   proto        null       Variant 2    new Object person   -  Object constructor with argument   const person         name   no name       lastName   no lastName       age  -1        new Object person   return  person   which is pointer to the object - gt      - gt    name   no name   lastName   no lastName   age  -1   var p1   new Object person        new Object person   return  person   which is pointer to the object - gt      - gt    name   no name   lastName   no lastName   age  -1   var p2   new Object person       person  p1 and p2 are pointers to the same object console log p1     p2      true console log p1     person      true console log p2     person      true  p1 name    John      change  name  by  p1  p2 lastName    Doe      change  lastName  by  p2  person age   25     change  age  by  person      when print  p1    p2  and  person   it s the same result     because the object they points is the same console log p1        name   John   lastName   Doe   age  25   console log p2        name   John   lastName   Doe   age  25   console log person        name   John   lastName   Doe   age  25         Variant 3 1    Object create person    Use Object create with simple object  person    Object create person   will create and return  new empty object and add property    proto    to the same new empty object  This property    proto    will point to the object  person    const person             name   no name           lastName   no lastName           age  -1          getInfo  function getName                return    this name    this lastName     this age              var p1   Object create person    var p2   Object create person        p1   proto    and  p2   proto    points to    the same object - gt   person       name   no name   lastName   no lastName   age  -1  getInfo   Function  getName    console log p1   proto     console log p2   proto     console log p1   proto       p2   proto        true  console log person   proto           which is the Object prototype       person    p1  and  p2  are different console log p1     person      false console log p1     p2      false console log p2     person      false       name   no name   lastName   no lastName   age  -1  getInfo   Function  getName    console log person    console log p1      empty object -     console log p2      empty object -        add properties to object  p1      properties with the same names like in object  person   p1 name    John   p1 lastName    Doe   p1 age   25      add properties to object  p2      properties with the same names like in object  person   p2 name    Tom   p2 lastName    Harrison   p2 age   38        name   no name   lastName   no lastName   age  -1  getInfo   Function  getName    console log person         name   John   lastName   Doe   age  25   console log p1         name   Tom   lastName   Harrison   age  38   console log p2       use by    proto    link from  p1  to  person       person s function  getInfo  console log p1 getInfo        John Doe  25      use by    proto    link from  p2  to  person       person s function  getInfo  console log p2 getInfo        Tom Harrison  38        Variant 3 2    Object create Object prototype    Use Object create with built-in object -   Object prototype    Object create Object prototype   will create and return  new empty object and add property    proto    to the same new empty object  This property    proto    will point to the object  Object prototype        Object create Object prototype        1  create and return empty object - gt         2  add to  p1  property    proto     which is link to  Object prototype  var p1   Object create Object prototype        Object create Object prototype        1  create and return empty object - gt         2  add to  p2  property    proto     which is link to  Object prototype  var p2   Object create Object prototype    console log p1          console log p2          console log p1     p2      false  console log p1 prototype      undefined  console log p2 prototype      undefined  console log p1   proto       Object prototype      true  console log p2   proto       Object prototype      true       Variant 4    new SomeFunction         this  in constructor-function  Person     represents a new instace     that will be created by  new Person          and returned implicitly function Person name  lastName  age         this name   name      this lastName   lastName      this age   age         -----------------------------------------------------------------         --- only for demonstration ---        if add function  getInfo  into        constructor-function  Person          then all instances will have a copy of the function  getInfo                 this getInfo  function getInfo             return this name         this lastName          this age                       -----------------------------------------------------------------        Person prototype  is an empty object     before add function  getInfo   console log Person prototype      Person        With  getInfo  added to  Person prototype      instances by their properties    proto        will have access to the function  getInfo      With this approach  instances not need    a copy of the function  getInfo  for every instance  Person prototype getInfo   function getInfo         return this name         this lastName          this age              after function  getInfo  is added to  Person prototype  console log Person prototype      Person   getInfo   Function  getInfo        create instance  p1  var p1   new Person  John    Doe   25       create instance  p2  var p2   new Person  Tom    Harrison   38       Person   name   John   lastName   Doe   age  25   console log p1       Person   name   Tom   lastName   Harrison   age  38   console log p2        p1   proto    points to  Person prototype  console log p1   proto        Person   getInfo   Function  getInfo         p2   proto    points to  Person prototype  console log p2   proto        Person   getInfo   Function  getInfo     console log p1   proto       p2   proto        true      p1  and  p2  points to different objects instaces of  Person   console log p1     p2      false      p1  by its property    proto    reaches  Person prototype getInfo      and use  getInfo  with  p1 -instance s data console log p1 getInfo        John Doe  25       p2  by its property    proto    reaches  Person prototype getInfo      and use  getInfo  with  p2 -instance s data console log p2 getInfo        Tom Harrison  38

[javascript] Understanding the difference between Object.create() and new SomeFunction()

Examples related to javascript

Examples related to prototype

Examples related to object-create