Why is it not printing undefined?

Question

const person = {
  isHuman: false,
  name:"Jon",
  printIntroduction: function() {
    console.log(this.name);
  }
};

const me = Object.create(person);

me.name = 'Matthew'; 
me.isHuman = true; 
delete me.name
me.printIntroduction();

output : "Jon"

When I'm deleting the name property of "me" object, why is it pointing to person object's name property?

please suggest good reference material to understand this.

Take a look at https://stackoverflow.com/questions/4166616/understanding-the-difference-between-object-create-and-new-somefunction, maybe it helps — Fabian Lauer, Nov 03 '21 at 08:18

score 3 · Answer 1 · answered Nov 03 '21 at 08:37

3

Because "person" is the "me"-object's prototype. If a property is not found on an object (because of deletion), JS is looking up the prototype-chain for that property. That's why you're getting "Jon".

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

answered Nov 03 '21 at 08:37

niorad

1,330
10
14

Exactly. This link explains how the `delete` method works through the prototype chain: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete#description – Tonio Nov 03 '21 at 08:44

axiac · Answer 2 · 2021-11-03T10:24:43.330

Object.create() creates a new object using an existing object as the prototype of the new object it creates.

The properties of the prototype are not copied into the new object created by Object.create(). The prototype inheritance works by linking the new object to its prototype object.

When it is created, me does not have any property on its own. It inherits the properties of person and this is visible if you run me.printIntroduction() immediately after const me = Object.create(person);.

When a property (attribute or function) of the new object is read (e.g. console.log(me.name)), the interpreter looks for the property (name) in the object (me). If such a property does not exist then it searches for it in the prototype (which is the person object in this case). Searching for the property in the prototype object works the same; if it cannot be found there, then it is looked up in the prototype of the prototype object and so on until it reaches the root of the prototype chain.

When a property is set in the object then the prototype chain is not walked any more. It is set directly in the object used in the statement. The same happens when a property is deleted.

Use Object.getOwnPropertyNames() to find the list of property names that are own to me and not inherited from person:

const person = {
  isHuman: false,
  name:"Jon",
  printIntroduction: function() {
    console.log(this.name);
  }
};

const me = Object.create(person);
me.printIntroduction();
console.log({ own_properties_after_creation: Object.getOwnPropertyNames(me)});

me.name = 'Matthew'; 
me.isHuman = true; 
me.printIntroduction();
console.log({ own_properties_after_set: Object.getOwnPropertyNames(me)});

delete me.name
me.printIntroduction();
console.log({ own_properties_after_delete: Object.getOwnPropertyNames(me)});

Read more about the prototype inheritance in JavaScript in the JavaScript documentation.

Why is it not printing undefined?

2 Answers2