What is the real difference between new vs Object.create()

Question

I am trying to understand the real difference between keywords new and Object.create()

Explaination:

• a1 is function while a2 is an object
• a1 & a2 are having key1 as default property. key2 is being assigned after an instance bxx is created from them. to check whether bxx is independent object itself or just a reference.

"use strict";

function a1() {
  this.key1 = "value 1";
}

let a2 = {
  key1: "value 1"
};

let b1new, b1obj, b2new, b2obj;

try {
  b1obj = Object.create(a1);
} catch (e) {
  console.error("Error a1: ", e.message)
}
try {
  b1new = new a1();
} catch (e) {
  console.error("Error a1: ", e.message)
}


try {
  b2obj = Object.create(a2);
} catch (e) {
  console.error("Error a2: ", e.message)
}
try {
  b2new = new a2();
} catch (e) {
  console.error("Error a2: ", e.message)
}

//let b = new a();

a1.key2 = "value 2";
a2.key2 = "value 2";

if (b1obj) {
  console.log("b1obj.key1: ", b1obj.key1);
  console.log("b1obj.key2: ", b1obj.key2);
}
if (b1new) {
  console.log("b1new.key1: ", b1new.key1);
  console.log("b1new.key2: ", b1new.key2);
}
if (b2obj) {
  console.log("b2obj.key1: ", b2obj.key1);
  console.log("b2obj.key2: ", b2obj.key2);
}
if (b2new) {
  console.log("b2new.key1: ", b2new.key1);
  console.log("b2new.key2: ", b2new.key2);
}

Output:

"Error a2: " "a2 is not a constructor"    
"b1obj.key1: " undefined    
"b1obj.key2: " "value 2"    
"b1new.key1: " "value 1"    
"b1new.key2: " undefined    
"b2obj.key1: " "value 1"    
"b2obj.key2: " "value 2"

Questions:

1. Why can't use new on a2 ?
2. Why b1obj.key1 is undefined ?
3. Why b2obj.key2 is still referring to parent's property?

Answer 1

Please see following answers.

1. Why can't use new on a2 ?

Because new keyword can only be used with constructors/classes. In Javascript functions can be used as constructors. And a2 is an Object

2. Why b1obj.key1 is undefined ?

Since you haven't used new keyword for a1, instance will not be created and you won't be able to use properties defined in this. And Object.create() will create an empty object with its prototype set to a1 as object not function (function can also be treated as objects in JavaScript)

3. Why b2obj.key2 is still referring to parent's property?

Because you haven't overridden it.

What is the real difference between new vs Object.create()

new is used for constructor functions and Object.create() is used to inherit Objects. Also, Object.create() can be used with functions, but then function will act like normal object and not constructor.

Answer 2

1. new can be used only with a function or a class. When a function is executed as new User(...), it does the following steps:

   • A new empty object is created and assigned to this.

   • The function body executes. Usually it modifies this, adds new properties to it.

   • If there is no explicit return statement, the value of this is returned.

---

2. b1obj.key1 is undefined because Object.create first parameter is an object wich becomes a prototype of created object. In this case it is the a1 function, which doesn't have a key1 property assigned, it only assignes key1 to its this when called.

---

3. b2obj has the a2 object as its prototype, so it has access to its key2 property

Suming up: while new keyword is more often used to create new instances of objects from an existing 'template', Object.create is more flexible and allows you to work with a prototype, create property descriptors. For example, you can create a shallow copy of object:

let clone = Object.create(Object.getPrototypeOf(obj), 
                          Object.getOwnPropertyDescriptors(obj));

I suggest you to read this article about new keyword and this one about Object.create and other prototype methods.

UPDATE (about the relationship between object and its prototype): Once you have created a new object, changing its properties does not affect the prototype. For example,

let a2 = {
    key2: "some text"
};
let b2 = Object.create(a2);
a2.key2 = "I am a2";
b2.key2 = "I am b2";

alert(a2.key2 + ", " + b2.key2);

will alert I am a2, I am b2. That's because b2 has its own key2 property. But If it doesn't, JavaScript will look for it in its prototype. You can find a detailed description of the prototype inheritance here