Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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
Próxima SlideShare
Cargando en…5
×

Object Oriented Programing in JavaScript

3.057 visualizaciones

Publicado el

Simple Introduction to Object Oriented Programing in JavaScript.

Publicado en: Tecnología

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

×