Most developers are familiar with object-oriented programming and design in languages like Java, C++ and C#. JavaScript, however, does not provide any obvious means to support this kind of object-oriented development. The result is that structured code becomes very hard to write for developers new to the world of JavaScript.<\/p>\n
If you have written a few programs in JavaScript and wondered if it’s possible to add more structure to your programs using object-oriented strategies, this tip is for you. In this post, we will look at the use of a small JavaScript utility that allows us to structure our JavaScript programs in the form of “classes” and objects.<\/p>\n
Traditionally, object-oriented programming relies on creating classes and creating object instances from classes. This approach to OOP was pioneered by a language known as Simula and eventually became the basis of object-oriented programming in popular languages such as C++ and Java.<\/p>\n
Object-oriented programming in JavaScript, however, comes from a different OOP paradigm known as prototype-based programming. It was first introduced by the language Self with the aim of solving some problems in class-based programming. This style of programming has no concept of classes, and being very different from the class-based style we’re usually familiar with, it requires a learning curve.<\/p>\n
The utility presented below, however, provides a way to mimic class-based OOP in JavaScript.<\/p>\n
First, let’s look at the basic structure for putting together a class:<\/p>\n
var ClassName = Object.$extend({\r\n initialize: function () {\r\n \/\/this is the mandatory constructor. All class members should be initialized here.\r\n this.publicMember = 'Some value';\r\n this._privateMember = 'Another value';\r\n },\r\n \r\n publicFunction: function () {\r\n \/\/Code for a public function.\r\n },\r\n\r\n _privateFunction: function () {\r\n \/\/Code for a private function\r\n }\r\n });\r\n\r\n var anObject = new ClassName();\r\n anObject.publicFunction();<\/pre>\nNew “classes” are created by extending the base
\nObject <\/code>type.
\n$extend <\/code>is a function that we have created for this purpose.
\ninitialize <\/code>is, by convention, called automatically every time we create a new object and is therefore the constructor. All
\nprivate <\/code>and
\npublic <\/code>members should be declared in the
\ninitialize <\/code>function.<\/p>\nIt is important to note that the “private<\/code>” members shown above are not really private at all. Unfortunately, JavaScript doesn’t offer a means to easily mark members as private and for that reason we prefix them with an underscore to indicate them as such.
\nanObject._privateFunction() <\/code>would have worked without any issues, but users of our class should be aware of our convention and not attempt to use it directly as it is prefixed with an underscore.<\/p>\nA Detailed Example<\/h2>\n
The following is an example of an “Animal<\/code>” class built using our utility. We will use this class for our examples on inheritance:<\/p>\n\/\/This is a basic 'Animal' class. $extend is a method\r\n \/\/provided by the utility. To build a new class, we \r\n \/\/'inherit' from the base Object type\r\n\r\n var Animal = Object.$extend({\r\n\r\n \/\/'initialize' is the constructor function for objects\r\n \/\/of type Animal.\r\n\r\n initialize: function (gender) {\r\n \/\/Notice that we declare members _gender and _food in\r\n \/\/the constructor. Declaring member variables in the\r\n \/\/constructor is important.\r\n\r\n this._gender = gender;\r\n this._foods = [];\r\n },\r\n\r\n \/\/Simple getter and setter functions for the _gender\r\n \/\/property\r\n\r\n getGender: function () { return this._gender; },\r\n setGender: function (gender) { this._gender = gender; },\r\n\r\n \/\/This function adds an item to the _food array\r\n\r\n addFood: function (food) {\r\n this._foods.push(food);\r\n },\r\n\r\n \/\/self-explanatory -- removes an item from the\r\n \/\/_foods array\r\n\r\n removeFood: function (food) {\r\n for (var i = this._foods.length; i--;) {\r\n if (this._foods[i] === food) {\r\n this._foods.splice(i, 1);\r\n break;\r\n }\r\n }\r\n },\r\n\r\n \/\/Boolean function to check if this animal will eat a particular type of food.\r\n\r\n willEat: function (food) {\r\n for (var i = this._foods.length; i--;) {\r\n if (this._foods[i] === food)\r\n return true;\r\n }\r\n return false;\r\n }\r\n });<\/pre>\nThere we have it! A class for creating
\nAnimal <\/code>objects. The following code sample creates
\nAnimal <\/code>objects and shows how they are used:<\/p>\nvar lion = new Animal('male');\r\n var parrot = new Animal('female');\r\n\r\n lion.addFood('meat');\r\n parrot.addFood('fruits');\r\n\r\n lion.willEat('fruits'); \/\/false\r\n lion.willEat('meat'); \/\/true\r\n parrot.willEat('fruits'); \/\/true\r\n\r\n lion._gender \/\/ 'male'\r\n \r\n \/\/Unfortunately, JavaScript doesn't easily support 'private' properties \r\n \/\/in objects. The _gender property we created is publicly readable and\r\n \/\/writable. By convention, we prefix 'private' properties and functions\r\n \/\/with and underscore to indicate them as such.<\/pre>\nInheritance<\/h2>\n
Just like we created our baseAnimal <\/code>class by extending the type Object<\/code>, we can create child-classes of the Animal <\/code>class by extending it. The following snippet creates a ” Human<\/code>” type that inherits from Animal<\/code>.<\/p>\n\/\/Extend the Animal type to create the Human type\r\n \r\n var Human = Animal.$extend({\r\n \r\n \/\/Constructor for the Human type\r\n initialize: function (name, gender) {\r\n \r\n \/\/Notice the call to the parent constructor below. uber behaves just like\r\n \/\/super and base in Java and C#. This line will call the parent's\r\n \/\/initialize function and pass gender to it.\r\n this.uber('initialize', gender);\r\n\r\n this._name = name;\r\n\r\n \/\/These functions were defined in the Animal type\r\n this.addFood('meat');\r\n this.addFood('vegetables');\r\n this.addFood('fruits');\r\n },\r\n goVegan: function () {\r\n this.removeFood('meat');\r\n },\r\n \r\n \/\/Returns something like 'Mr. Crockford'\r\n nameWithTitle: function () {\r\n return this._getTitlePrefix() + this._name;\r\n },\r\n \r\n \/\/This function is publicly accessible, but we prefix it with an underscore\r\n \/\/to mark it as private\/protected\r\n _getTitlePrefix: function () {\r\n if (this.getGender() === 'male') return 'Mr. ';\r\n else return 'Ms. ';\r\n }\r\n });<\/pre>\nThe newHuman <\/code>class can be used as follows:<\/p>\nvar jack = new Human('Jack', 'male');\r\n var jill = new Human('Jill', 'female');\r\n jill.goVegan();\r\n jill.nameWithTitle() + ' eats meat? ' + jill.willEat('meat'); \/\/ Ms. Jill eats meat? false\r\n jack.nameWithTitle() + ' eats meat? ' + jack.willEat('meat'); \/\/ Mr. Jack eats meat? true<\/pre>\nNotice the use of the “uber<\/code>” function in the constructor. Similar to “base<\/code>” and “super<\/code>” in C# and Java, it can be used to call the base class’s functions. The next example will show another use of the\u00a0uber <\/code>function.<\/p>\nIt is important to note that the base class’s constructor is automatically called without any arguments (new Animal()<\/code>) while defining theHuman <\/code>subtype. We called it the second time using “uber<\/code>” to make sure it initializes the properties to proper values. It is important to make sure that the initialize function doesn’t throw any error if called without any arguments.<\/p>\nMore Inheritance Examples<\/h3>\n
The following code shows more examples of using OOP and inheritance using our handy utility:<\/p>\n
var Cat = Animal.$extend({\r\n initialize: function (gender) {\r\n this.uber('initialize', gender);\r\n this.addFood('meat');\r\n },\r\n speak: function () {\r\n return 'purrr';\r\n }\r\n });\r\n\r\n var DomesticCat = Cat.$extend({\r\n initialize: function (gender) {\r\n this.uber('initialize', gender);\r\n this.addFood('orijen');\r\n this.addFood('whiskas');\r\n },\r\n speak: function () {\r\n return this.uber('speak') + ', meow!';\r\n }\r\n });\r\n\r\n var WildCat = Cat.$extend({\r\n initialize: function (gender) {\r\n this.uber('initialize', gender);\r\n },\r\n speak: function () {\r\n return this.uber('speak') + ', growl, snarl!';\r\n }\r\n });\r\n\r\n var kitty = new DomesticCat('female');\r\n var tiger = new WildCat('male');\r\n 'Domestic cat eats orijen? ' + kitty.willEat('orijen'); \/\/ Domestic cat eats orijen? true\r\n 'What does the domestic cat say? ' + kitty.speak(); \/\/ What does the domestic cat say? purrr, meow!\r\n 'What does the wild cat say? ' + tiger.speak(); \/\/ What does the wild cat say? purr, growl, snarl!<\/pre>\nUsage<\/h2>\n
To use this library, download the code and include\u00a0inherit-min.js<\/em> or\u00a0inherit.js<\/em> in your code.<\/p>\nHistory<\/h2>\n
A copy of the code is also available on GitHub under the BSD license:
\nOOP in JavaScript: Inherit-js on GitHub<\/a>.<\/p>\nLicense<\/h2>\n
This article, along with any associated source code and files, is licensed under\u00a0The BSD License<\/a><\/p>\n\n