Who can explain why the results of these two consoles are the same?

Question

This is a constructor function,and it has two instance object,then I change them with different depth,but result I can't understand.if someone encounter this problem,hope you can help me,thanks.

let C = function () {}
C.prototype = Object.create({
  option: {
    name: 'c'
  }
})

let c1 = new C()
let c2 = new C()

c1.option.name = 'new_c'
console.log(c2.option.name)
// --> new_c

c1.option = null
console.log(c2.option.name)
// --> new_c

Answer 1

When you read a property from an object, and the object doesn't have that property, then JavaScript will seek up the prototype chain.

When you write a property to an object, then it will just be written to that object. It won't seek up the prototype chain to see if it exists and then overwrite the value further up the chain.

So c2.option.name fails to find option on c2, looks at the prototype and gets C.prototype. Then it reads name from that.

c1.option = null replaces option on c1 but doesn't touch the option on c2 so c2.option still points to the same object.