Results 1 to 2 of 2

Thread: Using Prototype

  1. #1
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Using Prototype

    Here's my code:

    Code:
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    
    var Shape = function(){}
    
    Shape.prototype.Circle = function(){
    	// Some code here
    };
    
    Shape.prototype.Square = function(){
    	// Some code here
    };
    
    
    MainMenu.prototype = new Shape();
    
    var MainMenu = function(ctx){
       this.draw{
    	this.Circle();
    	this.Square();
       }
    }

    What I want to do is to call the Circle() and Square() function inside my draw() function.
    But it doesn't work.
    Is this even possible??
    I'm going crazy trying to figure this out!!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,134
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    In short it or something like it can be done. However there are some problems.

    this.draw is not a function unless it's a native function of either a canvas with context, or of a canvas' context. Even if it is either of those, this.draw{ . . . is not a function call. It's an object declaration.

    And here:

    Code:
    MainMenu.prototype = new Shape();
    MainMenu is not defined yet, so you cannot assign it a prototype yet.

    If MainMenu were already a function then you could do that, or something like it. I'm not sure if that exact syntax would be valid or not. In any case, MainMenu would have to be a function before that, or at least an object. A more usual syntax is:

    Code:
    var mainMenu = new Shape();
    If you did that, then you could do:

    Code:
    function draw(){
    	this.Circle();
    	this.Square();
    }
    
    draw.apply(mainMenu);
    Here's a slightly different approach which shows two ways of initializing to the prototype:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Prototype Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    // Prototype Demo Script (c)2013 John Davenport Scheuer
    // as first seen in http://www.dynamicdrive.com/forums/
    // username: jscheuer1 - This Notice Must Remain for Legal Use
    
    function Person(props){
    	props = props || {};
    	for (var p in props){
    		this[p] = props[p];
    	}
    };
    
    Person.prototype = {
    	writeName: function(){
    		this.el().appendChild(document.createTextNode('Hello, my name is ' + this.name + '. '));
    	},
    	el: function(){
    		return document.getElementById(this.id);
    	},
    	writeSex: function(){
    		this.el().appendChild(document.createTextNode("I'm a " + this.sex + '.'));
    	},
    	writeMe: function(){
    		this.el().innerHTML = '';
    		this.writeName();
    		this.writeSex();
    	}
    };
    
    var aGirl = new Person({
    	name: 'Sally',
    	sex: 'girl',
    	id: 'div1'
    });
    
    var aMan = new Person();
    aMan.name = 'Robert';
    aMan.sex = 'man';
    aMan.id = 'div2';
    
    </script>
    </head>
    <body>
    <input type="button" value="Write Sally" onclick="aGirl.writeMe();">
    <div id="div1">aGirl will be written here.</div>
    <input type="button" value="Write Bob" onclick="aMan.writeMe();">
    <div id="div2">aMan will be written here.</div>
    </body>
    </html>
    Last edited by jscheuer1; 05-28-2013 at 10:08 AM. Reason: add demo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. opacity using prototype
    By dfend in forum JavaScript
    Replies: 1
    Last Post: 06-04-2012, 10:35 PM
  2. Replies: 0
    Last Post: 09-24-2009, 05:08 PM
  3. Prototype, Scriptaculous, and IE6 and IE7 bug
    By johnnicely in forum JavaScript
    Replies: 5
    Last Post: 09-14-2008, 07:03 AM
  4. Useful Prototype: htmlEntities()
    By rainarts in forum JavaScript
    Replies: 1
    Last Post: 07-25-2008, 10:47 PM
  5. Element.prototype
    By Tabo in forum JavaScript
    Replies: 10
    Last Post: 06-23-2008, 01:26 AM

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
  •