Click here to Skip to main content
13,598,868 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


3 bookmarked
Posted 30 Apr 2012
Licenced CPOL

Introduction to JS Object Oriented Programming

, 2 May 2012
Rate this:
Please Sign up or sign in to vote.
The basics of OOP in JS.


What is OOP?

Object Oriented Programming is a way to manage functions and variables without having to create like tons of functions with prefixes that you have to remember. In a logical way of explaining this, OOP supports data structures consisting of properties and methods, basically it's a way to group variables and functions. Since the Simula programming language, many dynamic programming languages have started to implement it too (e.g., C, C++); JS/EcmaScript is the first web-based programming language that supports OOP.


You manage your functions and variables in classes. Just remember this, whenever I say "object", I mean class, Object is equivalent to Class. 

Creating our first object

1st way: Defining our object 

To create an object in JS, you do it almost like in Perl:

var my_obj = {};

Note that my_obj is the object's name.

These parentheses will contain our object's method & properties. 

Adding some methods and properties


Methods are like functions, so you need to write an anonymous function inside the curly braces: 

someMethod: function(){ document.write("something"); } 

Note: someMethod is the Method's name 

You can also do: your object name + dot (.) + prototype + dot(.) = the property's name.

my_obj.prototype.someProperty = function(){ document.write("something"); };

Note that function() is not enclosed with the parentheses. 


Properties are variables, to create it do this inside the curly braces:

someProperty: "someValue"

Note: someProperty is the property's name, someValue is the property's value

You can also do: your object name + dot (.) + prototype + dot(.) = the property's name as seen above.

my_obj.prototype.someProperty = "someValue"

Warning: When you're done with a method or a property in the parentheses, place a colon at the end of it if it's not the final method/property.


Constructors are the second way to load an object with the developers arguments.

function me(sp,sm){
    this.someProperty =sp;

We're gonna make a duplicate the my_obj as seen above

var my_obj = new me("something", function(){ document.write("somemethod") } ) 

Initialize our object

We do not need to create an instance of our object. All we need to do now is access your object's methods/properties. Let's look at two examples using our object. 

Example 1 (Property):

To access a property, type in your object name + dot (.) + the property's name.


Example 2 (Method):

To access a property, type in your object name + dot (.) + the property's name.


Putting it together

Now that we have a complete object set-up, it's time to write the files! 


var my_obj = {
    someMethod: function(){ document.write("something"); },
    someProperty: "someValue"

document.write(my_obj.someProperty + "<br>");

JS (using constructors)

function me(sp,sm){
    this.someProperty =sp;

var my_obj = new me("something", function(){ document.write("somemethod") }

document.write(my_obj.someProperty + "<br>");


<script src='obj.js'></script>


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Almar Mike
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 3 Pin
Priyank Bolia30-Apr-12 16:04
memberPriyank Bolia30-Apr-12 16:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.180621.3 | Last Updated 2 May 2012
Article Copyright 2012 by Almar Mike
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid