SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Prototype Inheritance - Question

    Hello all,

    Currently, I'm reading 'Object-Oriented JavaScript'.
    In addition, I've encountered a hiccup while carrying out an example from the book.

    Below is the code sample:
    Code JavaScript:
    var Dog = function() {
    	this.tail = true;
    };
     
    var benji = new Dog();
    var rusty = new Dog();
     
    Dog.prototype.say = function() { return "Woof!"; };
     
    benji.say();
    rusty.say();
     
    Dog.prototype = {
    	paws: 4,
    	hair: true
    };
    Dog.prototype.constructor = Dog;
     
    var lucy = new Dog();
    lucy.say();

    Essentially, the idea is to have the following work:
    1. console.log(lucy.say());
    2. console.log(benji.paws);
    3. The obvious - lucy.say();
    etc.

    Strangely enough, I've copied the example to the 'T', but to no avail.
    If anyone could shed some light I'd be more than grateful.

    Cheers,
    domscripter

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Have a look at the following script. It might help you to understand the steps required to create a prototype property. First you need an Dog object constructor, then you need some Dog objects to work with, then you can add your prototype property and store the necessary information in it. When a script is looking for a specific property it starts in the object space and then, if it is not there, it looks in the object prototype space. Our property "bark" is in the prototype, but is available when examining the dog objects. When you run this script it will firstly show you the two Dog object properties. It will then tell you the bark of dog1 and then reset the bark of dog2 and show you the new dog2.bark property. Have fun!

    Code JavaScript:
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Dog Objects</title>
    <script type="text/javascript">
    <!--
    // create Dog object constructor
    function Dog(name, type, color)
     { this.name=name;
       this.type=type;
       this.color=color;
       this.show=showAll; // this is a method for use with Dog objects
     }
    // --------
    // create a method that shows the properties of the Dog object 
     function showAll()
      { alert("This dog is "+this.name+" he is a "+this.type+" dog and is "+this.color) 
      }
    // --------------  
    // create 2 new Dog objects
    var dog1=new Dog("Benji","Hound", "Black")
    var dog2=new Dog("Rusty","Lap", "White")
    //
    // look at these object properties on screen
    dog1.show();
    dog2.show();
    // add a property to the Dog object prototype
    // this property is now part of all created Dog objects
    Dog.prototype.bark="woof";
    alert(dog1.bark);
    //
    // change the "bark" prototype property on dog2
    dog2.bark="meow";
    // look at the dog bark properies for both dogs
    alert("dog1 says "+dog1.bark+" dog2 says "+dog2.bark)
    //
    //-->
    </script>
    </head>
     
    <body>
     
    </body>
     
    </html>

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi AllanP,

    Thanks for your provided example. I know of other ways (using different code) to get this sample to work, but I'm curious how to get my provided code to work (mostly out of curiosity of what the book left off).

    Can anybody help?

    Cheers,
    domscripter

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by domscripter View Post
    Strangely enough, I've copied the example to the 'T', but to no avail.
    If anyone could shed some light I'd be more than grateful.
    That code from the book is never intended to be run as scripting code within the web browser.

    Instead, the >>> markers on the code in the book indicate that you are supposed to explore the code from the scripting console.

    Page 23, at the end of the "Variables Are Case-Sensitive" section should help to clear that up for you.

    The three consecutive greater-than signs (>>>) show the code that you type, the rest
    is the result, as printed in the console. Again, remember that when you see such
    code examples, you're strongly encouraged to type in the code yourself and
    experiment tweaking it a little here and there, so that you get a better feeling of how
    it works exactly.

    Here is why lucy.say() fails, from page 163

    Code:
    Any new objects you create from now on will use the updated prototype:
    
        >>> var lucy = new Dog();
        >>> lucy.say()
    
        TypeError: lucy.say is not a function
    It is supposed to fail, by design.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi pmw57,

    I'm aware of the book's convention. I believe I found the answer I was looking for:
    "The say() method will not be available to new Dog objects."

    Something quite interesting:
    If you remove Dog.prototype.constructor = Dog; the following will read "undefined"
    console.log(lucy.constructor.prototype.paws)

    Also, if you run the following:
    console.log(benji.constructor.prototype.paws)
    4

    I was under the assumption by resetting the constructor property, I could access the say() method.

    Thanks for your response

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by domscripter View Post
    I was under the assumption by resetting the constructor property, I could access the say() method.
    No, I'm afraid not. Old objects that were created beforehand still have access to the old constructor, but new ones won't be able to.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After a few attempts, the following seems to work:
    Code JavaScript:
    var Dog = function() {
        this.tail = true;
    	this.foo = {};
    };
     
    var benji = new Dog();
    var rusty = new Dog();
     
    Dog.prototype.say =  {
    	cat: 114,
    	dog: "foo"
    };
     
    Dog.prototype = {
        paws: 4,
        hair: true
    };
     
    Dog.prototype.constructor = Dog;
     
    var lucy = new Dog();
    lucy.foo = benji.say;
     
    console.log(benji.say.cat);
    console.log(benji.say.dog);
    console.log(benji.constructor.prototype.hair);
    console.log(benji.constructor.prototype.paws);
     
    console.log(lucy.foo.cat);
    console.log(lucy.foo.dog);
    console.log(lucy.hair);
    console.log(lucy.paws);

  8. #8
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm interested in buying a book on Javascript to learn Object Oriented stuff. I guess this one is a good one.

    The only thing that confuses me a bit is that there is a chapter about prototyping.
    Is this a specific thing already included in javascript?
    Or does the author mean that you need to use the Prototype framework library in addition with the code examples?

    I already work with jQuery right now, but want to learn the basics of OO programming in Javascript but apart from any framework.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bulevardi View Post
    The only thing that confuses me a bit is that there is a chapter about prototyping.
    Is this a specific thing already included in javascript?
    Yes it is already in JavaScript, having nothing to do with that prototype code library.

    An object called car, for example, might be prototyped from a more general object called vehicle. The prototype is the set of default properties and methods on top of which each object is based.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, clears out a lot Thanks

    Sometimes kind of confusing when there's a library called 'prototype' aswel.
    As there are books specially about those frameworks aswel: Amazon.com: Practical Prototype and script.aculo.us (Expert's Voice in Web Development) (9781590599198): Andrew Dupont: Books

  11. #11
    SitePoint Guru Jason__C's Avatar
    Join Date
    Oct 2009
    Location
    Racoon City
    Posts
    660
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bulevardi View Post
    I'm interested in buying a book on Javascript to learn Object Oriented stuff. I guess this one is a good one.

    The only thing that confuses me a bit is that there is a chapter about prototyping.
    Is this a specific thing already included in javascript?
    Or does the author mean that you need to use the Prototype framework library in addition with the code examples?

    I already work with jQuery right now, but want to learn the basics of OO programming in Javascript but apart from any framework.
    As with the OP, I own this book as well. It is a great read, and a lot easier then you think to write OOP code. Don't know your reading habits, but I finished this book in 3 days. Be sure to do all of the examples in the book to fully understand it. Examples are small and easy to follow.

    Good Luck.

  12. #12
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by USPaperchaser View Post
    Don't know your reading habits, but I finished this book in 3 days.
    Well, English is not my mother tongue, so reading goes way slower for me.
    I don't like the O'Reilly style books, a little too boring written and lay out, when those books are actually very good in content.
    I like books from PeachPit Press like the book PPK On Javascript I already have.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •