Creating JavaScript Objects by Inheritance

Introduction
The aim of this article is to quickly make you understand the meaning of Programming
Objects (OOP) and how to create them in JavaScript. I assume here that you know the
meaning of variables and functions in JavaScript, but you might not have understood
JavaScript objects. There are three ways of creating JavaScript objects and in this article I
will show you the one that is indicated by the title (of this article). Let us start.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Variables, Functions and Objects in JavaScript
Let us look at two variables and a function. The two variables hold two numbers. The
function adds the two numbers. These are the two variables and the function:

var num1 = 5;
var num2 = 8;
function add ()
{
answer = num1 + num2;
return answer;
}

var result = add();
alert(result);

As you can see in the code, there are two variables. The function adds the values of the
two variables, and returns the answer. Down in the code, the function is called, and the
return value is assigned to a new variable, result. The last statement alerts (displays) the
result.

Now, in programming (in a program code) you would find some functions that work with
certain variables, such that if you remove one of the variables in the code, the rest of the
variables and the functions will not be very useful; also, if you remove one of the
functions, the rest of the functions and the variables will not be very useful. In other
words, the variables and functions in question form a set. The above group of statements
is such a set. Would it not be nice if we had such a set in one unit? In fact, many modern
programs, have such a set in one unit called an object. Many modern computer languages
have each, its own syntax for creating an object. JavaScript has three ways of doing this
and in this article we learn a way I describe as Creating JavaScript Objects by
Inheritance.

Properties and Methods
A programming object fundamentally has what is called properties and methods. This is
not a big deal. In the above script we have a function, which works with two variables. If
we are to make this “set”, an object, then the variables would become the properties and
the function would become the method. You can have more than one method in an
object, just as you can have more than one property. As you can see it is not a big deal;
all you have to do is to know the syntax that will make the variables, properties and the
functions, methods.

Object already created
The JavaScript inventors are smart. They created a JavaScript object and kept it in the
JavaScript Interpreter. You the programmer do not see the object but it is there for you to
easily use to create your own objects. This object is like a parent object and when you
create your own object from it we say your object is inherited from this parent object
(hence the title). Note that after creating an object from this parent, you can create other
objects from what you have created; and the inheritance chain descends giving you great
grandchildren objects.

Creating your Object
To create your own object from the parent object mentioned above, you use what is
called the Object Constructor. The object constructor is an expression that when preceded
by the word, “new” the parent object mentioned above is returned. You assign the
returned parent object to a variable. As you add properties and/or methods (see below) to
this returned parent object, you have your own object. The following code is a substitute
for the above code, but with object features. The explanation is given after the code.

myObject = new Object();

myObject.num1 = 5;
myObject.num2 = 8;
myObject.add = function ()
{
answer = myObject.num1 + myObject.num2;
return answer;
}

result = myObject.add();
alert(result);

Before we continue, note that only the last line of this code and the last line of the one
above are exactly the same. Let us look at the present code. The first line creates your
object. “Object()” is the object constructor. The word, “new” that precedes it is an
example of what is called JavaScript Operators. Whenever you want to create an object
using the approach of this article, use this “new” operator. After typing it, type space and
then “Object()”. Remember that JavaScript is case sensitive, so respect the cases as I have
done. The right operand (new Object()) returns the parent object that has been assigned to
the variable, myObject. The name, myObject is what you choose; you can choose any
name you wish. myObject is the object name for your created object.

At this point, your object is still the parent object but in a usable form. The parent object
in the interpreter, whose code you cannot see, is not in a usable form. In order to use it,
you must write a statement like the first statement above. The only thing that can be
changed in that first statement is the left operand (the object name). You effectively have
an object as you add properties and methods to myObject; we now see how that is done.

In the above code, the second line adds the first property to the object. The name of the
property is, num1. We had this as a variable in the first code. You access a property with
the following syntax:

objectName.propertyName

You begin with the object name, which in our case is, myObject. This is followed by the
property name, which in the second line of the above code is, num1. You can assign to a
property a value (5) as this second line shows. Whenever you assign a value, whatever
property value that was there, is replaced. The third line in the code is for the second
object property with name, num2 with value, 8. This property replaces the second
variable we had in the first code.

The function in the first code becomes a method in the second code. You declare a
method with the following syntax:

objectName.methodName

In the second code, the object name is, myObject and the method name is, add. You can
give whatever method name you want; however, the name you give should be related in
spelling to the purpose of the function. Next, you have the definition of a function and
assign it to this declaration (to result in a method). After the “=” character, you have the
reserved word, “function” in lowercase.

Facebook
Twitter
Pinterest