www.webdeveloper.com
Results 1 to 6 of 6

Thread: OO Javascript

  1. #1
    Join Date
    Jan 2009
    Posts
    17

    OO Javascript

    Hi,

    I'm learning how to write OO Javascript and cannot figure out what is going on with an error that I am getting.
    I have a js file (objects.js) with a Person object and a student inheriting from it:
    Code:
    	function Person(name, age){
    		var surname;
    		
    		Person.prototype.getName = function(){ return name; }
    		Person.prototype.getAge = function(){ return age; }
    		Person.prototype.setName = function(newName){ name = newName; }
    		Person.prototype.setAge = function(newAge){ age = newAge; }
    		Person.prototype.getSurname = function() { return surname; }
    		Person.prototype.setSurname = function(newSurname) { surname = newSurname; }
    		
    		Person.prototype.sayHi = function(){			
    				alert('hi ' + this.getName());
    		}
    		
    		Person.prototype.saySurname = function(){ 
    			alert(this.getSurname()); 
    		}
    	}	
    	
    	function Student(name, age, studentNumber){
    		Person.call(this, name, age);
    		
    		Student.prototype = new Person();
    		Student.prototype.constructor = Student;
    		Student.prototype.getStudentNumber = function(){ return studentNumber; }
    		Student.prototype.setStudentNumber = function(newStudentNr){ studentNumber = newStudentNr; }
    		
    		Student.prototype.sayHowdy = function(){			
    				alert('Details: ' + this.getName() + ' ' + this.getAge() + ' ' + this.getSurname() + ' ' + this.getStudentNumber());  
    		}
    	}
    To exercise that code, I have knocked up the following HTML:
    Code:
    <html>
    	<head>
    	    <script type="text/javascript" src='./objects.js'></script>    
    		<script>
    			function CreatePerson(name, age){
    				var Bob = new Person(name, age);
    				Bob.sayHi();
    			}
    			
    			function CreateStudent(name, age, studentNumber){
    				var Frank = new Student(name, age, studentNumber);
    				Frank.setSurname('Dobbs');
    				Frank.sayHowdy();
    			}			
    			
    		</script>
    	</head>
    
    	<body>
    		<input id="Button1" type="button" value="CreatePerson" onclick="CreatePerson('Bob', 44); " /><br />
    		<input id="Button1" type="button" value="CreateStudent" onclick="CreateStudent('Frank', 55, 1167596); " /><br />
    	
    	</body>
    </html>
    When I click on the CreateStudent button, and error ensues:
    Frank.setSurname is not a function
    Can someone please help diagnose my error. I'd also like to know whether I could have a sayHi method in Student which would override the one in Person.

    Cheers

  2. #2
    Join Date
    Feb 2006
    Posts
    2,926
    Start by creating a Person object, don't define the prototype methods in the constructor,
    use the this keyword in the prototype methods to select which Person object you are referring to.

    Once you can create an object you can create another to inherit and override its methods.

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    You have built the code as JavaScript would have been a class-oriented language, but it is not. In javascript properties are not passed by inheritance, they are passed by delegation. The prototype itself is the depositary of the objects properties.

    But, the way you have started the code, you have prepared to use the function Person() as a constructor. Thus, using this schema, the code should have followed the constructor syntax, not the prototype syntax:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function Person(name, age){
    		var surname;
    		
    		this.getName = function(){ return name; }
    		this.getAge = function(){ return age; }
    		this.setName = function(newName){ name = newName; }
    		this.setAge = function(newAge){ age = newAge; }
    		this.getSurname = function() { return surname; }
    		this.setSurname = function(newSurname) { surname = newSurname; }
    		this.sayHi = function(){			
    				alert('hi ' + this.getName());
    		}
    		
    		this.saySurname = function(){ 
    			alert(this.getSurname()); 
    		}
    }
    	
    function CreatePerson(name, age){
    		var Bob = new Person(name, age);
    		Bob.sayHi();
    }
    			
    function CreateStudent(name, age, studentNumber){
    		var Frank = new Person(name,age);
    		Frank.getStudentNumber = function(){ return studentNumber; }
    		Frank.setStudentNumber = function(newStudentNr){ studentNumber = newStudentNr; }
    		Frank.sayHowdy = function(){			
    		alert('Details: ' + this.getName() + ' ' + this.getAge() + ' ' + this.getSurname() + ' ' + this.getStudentNumber());  
    	}
    Frank.setSurname('Dobbs');
    Frank.sayHowdy();
    }
    
    CreatePerson('Bob', 44);
    CreateStudent('Frank', 55, 1167596);				
    </script>
    </head>
    <body>
    
    </body>
    </html>
    Using the prototype needs another approach.
    Last edited by Kor; 03-29-2011 at 08:57 AM.

  4. #4
    Join Date
    Jan 2009
    Posts
    17
    Thanks Guys. I'm more curious about how to do the equivalent using the prototype notation.

    I moved the prototype statement outside of the constructor, but it complained about the this references.

  5. #5
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Quote Originally Posted by onefootswill View Post
    Thanks Guys. I'm more curious about how to do the equivalent using the prototype notation.
    I think Crockford explains this topic better than anyone, and his videos may help.

    http://video.yahoo.com/watch/111585/1027823
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  6. #6
    Join Date
    Jan 2009
    Posts
    17
    Cool thanks. I'll check it out tonight!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles