Javascript, Prototype and Inherit

Question

I've this code:

var Parent = function(){};
var Child = function(){};

function inherit(C, P){
    C.prototype = new P();//received a pointer to Parent
    C.prototype.test = function(){};
}

inherit(Child, Parent);
console.log(new Parent);//Object {}
console.log(new Child);//Object {test=function()}

Now i've a question, if C.prototype received a pointer to Parent in my inherit function, why my "console.log(new Parent)" doesn't show like this: "Object {test=function()}" to Parent and "Object {}" to Child?

From an instance you can't write to the prototype (maybe with the non standard proto property but would nor advice it) more explanation here:stackoverflow.com/a/16063711/1641941 it is better to not create an instance of Parent to set up the prototype part of inheritance — HMR
– HMR, Commented Feb 2, 2014 at 0:19
i will not use this code, i just wrote it to show what i wanted to show, but thanks for the advice. — Rodrigo Fonseca
– Rodrigo Fonseca, Commented Feb 2, 2014 at 0:41

Philipp Gayret · Accepted Answer · 2014-02-01 18:41:23Z

3

Taken out the function to simplify;

var Parent = function(){};
var Child = function(){};

Child.prototype = new Parent();//"received a pointer to Parent"
Child.prototype.test = function(){};

console.log(new Parent);//Object {}
console.log(new Child);//Object {test=function()}

Child.prototype is now a reference to an instance of a Parent, to illustrate, what you did could also be written as:

var Parent = function(){};
var Child = function(){};

var instance = new Parent();
instance.test = function(){};
Child.prototype = instance;

console.log(new Parent);//Object {}
console.log(new Child);//Object {test=function()}

Putting properties on the instance does not affect the Parent prototype, which is why the console log doesn't show the test function on the Parent prototype. It would be the same as doing ( almost the same ):

var instance = {
    test: function(){}
};
instance.prototype = Parent;

edited Feb 1, 2014 at 18:41

answered Feb 1, 2014 at 17:09

Philipp Gayret

5,1501 gold badge31 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rodrigo Fonseca Over a year ago

I don't understand, because if the instance is receiving a pointer to "new Parent()", in my logic, if everything you put in this instance you're pointing to Parent, i don't know what javascript does behind the scenes.

Philipp Gayret Over a year ago

The same is for example with Object, when you do new Object() and assign properties to it, it does not affect the Object prototype, only that instance of the object you have. The instance inherits from the prototype, the prototype is not affected by changes to instances

Rodrigo Fonseca Over a year ago

yes, but i want to know why this happens, because in my C logic, if you receive a pointer, a reference, everything that you do with this pointer will impact directly in the reference.

Theofilos Mouratidis · Accepted Answer · 2014-02-01 17:42:32Z

1

The new P(), creates a new space in ram and stores a P instance.
Don't forget you change C.(new P).test, not C.P.test, there is difference. new P and P have different pointers, same as new P with new P. Check what does the new keyword in OOP like Java and then you will clear it out.

edited Feb 1, 2014 at 17:42

answered Feb 1, 2014 at 17:11

Theofilos Mouratidis

1,15613 silver badges32 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:49:48Z

To understand this better you have to know the difference between mutating an object and re assigning it.

a=22;//assigns value to a
a.something=22;//mutates it
a.push(22);//if a is an array then push will mutate it

As explained in my link in the comments: you can't re assign prototype members through instances (Child.prototype is an instance of Parent) but you can mutate them (I advice reading the link posted). Here is some sample code:

var Test = function(){};
Test.prototype.something={a:1};
Test.prototype.somethingElse={a:2};
var t = new Test();
//mutating someting in t will change 
//  Test.prototype.someting
t.something.a=3;
//re assigning somethingElse will not
// change Test.prototype.somethingElse
// instead it will create a member called
// somethingElse on t 
t.somethingElse=3;
var anotherT =  new Test();
console.log(anotherT.something);//{a=3}
console.log(anotherT.somethingElse);//{a=2}
console.log(t.somethingElse);//3
console.log(t.hasOwnProperty("somethingElse"));//true
//next is false because anotherT.sometingElse comes
// from the prototype chain and not directly from antohrT
console.log(anotherT.hasOwnProperty("somethingElse"));//false

When passing variables to functions this works the same way:

var assignVal=function(obj){
  obj=22;
};
var mutateVal=function(obj){
  obj.mutated=22;
};

var o = {msg:"Hello World"};
assignVal(o);
console.log(o);//{msg="Hello world"}
mutateVal(o);
console.log(o);//{msg="Hello world",mutated=22}

Collectives™ on Stack Overflow

Javascript, Prototype and Inherit

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related