JavaScript OOPS Implimentation

OBJECT ORIENTED JAVASCRIPT
Getting Started

OVERVIEW
 JavaScript is an object oriented language; it has
types and operators, core objects, and methods. Its
syntax comes from the Java and C languages, so
many structures from those languages apply to
JavaScript as well. One of the key differences is
that JavaScript does not have classes; instead, the
class functionality is accomplished by object
prototypes. The other main difference is that
functions are objects

JAVASCRIPT HAS DYNAMIC TYPES
JAVASCRIPT HAS DYNAMIC TYPES. THIS MEANS THAT THE SAME VARIABLE
CAN BE USED AS DIFFERENT TYPES:
 var x; // Now x is undefined
var x = 5; // Now x is a Number
var x = "John"; // Now x is a String

PRIMARY DATA TYPES
 The primary (primitive) data types are:
 String
 Number
 Boolean

STRING
A string is a variable which stores a series of characters like "John
Doe". Strings are written with quotes. You can use single or double
quotes:
Example
var carName = "Volvo XC60"; // Using
double quotes
var carName = 'Volvo XC60'; // Using
single quotes
Strings are concatenated using + operator

JAVASCRIPT NUMBERS
 Numbers can be written with, or without decimals:
var x1 = 34.00; // Written with decimals
var x2 = 34; // Written without decimals
 Extra large or extra small numbers can be written
with scientific (exponential) notation:
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123
Example

JAVASCRIPT BOOLEANS
 Booleans can only have two values: true or false.
 var x = true;
var y = false;

 Other types are Undefined and Null, which are
slightly odd. And Arrays, which are a special kind of
object. And Dates and Regular Expressions, which
are objects that you get for free. And to be
technically accurate, functions are just a special
type of object. So the type diagram looks more like
this:

CORE OBJECTS
 JavaScript has several objects included in its core;
for example, there are objects like Math, Object,
Array, and String. The example below shows how to
use the Math object to get a random number by
using its random() method.
 you can look here for all core objects

NOTE
 Every object in JavaScript is an instance of the
Object and therefore inherits all its properties and
methods.

CUSTOM OBJECTS
The Class:
JavaScript is a prototype-based language which contains no class statement,
such as is found in C++ or Java. This is sometimes confusing for programmers
accustomed to languages with a class statement. Instead, JavaScript uses
functions as classes. Defining a class is as easy as defining a function. In the
example below we define a new class called Person.

THE OBJECT (CLASS INSTANCE)
To create a new instance of an object obj we use the
statement new obj, assigning the result (which is of type obj) to a
variable to access it later. In the example below we define a
class named Person and we create two instances
(person1 and person2).
Please also see Object.create for a new
and alternative instantiation method.

THE CONSTRUCTOR
 The constructor is called at the moment of instantiation (the moment when the
object instance is created). The constructor is a method of the class. In
JavaScript, the function serves as the constructor of the object; therefore,
there is no need to explicitly define a constructor method. Every action
declared in the class gets executed at the time of instantiation. In the example
below, the constructor of the class Person displays an alert when a Person is
instantiated.

THE PROPERTY (OBJECT ATTRIBUTE)
 Properties are variables contained in the class; every instance
of the object has those properties. Properties should be set in
the prototype property of the class (function) so that
inheritance works correctly.
 Working with properties from within the class is done by the
keyword this, which refers to the current object. Accessing
(reading or writing) a property outside of the class is done with
the syntax: InstanceName.Property; this is the same syntax
used by C++, Java, and a number of other languages. (Inside
the class the syntax this.Property is used to get or set the
property's value.)

IN THE EXAMPLE BELOW WE DEFINE
THE GENDER PROPERTY FOR THE PERSON CLASS AND WE
DEFINE IT AT INSTANTIATION

THE METHODS
 Methods follow the same logic as properties; the
difference is that they are functions and they are
defined as functions. Calling a method is similar to
accessing a property, but you add () at the end of
the method name, possibly with arguments. To
define a method, assign a function to a named
property of the class's prototype property; the name
that the function is assigned to is the name that the
method is called by on the object.

SCOPE OF VARIABLES PUBLIC/PRIVATE
 private variables are declared with the 'var' keyword
inside the object, and can only be accessed by private
functions and privileged methods.
 private functions are declared inline inside the object's
constructor (or alternatively may be defined
via var functionName=function(){...}) and may only be
called by privileged methods (including the object's
constructor).

SCOPE OF VARIABLES PUBLIC/PRIVATE
 privileged methods are declared
with this.methodName=function(){...} and may invoked by code
external to the object.
 public properties are declared with this.variableName and may
be read/written from outside the object.
 public methods are defined
by Classname.prototype.methodName = function(){...} and may
be called from outside the object.
 prototype properties are defined
by Classname.prototype.propertyName = someValue
 static properties are defined by Classname.propertyName =
someValue

PUBLIC MEMBERS
 The members of an object are all public members. Any
function can access, modify, or delete those members, or add
new members. There are two main ways of putting members
in a new object:
 In the constructor
 This technique is usually used to initialize public instance
variables. The constructor's this variable is used to add
members to the object.

PUBLIC VARIABLES
 In the prototype
 This technique is usually used to add public methods. When a
member is sought and it isn't found in the object itself, then it is
taken from the object's constructor's prototype member. The
prototype mechanism is used for inheritance. It also conserves
memory. To add a method to all objects made by a constructor,
add a function to the constructor's prototype:
http://jsfiddle.net/usmantufail/Ybd7v/6/

PRIVATE MEMBERS
 Private members are made by the constructor. Ordinary vars and
parameters of the constructor becomes the private members.
 They are attached to the object, but they are not accessible to the
outside, nor are they accessible to the object's own public methods. They
are accessible to private methods. Private methods are inner functions of
the constructor.

PRIVILEGED METHOD
 A privileged method is able to access the private
variables and methods, and is itself accessible to
the public methods and the outside. It is possible to
delete or replace a privileged method, but it is not
possible to alter it, or to force it to give up its
secrets.
 Privileged methods are assigned with this within the
constructor.
 http://jsfiddle.net/usmantufail/Ybd7v/7/

PROTOTYPE-BASED PROGRAMMING
 Prototype-based programming is a style of object-
oriented programming in which classes are not
present, and behavior reuse (known as inheritance
in class-based languages) is accomplished through
a process of decorating existing objects which
serve as prototypes. This model is also known as
class-less, prototype-oriented, or instance-based
programming.

IN THE EXAMPLE BELOW WE DEFINE AND USE THE
METHOD SAYHELLO() FOR THE PERSON CLASS.
http://jsfiddle.net/usmantufail/9ufnw/

WHAT IS NAMESPACING?
 In many programming languages, namespacing is a technique
employed to avoid collisions with other objects or variables in
the global namespace. They're also extremely useful for
helping organize blocks of functionality in your application into
easily manageable groups that can be uniquely identified.
http://jsfiddle.net/usmantufail/BDRM4/

INNER FUNCTIONS
 JavaScript function declarations are allowed inside
other functions. An important detail of nested
functions in JavaScript is that they can access
variables in their parent function's scope:
 http://jsfiddle.net/usmantufail/GFQha/2/

CLOSURES
 A closure is a function defined within another scope
that has access to all the variables within the outer
scope
 Closures are a strange concept to get to grips with,
but once this core concept is understood they’re
relatively easy to understand: a closure is created
when a developer accesses variables outside of the
immediate lexical scope.
http://jsfiddle.net/usmantufail/95PTq/1/
http://jsfiddle.net/usmantufail/95PTq/3/

MEMORY LEAKS
 An unfortunate side effect of closures is that they make it trivially easy to leak
memory in Internet Explorer. JavaScript is a garbage collected language — objects
are allocated memory upon their creation and that memory is reclaimed by the
browser when no references to an object remain. Objects provided by the host
environment are handled by that environment.
 A memory leak in IE occurs any time a circular reference is formed between a
JavaScript object and a native object. Consider the following:
The circular reference formed above creates a memory leak; IE will not
free the memory used by el and o until the browser is completely
restarted.

MODULE PATTERN
 http://jsfiddle.net/usmantufail/Emqt2/

GETTER SETTERS
 var person = {
 firstName: 'Jimmy',
 lastName: 'Smith',
 get fullName() {
 return this.firstName + ' ' + this.lastName;
 },
 set fullName (name) {
 var words = name.toString().split(' ');
 this.firstName = words[0] || '';
 this.lastName = words[1] || '';
 }
 }
 person.fullName = 'Jack Franklin';
 alert(person.firstName); // Jack
 alert(person.lastName) // Franklin
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
 http://javascript.info/tutorial/event-delegation
 http://code.tutsplus.com/tutorials/quick-tip-javascript-event-delegation-in-4-minutes--net-8961

THREE WAYS OF DEFINING AND
INSTANTIATING AN OBJECT.

JavaScript OOPS Implimentation

I nheritance using Closures and Prototypes

http://jsfiddle.net/usmantufail/J52uK/

INHERITANCE USING PROTOTYPING
http://jsfiddle.net/usmantufail/Ej55F/

JavaScript OOPS Implimentation

Recommended

More Related Content

What's hot (20)

Similar to JavaScript OOPS Implimentation (20)

Recently uploaded (20)

JavaScript OOPS Implimentation