Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Object Oriented Programing
in
Akshay Mathur
Akshay Mathur
• Founding Team Member of
– ShopSocially (Enabling “social” for retailers)
– AirTight Neworks (Global leader...
JS Objects
Objects
• Everything in JS is an object (instance)
“string”.length // 6
“str”.length.toFixed(2) // “3.00”
[„hell‟, „o!‟].j...
Custom Objects
• JavaScript Object has a key and a value
• Key is always string
• Value can be of any type
– Including ano...
Object as Namespace
• It is a good practice to group variables and
functions together in an object rather than
keeping the...
Object as Named Argument
• Objects can be passed to a function as an argument
• They proxy for named arguments
Say_hello =...
@akshaymathu 8
JS Functions
Function
• Code block that executes on ‘call’
//define the function
function say_hello(name){
alert(„Hello! „ + name);
}
/...
Function Arguments
• Any number of arguments can be passed without
declaring
• Named arguments are not supported
say_hello...
Naming a Function
function my_func(){}
• A function may not have a name
function(){};
my_func = function(){};
@akshaymathu...
Variable Scope
• By default all variables are global
• Variables defined with ‘var’ keyword are local to
the function
• It...
Return Values
• Anything can be returned from a function
using return statement
function sqr(x){
var sq = x * x;
return sq...
Other Facts
• A function can be assigned to a variable
• A function can be defined within another function
• A function ca...
16@akshaymathu
JavaScript Classes
Class
• Class is a reserved keyword in JS
– But not implemented
– Same effect is achieved via prototype
• CofeeScript allo...
Using Functions as Objects
• Functions are actually First Class objects
So we can change
User= {}
User.name = „Akshay‟
Use...
Creating Instances
• Now the object instance can be created using
new keyword
user1 = new User; user1.name
//Akshay user1....
Object Constructor
• The main object function can take arguments for
initializing properties
User = function(name){
this.n...
Extending a Class
• More functions and properties can be defined
extending the prototype of the class
User.prototype.setGe...
Further Reading
• Introduction to Object-Oriented JavaScript on
Mozilla Developer Network
https://developer.mozilla.org/en...
Thanks
@akshaymathu 24@akshaymathu
http://www.quora.com/Akshay-Mathur
Upcoming SlideShare
Loading in …5
×

Object Oriented Programing in JavaScript

3,109 views

Published on

Simple Introduction to Object Oriented Programing in JavaScript.

Published in: Technology

Object Oriented Programing in JavaScript

  1. 1. Object Oriented Programing in Akshay Mathur
  2. 2. Akshay Mathur • Founding Team Member of – ShopSocially (Enabling “social” for retailers) – AirTight Neworks (Global leader of WIPS) • 15+ years in IT industry – Currently Principal Architect at ShopSocially – Mostly worked with Startups • From Conceptualization to Stabilization • At different functions i.e. development, testing, release • With multiple technologies @akshaymathu 2
  3. 3. JS Objects
  4. 4. Objects • Everything in JS is an object (instance) “string”.length // 6 “str”.length.toFixed(2) // “3.00” [„hell‟, „o!‟].join(„‟) // „hello!‟ • Custom objects can also be defined @akshaymathu 4
  5. 5. Custom Objects • JavaScript Object has a key and a value • Key is always string • Value can be of any type – Including another JSON object A = {key1: value1, key2: value2}; or A = new Object(); A[„key1‟] = value1; A.key2 = value2; @akshaymathu 5
  6. 6. Object as Namespace • It is a good practice to group variables and functions together in an object rather than keeping them global var user = {}; user.name = “Akshay”; user.greet = function(){ alert(„Hello!„.concat(user.name); }; @akshaymathu 6
  7. 7. Object as Named Argument • Objects can be passed to a function as an argument • They proxy for named arguments Say_hello = function (options){ if (typeof options === „Object‟){ options.msg = (options.msg)? options.msg : ‟Hello!‟; } alert(options.msg + „ „ + options.name); } Say_hello({name: „Akshay‟}); @akshaymathu 7
  8. 8. @akshaymathu 8
  9. 9. JS Functions
  10. 10. Function • Code block that executes on ‘call’ //define the function function say_hello(name){ alert(„Hello! „ + name); } //call the function say_hello(„Akshay‟); @akshaymathu 10
  11. 11. Function Arguments • Any number of arguments can be passed without declaring • Named arguments are not supported say_hello(1); // Hello! 1 say_hello(); // Hello! undefined say_hello(„Akshay‟, „Mathur‟); //Hello! Akshay @akshaymathu 11
  12. 12. Naming a Function function my_func(){} • A function may not have a name function(){}; my_func = function(){}; @akshaymathu 12
  13. 13. Variable Scope • By default all variables are global • Variables defined with ‘var’ keyword are local to the function • It is assumed that all variables are defined in the first line function(){ var my_var = „Hello‟; console.log(msg); var2 = 6; } @akshaymathu 13
  14. 14. Return Values • Anything can be returned from a function using return statement function sqr(x){ var sq = x * x; return sq; } var four_sq = sqr(4); @akshaymathu 14
  15. 15. Other Facts • A function can be assigned to a variable • A function can be defined within another function • A function can return a function function sqr(){ sq = function (x){ return x * x * x; }; return sq; } My_sqr = sqr(); // function My_sqr(3); // 27 @akshaymathu 15
  16. 16. 16@akshaymathu
  17. 17. JavaScript Classes
  18. 18. Class • Class is a reserved keyword in JS – But not implemented – Same effect is achieved via prototype • CofeeScript allows to write classes – Generates JS code using prototype @akshaymathu 18
  19. 19. Using Functions as Objects • Functions are actually First Class objects So we can change User= {} User.name = „Akshay‟ User.greet = function(){ alert(„Hello ‟ + User.name) } to User = function(){ this.name = „Akshay‟ this.greet = function(){ alert(„Hello ‟ + this.name) } } @akshaymathu 19
  20. 20. Creating Instances • Now the object instance can be created using new keyword user1 = new User; user1.name //Akshay user1.greet() //Hello Akshay @akshaymathu 20
  21. 21. Object Constructor • The main object function can take arguments for initializing properties User = function(name){ this.name = name; this.greet = function(){ alert(„Hello ‟ + this.name) } } user1 = new User(„Cerri‟); user1.greet() //Hello Cerri @akshaymathu 21
  22. 22. Extending a Class • More functions and properties can be defined extending the prototype of the class User.prototype.setGender = function(gender){ this.gender = gender; }; User.prototype.sayGender = function(){ alert(this.name + „ is ‟ + this.gender); }; @akshaymathu 22
  23. 23. Further Reading • Introduction to Object-Oriented JavaScript on Mozilla Developer Network https://developer.mozilla.org/en- US/docs/Web/JavaScript/Introduction_to_Object- Oriented_JavaScript
  24. 24. Thanks @akshaymathu 24@akshaymathu http://www.quora.com/Akshay-Mathur

×