Creating ECMAScript Objects by Inheritance
Creating JavaScript Objects by Inheritance
Forward: In this article I show you how to create JavaScript objects by inheritance.
By: Chrysanthus Date Published: 9 Aug 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what has been typed.
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:
<script type="text/javascript">
var num1 = 5;
var num2 = 8;
function add ()
{
answer = num1 + num2;
return answer;
}
var result = add();
alert(result);
</script>
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.
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.
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. This is followed by () and then {}. Inside {}, you have the statements for the method.
Let us look at the statements inside the method (function) definition of the above code. There are two statements. The first one is
answer = myObject.num1 + myObject.num2;
In the statement the first thing you have is the variable, answer. After the assignment operator, you have the expression, myObject.num1. This expression returns the value of the first property to that position. Next you have the plus sign and the expression, myObject.num2. This second expression returns the value of the second property to that position. Note that in the function definition, each of the property names is preceded by the object name. The values of the two property values are added in the statement in the right operand and assigned to the value, answer. The second statement in the method, returns the value of answer. So when this method is called, it would do the addition and returns the answer.
The above code has two properties for the objects and one method, corresponding to the two variables and one function in the first code.
The last but one statement in the above code calls the method of the object. You call a method of an object with the following syntax.
objectName.methodName()
In our case, the object name is myObject and the method name is, add. Note that the method name is followed by (). The parentheses can have arguments. However, in the definition of a method, the method name is not followed by (). In the definition, you can put parameters in the () after the reserved word, “function”.
The last but one statement in the above code, calls the method and assigns the return value to the new variable, result. The last statement displays the result.
The object you first create is always inherited from the object whose code you cannot see at the JavaScript interpreter. This object is a child object of the object at the interpreter. You can still create a child object from the concrete object you have just created. You can create another child object from the child object you would have created. In this way you have a chain of descendant objects.
An inherited object inherits all the properties and methods of its parent object. In addition it can modify the inherited properties and methods and it can add new properties and methods. In the following code, the first property of the above code is modified, the method is modified, and a new method is added. These changes are made in the inherited object. The explanation is given below the code:
myObject = new Object();
myObject.num1 = 5;
myObject.num2 = 8;
myObject.add = function ()
{
answer = myObject.num1 + myObject.num2;
return answer;
}
var childObject = myObject;
childObject.num1 = 3;
childObject.add = function (num3)
{
answer = childObject.num1 + childObject.num2 + num3;
return answer;
}
childObject.multiply = function ()
{
answer = childObject.num1 * childObject.num2;
return answer;
}
result1 = childObject.num1;
alert(result1);
result2 = childObject.add(7);
alert(result2);
result3 = childObject.multiply();
alert(result3);
The first 8 lines of this new code are the same as the first 8 lines of the previous code. The next line creates the inherited object just by assigning the parent object to a new variable. This new variable is the inherited object. The statement in our example for this is:
childObject = myObject;
childObject is the inherited object, while myObject is the parent object created from the object whose code you cannot see in the Interpreter. After creating this child object by assignment, you can go on to modify any of its properties or methods. You can also go on to add new properties and methods. You modify inherited properties or methods just by reassigning the inherited properties and methods. In the above code the inherited property, num1 is modified; the inherited method, add, is modified to take an argument. A new method, multiply, is added.
You should try all the above code samples.
You access a property in order to read or change its value. The syntax to access a JavaScript object property (outside the object code), is simply
objectName.propertyName
There is a dot in between the object name and property name.
Generally you access a method to execute it: we say you call the method. The syntax for calling a JavaScript object method is
objectName.methodName(args);
There is a dot in between the object name and method name. Some methods take arguments. If no arguments are involved, then you do not put anything in the () brackets; however, the brackets must be present when calling the method. Note: After the method name in the object code, the () brackets should not be present.
Adding Properties and Methods to an Object
All I will give you here is just the syntax. The syntax to add a new property to an object is,
objectName.newPropName = value;
If the value is a string, it has to be in quotes. The syntax to add a new method to an object is,
objectName.newMethodName = function (params)
{
method statements
}
Summary
To create the first object by inheritance, use the following syntax:
ObjectName = new Object();
With ObjectName, you add properties and methods.
You can create a child object from an already existing object. To do that, use the following syntax:
var childObject = alreadyExistingParentObj;
You modify the inherited properties and methods by reassigning them using the child object. You add properties and methods to the child object in the same way that you add properties and methods to the parent object.
That is it: Creating JavaScript Objects by Inheritance. I hope you appreciated it.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT