What is the difference between object assignment '=' and Object.create()

user_9918920 0
Viewed 398

I am going some deep into javascript object operations. Here my question is what is a different between const me = Object.create(person); and const me = person; here both operation gives me a slimier output. I mean it references object to new variable me.

const person = {
  isHuman: false,
  printIntroduction: function() {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

me.name = 'Matthew';  
me.isHuman = true;

me.printIntroduction();

const me2 = person;

me.name = 'Manan'; 
me.isHuman = false; 

me.printIntroduction();

In above code I have included both operation direct assignment and assign by using Object.create();. Here both variable referencing to objects person, but what is different between it? Can some one explain me? This question might be asked before but I cant find proper explanation. Simple explanation would be appreciated :-).

node.js object javascript
3 Answers

The first difference is that, when you use regular assignment both of your variables point to the same object, when you edit one, you edit the other. This does not happen with create.

const a = {};
const b = a;

b.do = 100;

console.log(a);

const c = Object.create(a);
c.dodo = 100;
console.log(a)

The 2nd difference, is that Object.create creates an object which has the first oject as a "prototype". Prototypes are the basis of how objects and inheritance works in javascript, for example when you have an object, it's default toString method is in the prototype. See this below

const a = {do : 100};
const c = Object.create(a);
console.log(c.do);
console.log(a.hasOwnProperty("do"));
console.log(c.hasOwnProperty("do"));

If yout run the above in a browser console and then log c, you will see that the do is in the __proto__ of c. not directly on c.

Whenever you have any object in javascript and call a property or a method on it, javascript will search it on that object an then go up the prototype chain. This allows you to save space so not every object has to carry the shared properties on it.

Fun side note, {} has all the functions objects have in its prototype, null does not so 

const a = Object.create(null);

// works as normal
console.log(a);
a.hello = "hello";
console.log(a);

// error
console.log(a.toString());
console.log(m + m);

EDIT : Sorry, slight mistake when you use Object.create and the edit the original, you do see the change appear in the prototype of the new.

user_132159320

Remember, person is a reference to an object. When you do Object.create(), you are creating a new object (i.e., a new reference) from an existing object. This new object has the original object as a prototype. You assign this new reference to me, and you can modify it without changing the original person object.

On the other hand, me2 = person, assigns the reference to the person object to me2. This means that me2 and person both refer to the same object, and changing one will change the other. You see this in action when you pass objects to functions.

In short, Object.create() should be used when you want to create a new object, and assignment should be used when you want to reference an existing object from a new variable.

user_107961720

The Object.create() method creates a new object, using an existing object as the prototype of the newly created object Object.create

Mean when you are doing 

const me = Object.create(person);
   // you are actually doing  
    me={}
    me.__proto__=person


var person = {
  isHuman: false,
  printIntroduction: function() {
  
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    
  }
};

const me = Object.create(person);
console.log('isHuman is own Property  obj me:'+me.hasOwnProperty('isHuman'))
me.name = 'Matthew';  
me.isHuman = true;

me.printIntroduction();
debugger


const me2 = person;
console.log('isHuman is own Property obj me2:'+me2.hasOwnProperty('isHuman'))


me2.name = 'Manan'; 
me2.isHuman = false; 

me2.printIntroduction();

user_37425020
Related