The JavaScript object model

  Read comments... Posted on 20th December 2015, short URL: http://rgraph.net/jsom

Summary
Confused about the prototypal JavaScript object model? This article will explain it to you so that you can better understand the RGraph chart objects.

Introduction

If you're used to the more traditional class based system of object-oriented programming then JavaScript can look like its missing this (ES5 and prior at least) because it uses something called prototypal inheritance and it doesn't use classes to define objects. Instead, the basic unit in JavaScript OO is the lowly old function.

Believe it or not every time that you've created a function you have unknowingly created an object which you could new if you wanted to.

<script>
    function Fruit ()
    {
    }
    
    var orange = new Fruit();
</script>

There's also another way that you can create objects - and that's with the object literal notation:

var orange = {};

Short and sweet - but since RGraph uses the former to setup the objects, that's what we'll dicuss. Object literal notation can be useful when you want to return an object from a function or as a data structure.

An example of the syntax

So lets dive straight in and see the structure of an object and what you can use.

<script>
    // 1. The Object definition
    function MyObject ()
    {
        // 2. A private variable
        var myVar1 = 42;
        
        
        // 3. A public variable
        this.myVar2 = 67;
        
        
        // 4. A private function
        function myPrivate ()
        {
            // 5. A variable that's private to this function
            var myVar3 = 56;
            
            // 6.. A nested private function
            function myNestedPrivate ()
            {
            }
        }
    
    
        // 7. A priveleged function
        this.myPriveleged = function ()
        {
        };
    }
    
    // 8. A public function
    MyObject.prototype.myPublic = function ()
    {
    };
</script>

1. The object definition

The object definition itself - just a regular old function that you've used a million times before. As our mothers told us - it's whats inside that counts! The private functions/variables and privileged functions are contained within this function. The public functions are seperate - and added to the objects prototype later. Thus, because of JavaScripts scoping they don't have access to the private variables.

2. A private variable

Yes - commonly said not to be possible JavaScript objects can have private variables and as shown here they're defined by using a local variable within the constructor function (the MyObject function). Only private and priveleged functions can access them. If you (in another function or in the global scope) or a public function were to try and retrieve them you would get undefined back instead.

3. A public variable

As their name suggests - public variables can be modified by anyone and anything. They certainly the easiest to work with since there's no restrictions - but you have to be aware that anyone and anycode can update these properties.

4. A private function

A private function that can just be accessed by the other functions that are defined within the constructor (ie not public functions).

5. A variable that's private to this function

A private function variable is one that's defined in a private variable. It can only be accessed from the function that it's defined in (and any nested functions).

5. A nested private function

Nested private functions might be helper-type functions that the enclosing/main private function uses to do its job. The local variables defined in this function are private to this function only, but it can access the enclosing/main functions local variables.

6. A priveleged function

A privileged function isn't, as the name might suggest, born with a silver spoon in its mouth - but it can access the objects private variables. You can still call the functions like this: obj.myMethod() so a prime use might be getter/setter style functions. Most of the RGraph object functions are this type to make the objects easier to work with.

7. A public function

A public function can be used to restrict access to your member variables. These functions are defined outside the scope of the constructor function (which is why they can't access the private variables. They can, however, access the public variables).

Conclusion

So you can see that JavaScripts object model is actually quite versatile and it does (contrary to popular thinking) have levels of protection for object properties and methods. On a seperate note it also supports patterns for OO based programming - which you can Google for if you're interested in exploring this further.

In my next article I'll explore ES6 classes which bring the more familiar way od writing OO code.

Share RGraph
X

Comments