Javascript: the variable from [user-defined prototype] is not available

Question

I play javascript with the book Professional JavaScript for Web Developers. I practice an example in section 6.2.6. the codes are listed below：

function creatPrototype(subType, superType) 
{
    function subTypePrototype(){};
    subTypePrototype.prototype = superType.prototype;
    subTypePrototype.constructor = subType;
    subTypePrototype.str = "say";
    return new subTypePrototype();
}

function Person(name, age) 
{
    this.name = name;
    this.age = age;
}
Person.prototype.say = function(){
    writeln("bill say");
}


function itMan(name, age){
    Person.apply(this, arguments); 
}
itMan.prototype = creatPrototype(itMan, Person); 


var Bill = new itMan("bill", 25);

writeln(itMan.prototype.str);    //expect "say"
writeln(Person.prototype == itMan.prototype.prototype);   //expect true
Bill.say();  //expect "bill say"

the result is:

undefined

False

bill say

Why?

itMan.prototype.str is suppose to "say"
Person.prototype AND itMan.prototype.prototype should point to a same object
Bill.say() run correctly, so the prototype chain is OK.

Felix Kling · Accepted Answer · 2011-08-12 07:47:19Z

2

You have to think about which property belongs to the constructor function and which one belongs to the instance. prototype is a property of the function, but constructor and str should be both properties of the instance.

This should do it:

function createPrototype(subType, superType) 
{
    function subTypePrototype(){};
    subTypePrototype.prototype = superType.prototype;

    var newPrototype = new subTypePrototype();

    newPrototype.constructor = subType;
    newPrototype.str = "say";
    return newPrototype;
}

But, as you are also passong subType, you can actually assign the prototype directly:

function inherit(subType, superType) 
{
    function tconstr(){};
    tconstr.prototype = superType.prototype;

    subType.prototype = new tconstr();

    subType.prototype.constructor = subType;
    subType.prototype.str = "say";
}

and then just call it with

inherits(itMan, Person);

Person.prototype AND itMan.prototype.prototype should point to a same object

Remember that prototype is a property of a function, not of objects. But itMan.prototype is a an object. You cannot access an objects prototype unless you explicitly refer to it (but I would not do so).

With ECMAScript 5, there is a way to get the prototype, using Object.getPrototypeOf ^[MDN]. This only works in newer browsers though.

Here is a working example of your code.

edited Aug 12, 2011 at 7:47

answered Aug 12, 2011 at 7:29

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

1 Comment

delai Over a year ago

You got the point. Your solution is similar to the original example from the book. subTypePrototype.constructor and str may not be one part of the return value new subTypePrototype() .

Ankur · Accepted Answer · 2011-08-12 06:11:33Z

1

There were some mistake with the code, try this code

function creatPrototype(subType, superType) 
{
    function subTypePrototype(){
    this.prototype = superType.prototype;
    this.constructor = subType;
    this.str = "say";
}


    return new subTypePrototype();
}

function Person(name, age) 
{
    this.name = name;
    this.age = age;
}
Person.prototype.say = function(){
    document.writeln("bill say");
}


function itMan(name, age){
    Person.apply(this, arguments); 
}
itMan.prototype = creatPrototype(itMan, Person); 


var Bill = new itMan("bill", 25);

document.writeln(itMan.prototype.str);    //expect "say"

document.writeln(Person.prototype == itMan.prototype.prototype);   //expect true
Bill.prototype.say();  //expect "bill say"

In your code, you were not using this object so itMAn had no variable str, you were using subTypePrototype.constructor = subType; and subTypePrototype.prototype = superType.prototype; therefore Bill.say was working and Person.prototype == itMan.prototype.prototype was not working.

answered Aug 12, 2011 at 6:11

Ankur

12.8k7 gold badges40 silver badges68 bronze badges

3 Comments

Felix Kling Over a year ago

Your approach is better, but assigning prototype and constructor to this is wrong.

Seb T. Over a year ago

Felix is right on this, is example show how to do it properly.

Ankur Over a year ago

@felix thanx for poining out, you are correct, your method is the correct one

Seb T. · Accepted Answer · 2011-08-12 07:34:20Z

0

Prototype is a reserved keyword and you have to be very careful while using it Articles on prototype keyword

You have several issues in your code.

Then within your createSubPrototype :

return new subTypePrototype();

You are creating a function and then you are returning the executed function result where you should return a pointer to your function like

return subTypePrototype;

But you should not create a function cause it seems you want to retrieve parent "prototype" :)

So indeed your code should look more like :

function createPrototype(subType, superType) 
{
  subTypePrototype = superType.prototype;
  subTypePrototype.constructor = subType; //- beware this is wrong !!!
  subTypePrototype.str = "say";
  return subTypePrototype;
}

Check the line I have marked as wrong, by doing so you are updating both sub & parent type

How to do it : That being said if you want to extend an object I would advise you to use existing libs. (jQuery, Mootools, etc ). Here a sample on how to do it properly

edited Aug 12, 2011 at 7:34

answered Aug 12, 2011 at 6:11

Seb T.

1,1341 gold badge12 silver badges27 bronze badges

6 Comments

RoccoC5 Over a year ago

So, you are telling him not to use prototype, and yet your link is to articles which show how to use the prototype keyword? There is nothing wrong with using prototype; in fact it's the proper way to achieve javascript inheritence (at least says Douglas Crockford javascript.crockford.com/prototypal.html).

Felix Kling Over a year ago

I have to disappoint you, but prototype is not a reserved keyword: ecma262-5.com/ELS5_HTML.htm#Section_7.6.1

Felix Kling Over a year ago

Your creatPrototype is not correct as well. Any property you assign to subTypePrototype will also be assigned to superType.prototype. This is not a good approach.

Seb T. Over a year ago

@RoccoC5 : Thanks for pointing this out. You are right, I wrote this perhaps too quickly and my English was not that correct. I have update the post accordingly.

Seb T. Over a year ago

@Felix : From my understanding it is, cause if you are computing your own prototype content on a class I doubt this object will work properly ... but anyway please correct me if I am wrong. Sure my sample is not correct but it was just to explain that the function usage was not that efficient this way. Then I provided deeper sample using the link.

|

Collectives™ on Stack Overflow

Javascript: the variable from [user-defined prototype] is not available

3 Answers 3

1 Comment

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related