prototype vs parent

@RainInSeattleApr 07.2011

[CODE] /** * @class TestInheritance * * This is a class and it’s constructor all in one but the constructor is not set yet */ function TestInheritance(){ this.testName; return this; } /** * @extends Util * Make sure this is called after the constructor/class declaration */ TestInheritance.prototype = new Util();

/** * @ctor TestInheritance * Set it to itself if there isn’t an explicit constructor */ TestInheritance.prototype.constructor = TestInheritance;

/** * @extends Util * This specifically is set to allow TestInheritance to access it’s parent’s identity */ TestInheritance.prototype.parent = new Util();

/** * @extends Util * @argument testName String * All functions are called after setting the prototype */ TestInheritance.prototype.setTestName = function(testName){ this.testName = testName; } [/CODE]

How would I reference the same instance of Util?

to post a comment

JavaScript

4 Comments(s) _↴

@KeverApr 08.2011 — #It's not totally clear to me what you mean by 'same instance'.

I guess you want to refer to a method of the 'Util' constructor, from a method of the 'TestInheritance' constructor.

So I hope underneath example clarifies your question.

<i>
 </i>&lt;script&gt;
 
 var extend = (function extend(){
 var create = (typeof Object.create === 'function') ? Object.create : (function create(func){
 return function(obj){
 func.prototype = obj;
 return new func;
 }
 }(function(){}));
 
 function extend(A, B){
 A.prototype = create(B.prototype);
 A.prototype.constructor = A;
 };
 
 return extend;
 }());
 
 function Person(name, age){
 this.name = name;
 this.age = age;
 };
 
 Person.prototype.sayHello = function(){
 return 'Hi, my name is '+this.name+'.&lt;br&gt;I'm '+this.age+' years old.';
 }
 
 function Worker(name, age, profession){
 Person.apply(this, arguments);								// Call parent constructor, to store name and age.
 this.profession = profession;
 }
 extend(Worker, Person);
 
 Worker.prototype.sayHello = function(){
 return Person.prototype.sayHello.call(this) + '&lt;br&gt;I work as a '+this.profession+'.';	// Call parent contructor 'sayHello' and add profession.
 };
 
 var george = new Worker('George', 31, 'salesman');
 document.write(george.sayHello());
 
 &lt;/script&gt;

To create inheritance I use an extend function which, instead of 'Sub.prototype = new Base'.

This avoids the risk of causing an error incase the Base constructor 'requires' an argument, by using an intermediate function.

@RainInSeattleauthorApr 11.2011 — #

[CODE]
 TestInheritance.prototype = new Util();
 TestInheritance.prototype.parent = new Util();
 [/CODE]

Note that my code uses two different instances of Util. What I would like to accomplish is basically what you've done above except without the helper function (extend). I'm okay with and extend or inherit function but is it possible without it? What I have above works well, but I'm concerned that the prototype.parent and the prototype will cause the inheritance to reference two different instances so I was hoping that the creating one instance would fix it.

@KeverApr 12.2011 — #You could save the a reference to a certain instance of Util, so you can point both at the sane instance.

But that would create a problem.

<i>
 </i>Base.prototype.someFunction = function(){//doSomething}
 
 var proto = new Base();
 Sub.prototype = proto;
 Sub.prototype.constructor = Sub;
 Sub.prototype.parent = proto;
 
 Sub.prototype.someFunction = function(){this.parent.someFunction.call(this); //do some more};
 
 // the Base.prototype.someFunction is function(){//doSomething}
 // the Base instance of Sub.prototype, to which Sub.prototype.parent is pointing is overwritten by 
 // Sub.prototype.someFunction = function(){this.parent.someFunction.call(this); //do some more};
 // this will result in an endless recursion.

The way you have it right now with 2 instances of Util should work fine, if you call your function using the call/apply methods,

so that this refers to the instance of the Sub function.

The reason I use the extend function is that it creates inheritance in a different way.

You're creating in inheritance by pointing the Sub.prototype to a certain (but anonymous) instance of Base. This should be rarely necessary.

It could even create problems, incase of required argument.

Consider this example:

<i>
 </i>function Base(date){
 date.getDay();
 }
 function Sub(){};
 Sub.prototype = new Base; // throws an error: cannot convert date to object;

A better is to create inheritance is to assign the prototype of Base to the prototype of Sub.

To reach this, we can't just do:

<i>
 </i>Sub.prototype = Base.prototype;
 Sub.prototype.hello = 'hello';
 //Since that would change the Base prototype aswell.
 Base.prototype.hello; // 'hello';

The solution is to use a intermediate function.

<i>
 </i>//function extend(Base, Sub){
 function intermediate(){};
 interMediate.prototype = Base.prototype;
 Sub.prototype = new Intermediate;
 Sub.prototype.constructor = Sub;
 //}

Above code is what happens inside the extend function.

The Sub.prototype.parent doesn't have to point to an instance either, but just to the Base constructor/prototype

<i>
 </i>Sub.prototype.parent = Base;
 
 function Sub(){
 parent.apply(this, arguments);
 }
 extend(Base, Sub);
 
 Sub.prototype.sayHello = function(){
 return parent.prototype.sayHello.call(this);
 };

@RainInSeattleauthorApr 15.2011 — #Great explanation. Thanks! This works.

Also in #JavaScript _↴

compatability issue?Detecting a pixel's color...More IE trouble (window height and width)

Success!

Help @RainInSeattle spread the word by sharing this article on Twitter...

Tweet This

prototype vs parent

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

prototype vs parent

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴