JavaScript Create Your Own Objects

Objects are useful to organize information.

Try it Yourself - Eamples
Create a !irect instance of an object
Create a template for an object
JavaScript Objects
Earlier in t"is tutorial we "ave seen t"at JavaScript "as several built-in objects# li$e String# %ate#
&rray# an! more. 'n a!!ition to t"ese built-in objects# you can also create your own.
&n object is just a special $in! of !ata# wit" a collection of properties an! met"o!s.
(et)s illustrate wit" an eample* & person is an object. +roperties are t"e values associate! wit" t"e
object. T"e persons) properties inclu!e name# "eig"t# weig"t# age# s$in tone# eye color# etc. &ll
persons "ave t"ese properties# but t"e values of t"ose properties will !iffer from person to person.
Objects also "ave met"o!s. ,et"o!s are t"e actions t"at can be performe! on objects. T"e persons)
met"o!s coul! be eat-.# sleep-.# wor$-.# play-.# etc.
+roperties
T"e synta for accessing a property of an object is*
objName.propName
You can a!! properties to an object by simply giving it a value. &ssume t"at t"e personObj alrea!y
eists - you can give it properties name! firstname# lastname# age# an! eyecolor as follows*
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=30;
personObj.eyecolor="blue";
document.writepersonObj.firstname!;
T"e co!e above will generate t"e following output*
John
,et"o!s
&n object can also contain met"o!s.
You can call a met"o! wit" t"e following synta*
objName.methodName!
Note: +arameters re/uire! for t"e met"o! can be passe! between t"e parent"eses.
To call a met"o! calle! sleep-. for t"e personObj*
personObj.sleep!;
Creating Your Own Objects
T"ere are !ifferent ways to create a new object*
1. Create a direct instance of an object
T"e following co!e creates an instance of an object an! a!!s four properties to it*
personObj=new Object!;
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=#0;
personObj.eyecolor="blue";
&!!ing a met"o! to t"e personObj is also simple. T"e following co!e a!!s a met"o! calle! eat-. to
t"e personObj*
personObj.eat=eat;
2. Create a template of an object
T"e template !efines t"e structure of an object*
function personfirstname$lastname$age$eyecolor!
%
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
&
0otice t"at t"e template is just a function. 'nsi!e t"e function you nee! to assign t"ings to
t"is.property0ame. T"e reason for all t"e 1t"is1 stuff is t"at you)re going to "ave more t"an one
person at a time -w"ic" person you)re !ealing wit" must be clear.. T"at)s w"at 1t"is1 is* t"e
instance of t"e object at "an!.
Once you "ave t"e template# you can create new instances of t"e object# li$e t"is*
my'ather=new person"John"$"Doe"$#0$"blue"!; my(other=new
person")ally"$"*ally"$+,$"green"!;
You can also a!! some met"o!s to t"e person object. T"is is also !one insi!e t"e template*
function personfirstname$lastname$age$eyecolor!
%
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.newlastname=newlastname;
&
0ote t"at met"o!s are just functions attac"e! to objects. T"en we will "ave to write t"e
newlastname-. function*
function newlastnamenew-lastname!
%
this.lastname=new-lastname;
&
T"e newlastname-. function !efines t"e person)s new last name an! assigns t"at to t"e person.
JavaScript $nows w"ic" person you)re tal$ing about by using 1t"is.1. So# now you can write*
my,ot"er.newlastname-1%oe1..