JAVASCRIPT

Adding and Deleting JavaScript Properties and Methods

Did you know that after you have written the code for a JavaScript object, you could still add properties and methods to the object at run time? Did you know that the user can add properties and methods to a JavaScript object? In this three part series, I show you how to add JavaScript properties and methods at compile and at run time.

Author Info:

By: Chrysanthus Forcha

Poor Best

Rating:

/ 1

September 25, 2009

TABLE OF CONTENTS:

After creating the object type, any property or method to add can only be added at run time. You can add a property name or method name to an object type (class), but you cannot add the value. That is, you can add a property name, such as propertyType2, but you cannot assign a value such as “Yes type two” to this added property of the object type. You can also add the method name such as methodType2, but you cannot assign a function to this added property of the object type. So you can add a property or method to an object type without having it assigned.

All object types have the prototype property. To add a property or method to an object type, you use the prototype property. To add a property whose name is propertyType2 to the above object type, you need the statement:

ObjectType.prototype.propertyType2 = null;

This statement is used after you have created the object type. Note that null is assigned to the property of the object type. This is how you add properties to object types; you cannot assign a value to the added property of the object type. That is, you can add a property which is not initialized to an object type. You cannot add a property to an object type and at the same time initialize it (well, it is initialized to null).

To add a method whose name is propertyType2 to the above object type, you need the statement:

ObjectType.prototype.methodType2 = null;

This statement is used after you have created the object type. Note that null is assigned to the method. This is how you add methods to object types; you cannot assign a function to the added property of the object type. You can add a method which is not initialized to an object type, but you cannot add the method to the object type and at the same time initialize it (well, it is initialized to null).

Inheritance

After adding the property or method to an object type, any particular object you create from the object type, or any particular object you had created from the object type, inherits the property or method you have just added. However, the property or method inherited was not initialized.

You can initialize a property or method (that is, do assignment) only for the object created from the object type. You cannot do initialization or assignment when you are adding a property or method to the object type.

In the example above we have an object type, namely ObjectType. Assume that you add the following property and method to this object type (without initialization).

ObjectType.prototype.propertyType2 = null;

ObjectType.prototype.methodType2 = null;

When the object, theObject, is created from ObjectType, you can then do the initialization and any subsequent assignment to the theObject inherited object and not the ObjectType object type. To initialize the propertyType2 property of our particular object to “Yes type two,” you code this:

theObject.propertyType2 = “Yes type two”;

To initialize the methodType2 method of our particular object to a function, namely functionType2, you code this:

theObject.methodType2 = functionType2;

The functionType2 function should exist in the script.

Note: the initialized values of the property and method do not occur in any of the other objects created from the object type (class). These values also do not occur in the object type. However, the name of the property and the method remain (with null) in the object type.

The following code illustrates what we have said about adding properties and methods to the object type and the inherited object.

<html>

<head>

function functionType1()

{

alert('This is function type one');

}

function functionType2()

{

alert('This is function type two');

}

function ObjectType()

{

this.propertyType1 = "Yes type one";

this.methodType1 = functionType1;

}

ObjectType.prototype.propertyType2 = null;

ObjectType.prototype.methodType2 = null;

var theObject = new ObjectType();

theObject.propertyType2 = "Yes type two";

theObject.methodType2 = functionType2;

</script>

</head>

<body>

<button type="button" onclick="alert(theObject.propertyType2)">Display property type 2</button>

<button type="button" onclick="theObject.methodType2()">Call Method type 2</button>

</body>

</html>

You can save this code as an HTML file and then open it with a web browser. When you click the first button, the value of the initialized property is displayed for the particular object, theObject. When you click the second button, the method initialized for the particular object, theObject, is executed. The initialized method is the functionType2() function, which exists in the code.

We have done a lot for this part of the series. In the next part, we shall see how to add properties to particular objects (instances) independent of the object type (class). We shall then see how to delete properties and methods.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.