Implementing native objects in JavaScript

JavaScript is an object-oriented programming language, which means that to develop applications you must understand how to work with objects.

There are two types of objects in JavaScript:

Native JavaScript objects, which are provided with JavaScript itself
Custom objects, which developers create to represent their own data constructs and behaviors

You can base objects on other objects by using object inheritance. Objects encapsulate functionality provided in the form of methods, whereas state information is provided in the form of properties.

Static native objects

Native objects are available to developers directly through JavaScript. Some native objects are available statically, which means you don’t need to create an instance of them.

Others require you to create an instance. You can find both types among objects in the global namespace.

The code below is an example of a Math static object available in the global namespace:

<body>
<input type="submit" onclick="staticObject()" value="STATIC OBJECT" /> <br />
<script type="text/javascript">
    var staticObject = function () {
        var squareValue = Math.sqrt(81);
        alert(squareValue);
    }
</script>
</body>

Array objects

Other objects, such as Array require to create an instance to work with them. The new keyword uses to instatiate an object and tells to the runtime to allocate a new object of the type specified.

The list after the Array is called the object’s constructor. The information is passed into the object as parameters to construct the initial state of the object.

Some objects have many constructors, with differing sets of parameters. The addition of multiple constructors is called an overloaded constructor:

The following code is an exaple of an Array object:

<body>
<input type="submit" onclick="arrayObject()" value="ARRAY OBJECT" /><br />
<script type="text/javascript">
        var arrayObject = function () {
            var primeNumbers = new Array(1, 2, 3, 5, 7, 11, 13, 17, 19, 23);
            alert(primeNumbers);
        }
</script>
</body>

Wrapper objects and methods

Native objects are defined as integer, string, char etc. This types don’t natively have methods or functionality;

You can declare and access method as in the following code:

<script type="text/javascript">   
    var txt = "This is a string";
    var number = 10;
    //access method on the variable 
    var index = txt.indexOf("long",0);
    var exp = number.toExponential(10);
</script>

JavaScript runtime creates a wrapper object for string and integer types dynamically, making some useful methods available.You can create string and number variables with the new keyword, but that’s not very common.

The following code gives an example of this:

<body>
<input type="submit" onclick="wrapperString()" value="WRAPPER OBJECT-STRING" /><br />
<input type="submit" onclick="wrapperNumber()" value="WARPPER OBJECT-NUMBER" /><br />
<script type="text/javascript">
    var wrapperString = function () {
        var txt = "This is a string";       
        var index = txt.indexOf("long", 0);
        alert(index);
    }
    var wrapperNumber = function () {
    var number = 10;
    var exp = number.toExponential(10);
    alert(exp);
    }
</script>
</body>

The syntax applies to both native objects and custom objects. Custom objects are created by the developer, whereas native objects are provided by core JavaScript.

Ads Right