1. Technology

Object Oriented JavaScript

1. What is Object Oriented JavaScript?


Object Oriented Programming is one of the five or so different styles of programming and is one of the styles that is supported by JavaScript. JavaScript implements object oriented programming in a slightly different way than other languages such as Java and C# implement object oriented processing though. While most object oriented languages distinguishe between classes and objects (where a class is a grouping of similar objects that provides the definition for those objects), JavaScript only has objects and uses a technique called prototyping to derive one object from another.

Let's consider an example so as to clarify exactly what that means. In most object oriented languages you might have a class called "book" which defines all of the properties and methods that a book can have for example properties might include "table of contents", "chapters", "index" and methods might include "open", "read", and "close". You would then create objects belonging to that class representing specific books. In JavaScript we don't have classes and so "book" would itself be defined as an object which would then be used as the prototype for the objects that we create for specific books. In practical terms it achieves the same overall result but gets there in a slightly different way An awareness of this difference means that we can depart slightly from more conventional object oriented patterns to take advantage of these differences in order to produce more efficient code.

For those of you not already familiar with object oriented programming this means that the object oriented programming that you will learn using javaScript will not translate directly into processes that will work the same way in other object oriented languages so that there will be a little more learning to do when you move on to learning a language that uses classes instead of prototyping. For those of you already familiar with object oriented programming using other languages you will still need to learn the difference between classes and prototyping and how that influences the way that you create and use objects.

Before we start to look into writing actual object oriented code using JavaScript let's first look at some of the basic terminology that object oriented programming uses and how that realtes to JavaScript (which is slightly different from the way it works in other languages).

The basis of object oriented programs are the "objects" that your code works with (hence the name for this programming style). Each object can hae properties and methods. The properties basically hold values associated with the object while the methods provide the definitions of how the object can be acted on which can include changing the values of the properties (for example the turnPage method of a book would update the currentPage property to indicate which page the book is now open at).

In JavaScript that is written to run in a web browser all of the variables that you use in your script that are not specifically defined as a property of a specific object are properties of the "window" object (which is a built in object representing the browser viewport or frame in which the current web page is displayed). The terms variable and property can therefore be used interchangeably since all variables are properties. Similarly all of the functions defined in your program that are not specifically defined as methods of a particular object are attached to the "window" object and so functions and methods can also be used interchangeably since all functions are also methods.

To create an object we need to call that object's constructor method. With class based languages the constructor function has the same method name as class name. With JavaScript since we don't have class names the constructor method for an object is simply a method with the same name as the object that we are creating. The way that JavaScript knows that method "xyz" is a constructor for object "xyz" and not just another method attached to "window" is determined by the way that we call the method. When calling a constructor method we precede the call to the method with the new reserved word which tells JavaScript that we are creating a new object rather than calling a method of an existing one. New objects are created in JavaScript every time that new is used in your code.

The actual statements that you use in JavaScript to create object oriented code is not greatly different from what you might already be used to using. The actual concepts relating to programming in an object oriented way relate primarily to how you write the code.

All the Object Oriented JavaScript Tutorials

  1. What is Object Oriented JavaScript?
  2. The Benefits of OO JavaScript
  3. JavaScript's Built in Objects
  4. Extending Built In Objects
  5. Creating Objects from Existing Objects
  6. Creating New Objects Without Copying Existing Ones
  7. Dot Notation and "this"
  8. prototype
  9. Inheritance and "constructor"
  10. Associative Array Notation
  11. Create Method if Doesn't Exist
  12. "self" and Multiple Objects
  13. Defining Objects with JSON
  14. Namespaces
  15. Lazy Definition
  16. Extending Methods
  17. Copying Objects
  18. Private Properties and Privileged Methods
  19. Public Access to Private Methods
  20. Chaining Methods
  21. Singletons
  1. About.com
  2. Technology
  3. JavaScript
  4. Javascript Tutorials
  5. Object Oriented JavaScript
  6. What is Object Oriented JavaScript?

©2014 About.com. All rights reserved.