The prototypal JavaScript object model

Written by Richard Heyes, RGraph author, on 19th December 2015

• Introduction
• An example of the syntax
  • 1. The object definition
  • 2. A private variable
  • 3. A public variable
  • 4. A private function
  • 5. A variable that's private to this function
  • 6. A nested private function
  • 7. A privileged function
  • 8. A public function
• Conclusion

Introduction

If you're used to the more traditional class-based system of object-oriented programming then javascript can look like it's 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 object-orientation 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 set up the objects, that's what we'll discuss. 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 let's 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 privileged function
        this.myPrivileged = 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 what's inside that counts! The private functions/variables and privileged functions are contained within this function. The public functions are separate and added to the prototype of the object later. Thus because of the javascript scoping rules 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 privileged functions can access them. If you (in another function or the global scope) or a public function was 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're certainly the easiest to work with since there are no restrictions - but you have to be aware that anyone and any code 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).

6. 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 function's local variables.

7. A privileged function

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

8. 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 the javascript object model is quite versatile and it does (contrary to popular thinking) have levels of protection for object properties and methods. On a separate note, it also supports patterns for object-oriented 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 of writing object-oriented code.