Object Oriented Programming - Set the Child's Prototype to an Instance of the Parent

Hello, can someone tell me what’s wrong with my code? The console log an empty object {} while the result that i wanted to get was {}


function LogMyFullName(first) {
  this.first = "Bushra";
};

LogMyFullName.prototype = {constructor: LogMyFullName, _$Second: "Abdulsalam", _Last: "Ghames"};

function LogMyFullNameAgain() {};

LogMyFullNameAgain.prototype = Object.create(LogMyFullName.prototype);

console.log(LogMyFullNameAgain.prototype);


Could you clarify your question please?

I think you mean to ask: why do you get an empty object since you have created a prototype with new properties? But, please correct me if I am mistaken.

Keep up the good progress!

Happy Coding! :slightly_smiling_face:

1 Like

Yes that was what i meant

1 Like

Ok, so since we are in agreement with what you are asking let’s pick apart the code you wrote one block at time.

The first object you created is named LogMyFullName which takes a parameter named first as below. This object will always have a property called first and it will always be assigned the value of “Bushra”.

To prove that will be the case, let’s create a new object from LogMyFullName and print its value to the console (everything after // is what printed to the console).

const logName = new LogMyFullName;
console.log(logName);  // LogMyFullName {first: 'Bushra'}

In essence, the above shows that we have an object template that will give us a new object with the same properties everytime we ask for one.

Now, in your second block of code you decided to add some new properties (fair enough): a constructor property, and the _$Second and _Last properties, each with their respective values.

According to the course notes:

the constructor property is a reference to the constructor function that created the instance.

We can verify that our new object logName was indeed created from the LogMyFullName object, by console logging the following:

console.log(logName instanceof LogMyFullName);  // true

We already knew that anyway, by virtue of the fact we created the logName object as above. So, nothing new there, but if we create another new object like this:

const logAnotherName = new LogMyFullName;

and print it to the console the result is the same as before!

console.log(logAnotherName);  // LogMyFullName {first: 'Bushra'}

Except, those other properties are sort of ‘hidden’ as can be seen by explicitly requesting them as shown below.

console.log(logAnotherName._$Second, logAnotherName._Last);  // Abdulsalam Ghames

Alternatively, we can use the getPrototypeOf object method to see those new properties we assinged to the prototype.

console.log(Object.getPrototypeOf(logAnotherName));  // {constructor: ƒ, _$Second: 'Abdulsalam', _Last: 'Ghames'}

Had the _$Second and _Last properties been added directly to the original object, would have appeared in the initial print, but I digress.

The third block of your code creates a new empty object named LogMyFullNameAgain with no properties (and more importantly NO relation to LogMyFullName) as below:

In the forth block of your code you create a new prototype for the new object (created in block three of your code) using the definition of the first prototype. This has the effect of adding the same _$Second and _Last properties as before to the new prototype.

The great thing about that is that any new object you create will automatically take those properties, but existing objects like LogMyFullNameAgain will have to make do with what they were born with in essense.

Arriving at your final block of code:

The console log here should indicate that the object is indeed empty since nothing was ever added to the object.

However, if we create a new object now like this:

const myName = new LogMyFullName;

We can see all the properties we added to the original prototype as below:

console.log(myName.first, myName._$Second, myName._Last);  // Bushra Abdulsalam Ghames

A bit of a long answer, but we got there in the end.

Does this help?
Keep up the good progress!

Happy Coding! :slightly_smiling_face:

1 Like

Thank you, it was helpful. Can you help me with my recent post? I’ve another problem with something (you’re free to refuse)

1 Like

Sure, I’ll have a look at it.