Objects help you organize information in an easily understandable
way. Let's start with the frivolous example of constructing an employee
database, then use the lessons we learn to tackle something far more complex and relevant to our lives: writing a JavaScript virtual pet.
For the purposes of this exercise, let's put aside all those issues concerning the objectification of the worker in modern capitalist society, and consider each employee as an object with a certain set of
properties and methods. Each employee has a name, title, salary, birthday, address, and so on. Employees can be promoted, go on vacation, transferred, or put on kitchen duty. An object represents all of this information, and the employee object is like a template. Each employee has the same types of properties — an age, name, title — but the
values of the properties differ from employee to employee. Joe is an
employee with one age and title, Jane is an employee with another age
and title. Both are employees, hence they have the same properties. It's
the values of those properties that differ between employees.
To write your own object, you need to start with the template. In object-oriented programming, the template is called the
object's constructor. Once you have the template, you can
create new instances of the object, like this:
var fred = new Employee("Fred Flintstone", 33, "Surface Miner", 20000);
var barney = new Employee("Barney Rubble", 33, "Slacker", 40000);
var boss = new Employee("Mr. Slate",50, "CEO", 1000000);
After you've created these instances of the Employee object, you can
do stuff like this:
barney.promotion("Chief Slacker","10");
fred.fired();
boss.vacation(365);
If you want to promote Barney to Chief Slacker and give him a 10 percent raise, fire Fred, and note that the CEO is taking the year off.
Of course you have to write the constructor and the method calls yourself.
Start with just the properties. Here is the Employee constructor:
function Employee(name, age, title, salary)
{
this.name = name;
this.age = age;
this.title = title;
this.salary = salary;
}
Notice that a constructor is just a function. Inside the function you need to assign things to this.property_name. We're not just setting the age to 0, we're setting this.age to 0. The same is true for this.name, this.title, etc.
You can pass parameters into constructors. When we call the Employee constructor ...
var barney = new Employee("Barney Rubble", 33, "Slacker", 40000);
... and then in the Employee function ...
this.name = name;
... we're setting the name of this employee to whatever we passed into
the Employee constructor function.
The reason for all the "this" stuff in the
constructor is that you're going to have more than one employee
at a time. In order for your methods and constructor to work, which employee you're dealing with must be clear. That's what "this" is: the instance of the object at hand. Showing you methods might help make things more clear.
Methods are just functions attached to objects. First, define the
function, then assign the function to the object (inside the
object's constructor function). Take the promotion() method as an example:
function promotion(new_title,percent_raise)
{
var salary_increase = this.salary * percent_raise;
this.salary = this.salary + salary_increase;
this.title = new_title;
}
This function calculates what the employee's new salary should be and assigns that, along with the new title, to the employee. JavaScript knows which employee you're talking about by using "this." So if you write:
barney.promotion("Chief Slacker",10);
Then "this" is Barney. It's definitely a little weird and takes some time to
get used to it. But once you start thinking in terms of objects, it soon becomes habit.
The last step to building the object is to tie the method to the object. As I mentioned earlier, you do this inside the constructor. To tie the
promotion method to the Employee object, you'd write the promotion() function, then add this to the constructor:
this.promotion = promotion;
Here's the Employee constructor with the promotion method added:
function Employee(name, age, title, salary)
{
this.name = name;
this.age = age;
this.title = title;
this.salary = salary;
this.promotion = promotion;
}
function promotion(new_title,percent_raise)
{
var salary_increase = this.salary * percent_raise;
this.salary = this.salary + salary_increase;
this.title = new_title;
}
To add other information, say, the office in which an employee works, make a property named "office." And then if you wanted to record a change in the employee's venue, you'd create a method named transfer().
Got that? Now on to more complicated and important object-oriented JavaScript, like creating the virtual pet.
next page»
