Click here to Skip to main content
Click here to Skip to main content

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.

Introduction

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.

Classes


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 

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 

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

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

function me(sp,sm){
    this.someMethod=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.

document.write(my_obj.someProperty);

Example 2 (Method):

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

my_obj.someMethod(); 

Putting it together

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

JS

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

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

JS (using constructors)

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

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

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

HTML

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

License

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

Share

About the Author

Almar Mike
Other
United States United States
No Biography provided

Comments and Discussions

 
GeneralMy vote of 3 PinmemberPriyank Bolia30-Apr-12 16:04 
QuestionMixing Methods... PinmemberThe_Mega_ZZTer30-Apr-12 10:04 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140821.2 | Last Updated 2 May 2012
Article Copyright 2012 by Almar Mike
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid