JS OO and Closures

556 views
440 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
556
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JS OO and Closures

  1. 1. JS  AND  OO  
  2. 2. About  Objects   •  Everything  (except  basic  types)  are  objects   – Including  func=ons  and  arrays   •  Object  contains  proper=es  and  methods   – Collec=on  of  name-­‐value  pairs   – Names  are  strings,  values  can  be  anything   – Proper=es  and  methods  can  be  added  at  run=me   •  Objects  can  inherit  other  objects  
  3. 3. Object  Literal   var mystring = “hello!”; var myarray = [“element1”, “element2”]; var circle1 = {radius: 9, getArea : someFunction }; var circle2 = { radius: 9, getRadius: function() { return this.radius; } }
  4. 4. No  Classes!   •  One  of  the  simplest  way  to  create  object   – var obj = new Object(); – obj.x = 10; – obj.y = 12; – obj.method = function() { … } •  This  adds  dynamically  two  proper=es  to  the   obj  –  object!   •  Object  is  built  –  in  data  type  
  5. 5. “Class”   •  To  define  a  class,  define  a  func=on   function Foo() { this.x = 1; this.y = 1; } •  var obj = new Foo(); •  Internally  a  Object  is  created  
  6. 6. Example   function Circle(radius) { this.radius = radius; this.getArea = function() { return (this.radius * this.radius) * Math.PI; }; } var myobj = new Circle(5); document.write(myobj.getArea());
  7. 7. About  Namespaces   •  Avoid  pollu=ng  global  scope   – Use  namespaces!   – Helps  avoid  clashes  between  your  code  and  third-­‐ party  libraries   •  Namespaces  don’t  have  dedicated  syntax   built  into  the  language   •  It’s  possible  to  get  same  benefits  by  crea=ng   single  global  object  and  add  all  other  objects   and  func=ons  to  this  object  
  8. 8. Example  about  Namespaces   "use strict"; // If first operand is truthy, then the result is // first operand, else the result is second operand // By convention namespaces are written in capitals var MYSPACE = MYSPACE || {}; MYSPACE.Dog = function (name) { this.name = name; this.getName = function () { return name; }; }; var spot = new MYSPACE.Dog("Spot"); print(spot.getName());
  9. 9. Arrays   •  Arrays  in  JS  are  dynamic,  content  can  be   added  and  removed   •  Arrays  are  also  objects  (Array  “class”  inherit   Object)   – concat(),  join(),  pop(),  push(),  slice(),  sort(),  splice()  
  10. 10. Example   "use strict"; var array1 = []; // or new Array() var array2 = ['a', 'b', 'c']; print(array2.length); delete array2[1]; for(var i = 0; i<array2.length; i++) { print(array2[i]); }
  11. 11. Func=ons   •  Every  func=on  in  JS  is  Func=on  object   –  Can  be  passed  as  arguments   –  Can  store  name  /  value  pairs   –  Can  be  anonymous  or  named   •  Usage  (Don’t  use  this,  it’s  not  efficient)   –  var myfunction = new Function("a","b", "return a+b;"); –  print(myfunction(3,3)); •  Only  func=ons  have  scope,  regular  {blocks)  don’t   •  Inner  func=on  can  have  access  to  outer  func=on’s   proper=es  and  parameters  
  12. 12. Func=on  Arguments   •  The  arguments  object  is  a  local  object   available  within  all  func=ons   •  Each  func=on  has  access  to  special  parameter   called  arguments   – Contains  the  funcAon  arguments   •  It’s  an  array  like  object  (but  not  an  array)   – Only  arguments.length  available  
  13. 13. Example   "use strict"; function myConcat(separator) { var result = ""; // iterate through non-separator arguments for (var i = 1; i < arguments.length; i++) { result += arguments[i] + separator; } return result; } // returns "red, orange, blue, " print(myConcat(", ", "red", "orange", "blue")); // returns "elephant; giraffe; lion; cheetah; " print(myConcat("; ", "elephant", "giraffe", "lion", "cheetah")); // returns "sage. basil. oregano. pepper. parsley. " print(myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley"));
  14. 14. Func=onal  Scoping   "use strict"; function init() { // local variable name var name = "Hello World"; // inner function function displayName() { // uses outer functions variable print(name); } displayName(); } init();
  15. 15. Returning  a  Inner  Func=on   "use strict"; function makeFunc() { var name = "Hello World"; function displayName() { print(name); } // When returning a inner function, it’s a closure! // Local variables are added to the closure as a reference return displayName; } // Is “Hello World” printed? var myFunc = makeFunc(); myFunc();
  16. 16. About  Closures   •  myFunc  is  a  closure   •  Special  kind  of  object  that  combines   – A  func=on   – Environment  in  which  func=on  was  created   •  Environment  consists  of  any  local  variables  that  were   in-­‐scope  at  the  =me  closure  was  created   •  myFunc  is  a  closure  that  has  displayName  and  name  
  17. 17. Private  methods  with  Closures   "use strict"; function getPerson(name) { var privateMember = "hello world!", obj; obj = { shout: function () { print(name + " shouts " + privateMember); }, say: function () { print(name + " say " + privateMember); } }; return obj; }; var person = getPerson("Jack"); // Does not work! print(person.privateMember); person.shout(); person.say();
  18. 18. Private  methods  with  Closures   "use strict"; var person = (function(name) { var privateMember = "hello world!", obj; obj = { setName: function(myName) { name = myName; }, shout: function () { print(name + " shouts " + privateMember); }, say: function () { print(name + " say " + privateMember); } }; return obj; })(""); person.setName("Jack"); person.shout(); person.say();
  19. 19. this   function foo() { // adds prop to global object this.prop = 12; } var obj = { method: function() { // goes to obj this.prop = 12; } }; obj.method(); function Dog(name) { // Refers to object being created! this.name = name; this.sayHello = function() { print(this.name + " says hello!"); }; } var dog = new Dog("Spot"); dog.sayHello();

×