Constructor function

Question

Why constructor function can't call a method from another constructor function
https://code.sololearn.com/WfRih7EkunV3/?ref=app

Answer 1

Yes ODLNT 😅😅
The problem was at this line:
AnakH.prototype.sapa = Hafizd.prototype.sayName.bind(AnakH());

AnakH.prototype.sapa = Hafizd.prototype.sayName; does the same job. Bind was not required.

Hafizd Jubaidir:

It's very tricky to fully convert ES6 "classes" to ES5. You can paste your code on Babel REPL or other online transpiler and see the (complex) ES5 version.
I made my own version of your code:
https://code.sololearn.com/WzaquY9g9B9I/?ref=app
Feel free to research and ask about the methods involved.

You might not need to use inheritance here. anakH does nothing new when compared to hafizd. It would make some sense if anakH were an object and not a "class", but that's up to you.

Answer 2

In JavaScript, prototypes refer to objects linked / chained to other objects. When a property / method cannot be found on an object, Javascript looks for it in the prototype chain, from bottom to top until it is found or the chain ends. This is how "inheritance" works in JavaScript.

Each function has a prototype. Those prototypes are objects. But what do they do?
When a function is called with the "new" keyword, we create a new object that is linked to the prototype of the constructor function.
So if we have:
function Fun () {}
var obj = new Fun ();
Then: Fun.prototype refers to the object that "obj" was linked to during creation.

The idiom Fun.prototype.func = function () {} is used to make "func" available to all objects created using new Fun () through the link mechanism (first paragraph).

For AnakH to extend Hafizd, we have to link AnakH.prototype with Hafizd.prototype so that AnakH instances can access the functionality defined in Hafizd.prototype (sayName method for example)

Answer 3

Hafizd Jubaidir I was just made aware that the solution I provided should not be used. Kevin ★ has explained to me why my solution incorrect, I asked him to post his comments here in this thread. I will remove my previous post to avoid any confussion.

Answer 4

Good questions. I'll try to make it simple.

Line 12:
When using ES6 "classes" we must call super() before using "this".
Why? Because "this" needs functionality present in the constructor of its "parent class".
super calls that constructor for you.

I am doing something similar at line 12.
When calling new AnakH() a new object is created and within AnakH (only within AnakH) "this" refers to that object .

We need to, somehow, apply Hafizd to the new object ("this"). If we don't do that then it won't have an "age", for example.

But if we call Hafizd() directly it will modify the global "this" and not our "this" (the object being created with AnakH).
We need to force Hafizd to take the new object as its own "this" and .call() method does just that:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

Apply and bind do that too but they are not appropiate here.

After Hafizd.call(this) "this" has been successfully modified and now it can access stuff defined in Hafizd.

Answer 5

At line 17:
AnakH.prototype = Hafizd won't work because the functionality we want to extend (sayName) doesn't belong to Hafizd but to its prototype.

It would be more intituive to say:
AnakH.prototype = Hafizd.prototype
But here we are doing something wrong there too: they both refer to the same object (Hafizd.prototype) but we want one object to be linked to the other.

That's why I used Object.create(). It returns a new object that is linked to the argument passed without involving a third function:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

By the way I found a similar example there:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Examples

I hope this makes some sense. I know it can sound crazy. Feel free to keep inquiring.

Answer 6

Kevin ★ can i ask you
I don't understand at line 12 why do you use Hafizd.call(this) for what ? And at line 17 why AnakH.prototype = Object.create(Hafizd.prototype); instead AnakH.prototype = Hafizd; ?

Answer 7

Is this what you're after?

function Hafizd(){
this.name = "Hafizd";
this.age = 21
}
Hafizd.prototype.sayName = function(){
console.log(this.constructor.name);
}

function AnakH(){
this.name = "siti"
}
AnakH.prototype = Hafizd;
AnakH.prototype.sapa = function(){
this.prototype.sayName();
}

let anaknya = new AnakH();
anaknya.sapa();

Answer 8

Not sure I understand your question.

Just to clarify, did you spot my edit? Hafizd -> this in sapa function declaration.

Answer 9

Sure. Hope you work it out. Hopefully someone with more knowledge than me will step in and help you out.

Answer 10

Oh ok, thank you very much for the help Russ

Answer 11

I didn't really help at all! Good luck 👍

Answer 12

ahh yeah, the bind() method I forgot about that. thank you very much for the help ODLNT

Answer 13

Ok Kevin ★ thanks a lot for explanation and the help

Answer 14

So how can i get the property name from AnakH ?

Answer 15

I did.
In essence, I want to display the contents of the property name of "AnakH" using Hafizd's method which is stored in the prototype.

Answer 16

So you want the output to be "siti" rather than "Hafizd"? Not sure, sorry bud.

Answer 17

Right

Answer 18

Russ
I was practicing using this class earlier.
class hafizd {
constructor(){
this.name = "hafizd Jr",
this.age = 21
}
sayName(){
console.log(this.name);
}
}

class anakH extends hafizd{
constructor(){
super()
this.name = "siti"
}
sapa(){
super.sayName();
}
}

let anaknya = new anakH();
anaknya.sapa();

and then I had an idea to make it with a prototype but it just got messed up like this