/    Sign up×
Community /Pin to ProfileBookmark

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());
}
}
[/CODE]

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>
[/CODE]

When I click on the [B]CreateStudent[/B] button, and error ensues:

[QUOTE]

Frank.setSurname is not a function

[/QUOTE]

Can someone please help diagnose my error. I’d also like to know whether I could have a [I]sayHi[/I] method in Student which would override the one in Person.

Cheers

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@mrhooMar 29.2011 — 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.
Copy linkTweet thisAlerts:
@KorMar 29.2011 — 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[I] constructor[/I]. Thus, using this schema, the code should have followed the constructor syntax, not the prototype syntax:

<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;script type="text/javascript"&gt;
function Person(name, age){
var surname;

<i> </i> this.getName = function(){ return name; }
<i> </i> this.getAge = function(){ return age; }
<i> </i> this.setName = function(newName){ name = newName; }
<i> </i> this.setAge = function(newAge){ age = newAge; }
<i> </i> this.getSurname = function() { return surname; }
<i> </i> this.setSurname = function(newSurname) { surname = newSurname; }
<i> </i> this.sayHi = function(){
<i> </i> alert('hi ' + this.getName());
<i> </i> }

<i> </i> this.saySurname = function(){
<i> </i> alert(this.getSurname());
<i> </i> }
}

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()); <br/>
}
Frank.setSurname('Dobbs');
Frank.sayHowdy();
}

CreatePerson('Bob', 44);
CreateStudent('Frank', 55, 1167596);
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;


Using the [B]prototype[/B] needs another approach.
Copy linkTweet thisAlerts:
@onefootswillauthorMar 29.2011 — 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 [I][B]this[/B][/I] references.
Copy linkTweet thisAlerts:
@Jeff_MottMar 30.2011 — Thanks Guys. I'm more curious about how to do the equivalent using the prototype notation.[/QUOTE]

I think Crockford explains this topic better than anyone, and his videos may help.

http://video.yahoo.com/watch/111585/1027823
Copy linkTweet thisAlerts:
@onefootswillauthorMar 30.2011 — Cool thanks. I'll check it out tonight!
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...