Javascript Objects
Earlier in this book, you learned that JavaScript has several built-in objects, like
String, Date, Array, and more. In addition to these built-in objects, you also can create your own.
An object is just a special kind of data, a collection of properties and methods.
Let’s illustrate with an example and create an object that models a person. Proper-ties are the values associated with the object. The person’s properties include name,
height, weight, age, skin tone, eye color, and so on. All persons have these proper-ties, but the values of those properties differ from person to person. Objects also
have methods. Methods are the actions that can be performed on objects. The
person’s methods could be eat(), sleep(), work(), play(), and so on.
properties
The syntax for accessing a property of an object is as follows:
objName.propName
You can add a property to an object by simply giving it a value. Assume that the
personObj already exists; you can give it properties named firstname, lastname,
age, and eyecolor as follows:
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=30;
personObj.eyecolor="blue";
document.write(personObj.firstname);
The preceding code generates the following output:
John
Methods
An object also can contain methods.
You can call a method with the following syntax:
objName.methodName()
To call a method called sleep() for the personObj:
personObj.sleep();
If the sleep() method accepts a parameter for the number of hours, it could be
called like this:
personObj.sleep(8)
Creating your own objects
There are two ways to create a new object: You can create a direct instance of an
object, or you can create a template of an object.
Create a Direct instance of an object
The following code creates an instance of an object and adds four properties to it:
personObj=new Object();
personObj.firstname="John";
Parameters required for the method can be passed between the
parentheses.
n o t e
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";
Adding a method to the personObj is also simple. The following code adds a
method called eat() to the personObj:
personObj.eat=eat;
In the following example, you create a direct instance of an object.
<html>
<body>
<script type="text/javascript">
personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";
document.write(personObj.firstname + " is " + personObj.age +
" years old.");
</script>
</body>
</html>
Create a template of an object
The template defines the structure of an object so that you can more easily create
multiple instances of that object:
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
Notice that the template is just a function.
It is also called a constructor. Inside the constructor, you add the properties and
methods that will belong to each subsequent instance of the object. When you
use person as a constructor for more than one object, you must include the “this”
keyword. JavaScript uses “this” to assign the properties to the specific object created
with the “new” keyword.
In the following example, you create a template for an object.
<html>
<body>
<script type="text/javascript">
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + "
years old.");
</script>
</body>
</html>
After you have the template, you can create new instances of the object, like this:
myFather=new person("John","Doe",50,"blue"); myMother=new
person("Sally","Rally",48,"green");
You can also add some methods to the person object. This is also done inside the
template:
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.newlastname=newlastname;
}
Note that methods are just functions attached to objects. Then you will have to
write the newlastname() function:
function newlastname(new_lastname)
{
this.lastname=new_lastname;
}
The newlastname() function defines the person’s new last name and assigns that
to the person. JavaScript knows which person you’re talking about by using “this.”
So, now you can write: myMother.newlastname("Doe")
Earlier in this book, you learned that JavaScript has several built-in objects, like
String, Date, Array, and more. In addition to these built-in objects, you also can create your own.
An object is just a special kind of data, a collection of properties and methods.
Let’s illustrate with an example and create an object that models a person. Proper-ties are the values associated with the object. The person’s properties include name,
height, weight, age, skin tone, eye color, and so on. All persons have these proper-ties, but the values of those properties differ from person to person. Objects also
have methods. Methods are the actions that can be performed on objects. The
person’s methods could be eat(), sleep(), work(), play(), and so on.
properties
The syntax for accessing a property of an object is as follows:
objName.propName
You can add a property to an object by simply giving it a value. Assume that the
personObj already exists; you can give it properties named firstname, lastname,
age, and eyecolor as follows:
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=30;
personObj.eyecolor="blue";
document.write(personObj.firstname);
The preceding code generates the following output:
John
Methods
An object also can contain methods.
You can call a method with the following syntax:
objName.methodName()
To call a method called sleep() for the personObj:
personObj.sleep();
If the sleep() method accepts a parameter for the number of hours, it could be
called like this:
personObj.sleep(8)
Creating your own objects
There are two ways to create a new object: You can create a direct instance of an
object, or you can create a template of an object.
Create a Direct instance of an object
The following code creates an instance of an object and adds four properties to it:
personObj=new Object();
personObj.firstname="John";
Parameters required for the method can be passed between the
parentheses.
n o t e
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";
Adding a method to the personObj is also simple. The following code adds a
method called eat() to the personObj:
personObj.eat=eat;
In the following example, you create a direct instance of an object.
<html>
<body>
<script type="text/javascript">
personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";
document.write(personObj.firstname + " is " + personObj.age +
" years old.");
</script>
</body>
</html>
Create a template of an object
The template defines the structure of an object so that you can more easily create
multiple instances of that object:
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
Notice that the template is just a function.
It is also called a constructor. Inside the constructor, you add the properties and
methods that will belong to each subsequent instance of the object. When you
use person as a constructor for more than one object, you must include the “this”
keyword. JavaScript uses “this” to assign the properties to the specific object created
with the “new” keyword.
In the following example, you create a template for an object.
<html>
<body>
<script type="text/javascript">
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + "
years old.");
</script>
</body>
</html>
After you have the template, you can create new instances of the object, like this:
myFather=new person("John","Doe",50,"blue"); myMother=new
person("Sally","Rally",48,"green");
You can also add some methods to the person object. This is also done inside the
template:
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.newlastname=newlastname;
}
Note that methods are just functions attached to objects. Then you will have to
write the newlastname() function:
function newlastname(new_lastname)
{
this.lastname=new_lastname;
}
The newlastname() function defines the person’s new last name and assigns that
to the person. JavaScript knows which person you’re talking about by using “this.”
So, now you can write: myMother.newlastname("Doe")
0 comments:
Post a Comment