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.

CodePudding user response：

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

CodePudding user response：

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 create, 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 then it is looked up in the prototype of the prototype object and so on until it reaches the global object Object that is 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)});

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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