Jump to content

Adding a method to a object tutorial help


BooKwiznak

Recommended Posts

Hello W3Schools forum!So I was going through the tutorial for creating objects and came upon adding the methods to your objects section. var myFather=new person("John","Doe",50,"blue");var myMother=new person("Sally","Rally",48,"green");function person(firstname,lastname,age,eyecolor){this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;this.newlastname=newlastname;}function newlastname(new_lastname){this.lastname=new_lastname;}It goes on to say that I can add myMother.newlastname(), something like myMother("Doe").How do I get this to work? I've tried this:<html><body><script type="text/javascript">function person(firstname,lastname,age){this.firstname=firstname;this.lastname=lastname;this.age=age;this.newlastname=newlastname;}function newlastname(new_lastname){this.lastname=new_lastname;}var man=new person("Ricky", "Bobby", "30");var woman=new person("Jane", "Bobby", "29");var woman=new newlastname("Doe");document.write(man.firstname +" "+ man.lastname +", "+ man.age+"<p>");document.write(woman.firstname + " "+woman.new_lastname +", "+woman.age);</script></body></html>So shouldn't the returned value for var woman be: Jane Doe, 29???

Link to comment
Share on other sites

So shouldn't the returned value for var woman be: Jane Doe, 29???
No. It will be a new object with a single property. A newlastname object to be exact, with its lastname property set to 'Doe'.The correct way to call the newlastname function on the woman variable is like this:woman.newlastname("Doe");Now woman is a person object with the following properties:firstname: "Jane"lastname: "Doe"age: 29This line:this.newlastname=newlastname;sets the newlastname (let's call it a property for now) to the function newlastname, making it a method of the person object. Every person object you create (like var man=new person... ) will have that method. The newlastname function modifies the lastname property of the person object. Every person object has this property, but every person object has its own values for every property, so only the lastname of the woman object is modified.
Link to comment
Share on other sites

I think this is a typo: woman.new_lastnameI also suspect "shouldn't the returned value for var woman . . ." was an imprecise use of terminology that might affect the responses you get. I'm assuming that what you really meant to ask is what the output of the second document.write statement would be????

Link to comment
Share on other sites

for future reference, consider using the [ code ] tags for adding code snippets to a post.What I would do is make newlastname a method of the person object, so that when a new last name is passed to the method, it will overwrite the current last name. something like this:

<html><body><script type="text/javascript">function person(firstname,lastname,age){  this.firstname=firstname;  this.lastname=lastname;  this.age=age;  this.newlastname = function(new_lastname){	this.lastname=new_lastname;  };};var man = new person("Ricky", "Bobby", "30");var woman = new person("Jane", "Bobby", "29");var woman = woman.newlastname("Doe");document.write(man.firstname +" "+ man.lastname +", "+ man.age+"<p>");document.write(woman.firstname + " "+woman.lastname +", "+woman.age);</script></body></html>

Link to comment
Share on other sites

I think this is a typo: woman.new_lastname
Yeah, that too. :)Running the newlastname method doesn't change the name of the property. It only modifies its value. new_lastname is only the name of the variable local to the scope of the newlastname function.
Link to comment
Share on other sites

In the context of the person object, it doesn't appear that newlastname has a relation. What you would want to do is make newlastname a method of the person object, so that when a new last name is passed, it will overwrite the current last name.
Actually, scientist, it will work just fine the way it is. Your modification is an optimization.EDIT: Ah, I see you must've caught that, too! :)
Link to comment
Share on other sites

FWIW, I tried the original code and it worked as it was supposed to. (I had imagined a scoping issue that did not materialize.) But it is more conventional, for several reasons, to add a method as thescientist has shown you.

Link to comment
Share on other sites

FWIW, I tried the original code and it worked as it was supposed to. (I had imagined a scoping issue that did not materialize.) But it is more conventional, for several reasons, to add a method as thescientist has shown you.
that's what I was expecting. On a side note, I've actually gotten into the practice of prototyping all my methods onto an object, where the "instantiation" just defines all the objects variables, and then all my methods are prototyped. Often I have the "instantiation" run an init() function if any work in the object needs to be done at that time. Out of scope here probably, but if it wasn't for the point of making an example, I would probably would have written it slightly differently.
Link to comment
Share on other sites

FWIW, I tried the original code and it worked as it was supposed to. (I had imagined a scoping issue that did not materialize.) But it is more conventional, for several reasons, to add a method as thescientist has shown you.
It is the same concept as assigning an event handler, is it not? It makes no difference if you assign it using an anonymous function or if you first define the function and set it as a reference to the function.
anElem.onclick = function() { alert(this.innerHTML); }

and

function test() {   alert(this.innerHTML);}anElem.onclick = test;

both produce the same result. Whether the function is anonymous or defined, onclick is still a reference to that function and will alert the innerHTML of whatever element it is assigned to.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...