SlideShare uma empresa Scribd logo
1 de 105
Baixar para ler offline
Chhorn Chamnap
May 2009
Agenda

 Introduction to JavaScript
 Working with Objects
 Working with Functions
 Working with Closures
 Details of the Object Model
    Public Members
    Private Members
    Privileged Members
    Static Members
    Inheritance
 Practical Closures

                                2
Introduction to JavaScript




                             3
Introduction to JavaScript

 JavaScript has a reasonable claim to being the
  world’s most misunderstood programming
  language.
 JavaScript is a scripting language most often used
  for client-side web development.
 Major implementations are
  SpiderMonkey, Rhino, KJS, JavaScriptCore, and V8.
 It is a dynamic, weakly typed, prototype-based
  language with first-class functions.

                                                       4
Dynamic Language

 A high level of programming languages that
  execute many common behaviors at runtime. These
  behaviors could include:
     Extension of the program,
     By adding new code,
     By extending objects and definitions,
     Or by modifying the type system.
 Dynamic languages and dynamic typing are not
  identical concepts, and a dynamic language need
  not be dynamically typed, though many dynamic
  languages are dynamically typed.

                                                    5
A Loosely Typed Language

 In JavaScript, you do not declare a type when defining a
    variable. However, this does not mean that variables are not
    typed. Depending on what data it contains, a variable can
    have one of several types.
   A variable can change its type, depending on what value is
    assigned to it. The primitive datatypes can also be cast from
    one type to another.
   There are three primitive types: booleans, numbers, and
    strings.
   There are functions, which contain executable code. There
    are objects, which are composite datatypes.
   Lastly, there are the null and undefined datatypes. Primitive
    datatypes are passed by value, while all other datatypes are
    passed by reference.

                                                                    6
Prototyped-based Programming

 A style of object-oriented programming in which
  classes are not present, and behavior reuse (known
  as inheritance in class-based languages) is
  performed via a process of cloning existing objects
  that serve as prototypes. This model can also be
  known as class-less, prototype-oriented or instance-
  based programming.
 In prototype-based systems there are two methods
  of constructing new objects, through cloning of an
  existing object, and through ex nihilo (quot;from
  nothingquot;) object creation.

                                                         7
Language Features
   Structured
    JavaScript supports all the structured programming syntax in C (e.g., if
    statements, while loops, switch statements, etc.). One partial exception is
    scoping: C-style block-level scoping is not supported. JavaScript
    1.7, however, supports block-level scoping with the let keyword. Like
    C, JavaScript makes a distinction between expressions and statements.
   Dynamic
    dynamic typing
          Types are associated with values, not variables.
          JavaScript supports duck typing.
    objects as associative arrays
          JavaScript is heavily object-based. Objects are associative arrays. Properties
    and their values can be added, changed, or deleted at run-time.
    run-time evaluation
      JavaScript includes an eval function that can execute statements provided as
    strings at run-time.




                                                                                           8
Language Features (cont.)
   Functional
    first-class functions
          Functions are first-class; they are objects themselves. As such, they have
    properties and can be passed around and interacted with like any other objects.
          first-class functions treats functions as first-class objects. Specifically, this
    means that the language supports constructing new functions during the
    execution of a program, storing them in data structures, passing them as
    arguments to other functions, and returning them as the values of other
    functions.
    inner functions and closures
          Inner functions (functions defined within other functions) are created each
    time the outer function is invoked, and variables of the outer functions for that
    invocation continue to exist as long as the inner functions still exist, even after
    that invocation is finished (e.g. if the inner function was returned, it still has
    access to the outer function's variables) — this is the mechanism behind closures
    within JavaScript.




                                                                                              9
Language Features (cont.)
   Prototype-based
    prototypes
          JavaScript uses prototypes instead of classes for defining object
    properties, including methods, and inheritance. It is possible to simulate many
    class-based features with prototypes in JavaScript.
    functions as object constructors
          Functions double as object constructors along with their typical role.
    Prefixing a function call with new creates a new object and calls that function
    with its local this keyword bound to that object for that invocation. The function's
    prototype property determines the new object's prototype.
    functions as methods
          Unlike many object-oriented languages, there is no distinction between a
    function definition and a method definition. Rather, the distinction occurs during
    function calling; a function can be called as a method. When a function is invoked
    as a method of an object, the function's local this keyword is bound to that object
    for that invocation.




                                                                                           10
Language Features (cont.)
   Others
    run-time environment
          JavaScript typically relies on a run-time environment (e.g. in a web browser)
    to provide objects and methods by which scripts can interact with quot;the outside
    worldquot;. (This is not a language feature, but it is common in most JavaScript
    implementations.)
    variadic functions
          An indefinite number of parameters can be passed to a function. The
    function can both access them through formal parameters and the local
    arguments object.
    array and object literals
          Like many scripting languages, arrays and objects (associative arrays in
    other languages) can be created with a succinct shortcut syntax. The object literal
    in particular is the basis of the JSON data format.
    regular expressions
          JavaScript also supports regular expressions in a manner similar to Perl.




                                                                                          11
Working with Objects




                       12
Objects

 JavaScript is fundamentally about objects. Array
  are objects. Functions are objects. Objects are
  objects.
 What are objects?
 Objects are collections of name-value pairs. The
  names are strings, and the values are
  string, numbers, booleans, and objects.



                                                     13
Objects and Properties

 You define a property of an object by assigning it a value.
  myCar.make = “Ford”;
 JavaScript objects are sometimes called associative arrays,
  since each property is associated with a string value that can
  be used to access it.
 Properties of JavaScript objects can be accessed or set using
  a dot notation or bracket notation.
   myCar.make = “Ford”;
or myCar[“make”] = “Ford”;
or var propertyName = “make”;
   myCar[propertyName] = “Ford”;



                                                                   14
Objects and Properties (cont.)

 You can use the bracket notation with for…in to iterate
  over all the properties of an object.
  function showProperties(obj, objName) {
      var result = “”;
      for(var i in obj)
        result += objName + “.” + i + “ = “ + obj[i] + “n”;
      return result;
  }


  myCar.make = Ford
  myCar.model = Mustang
  myCar.year = 1969




                                                               15
Creating New Objects

    You can create an object using an object
     initializer.
     var obj = { property_1: value_1,
                 property_2: value_2,
                 property_n: value_n };

    Alternatively, you can create an object with
     these two steps:
       Define the object type by writing a constructor
    1.
       function.
    2. Create an instance of the object with new.



                                                         16
Creating New Objects (cont.)

  function Car(make, model, year) {
     this.make = make;
     this.model = model;
     this.year = year;
  }
 Now, you can create an object called myCar as follows:
  myCar = new Car(“Eagle”, “Talon TSi”, 1993);
 You can create any number of car objects by calls to new.
 An object can have a property that is itself another object.




                                                                 17
Indexing Object Properties

 In JavaScript 1.1 or later,
 if you initially define a property by its name, you
  must always refer to it by its name,
  myCar.color = “red”;

 and if you initially define a property by an
  index, you must always refer to it by its index.
  myCar[5] = “25 mpg”;




                                                        18
Define Properties for an Object Type

 You can add a property defined object by using
  the prototype property.
  Car.prototype.color = “red”;
  car1.color = “blue”;

 This defines a property that is shared by all
  objects of the specified type, rather than by just
  one instance of the object.




                                                       19
Define Methods

 A method is a function associated with an
  object. You define a method by:
  object.methodname = function_name;

 You can then call the method in the context of
  the object as follows:
  object.methodname(params);




                                                   20
Define Methods (cont.)
 function displayCar() {
    return “A beautiful ” + this.year + “ ” + this.make +
  “ ” + this.model;
 }
 function Car(make, model, year, owner) {
   this.make = make;
    this.model = model;
    this.year = year;
    this.owner = owner;
    this.displayCar = displayCar;
 }

 car1.displayCar();
 car2.displayCar();




                                                            21
Deleting Properties

 You can remove a property by using the delete operator.
   //create a new object with two properties: a and b.
   myObj = new Object();
   myObj.a = 5;
   myObj.b = 12;

   delete myObj.a; //remove the a property




                                                            22
Working with Functions




                         23
Function Object

 A JavaScript function can take 0 or more named
  parameters.
 The function body can declare its own variables
  which are local to that function.
 If no return statement is used, JavaScript returns
  undefined.
  function add(x, y) {
     var total = x + y;
     return total;
  }



                                                       24
Functions As First-Class Objects

 In JavaScript, functions are first-class objects. They can be
  stored in variables, passed into other functions as
  arguments, passed out of functions as return values, and
  constructed at run-time.
 You can create anonymous functions, which are functions
  created using the function() { ... } syntax. They are not given
  names, but they can be assigned to variables.
 JavaScript has function-level scope.
 JavaScript is also lexically scoped, which means that
  functions run in the scope they are defined in, not the scope
  they are executed in.



                                                                    25
Function Arguments

 JavaScript functions can be invoked with any
  number of arguments, regardless of the number of
  arguments named in the function definition.
 You can call a function without passing the
  parameters it expects, in which case they will be set
  to underfined.
  add(); //NaN
 You can also pass in more arguments than the
  function is expecting:
  add(2, 3, 4); //5


                                                          26
The arguments object

 Functions have access to an additional variable
  inside their body called arguments, which is an
  array-like object holding all of the values passed to
  the function.
  function add() {
     var sum = 0;
     for(var i=0; i<arguments.length; i++) {
           sum += arguments[i];
     }
     return sum;
  }

  add(2, 3, 4, 5); //14


                                                          27
The arguments object (cont.)

 The arguments object defines a callee property
  that refers to the function that is currently being
  executed. This property is rarely useful, but it can be
  used to allow unnamed functions to invoke
  themselves recursively.
  function(x) {
      if (x <= 1) return 1;
      return x * arguments.callee(x-1);
  }




                                                            28
Functions as Data

 In JavaScript, however, functions are also data, which means
  that they can be assigned to variables, stored in the
  properties of objects or the elements of arrays, passed as
  arguments to functions, and so on.

  function square(x) { return x*x; }

  var a = square(4); // a contains the number 16
  var b = square;    // Now b refers to square
  var c = b(5);       // c contains the number 25

  var o = new Object();
  o.square = function(x) { return x*x; }
  y = o.square(16); // y equals 256



                                                                 29
Constructor Functions

 A constructor function is a function that
  initializes the properties of an object and is
  intended for use with the new operator.

 function Car(make, model, year, owner) {
    this.make = make;
    this.model = model;
    this.year = year;
    this.owner = owner;
 }




                                                   30
Function Properties and Methods

 The length property of the arguments array specifies the
  number of arguments that were passed to the function.
 The length property of the Function object returns exactly
  how many declared parameters a function has.
 Note that unlike arguments.length, this length property is
  available both inside and outside of the function body.
  function check(args) {
      var actual = args.length;
      var expected = args.callee.length;
      if (actual != expected) {
              throw new Error(quot;Wrong number of arguments:
  expected: quot; + expected + quot;; actually passed quot; + actual);
      }
  }


                                                               31
DefiningYour Own Function Properties

 When a function needs to use a variable whose
  value persists across invocations, it is often
  convenient to use a property of the Function
  object, instead of cluttering up the namespace by
  defining a global variable.

  function counter() {
      if (!arguments.callee.count) {
           arguments.callee.count = 0;
      }
      return arguments.callee.count++;
  }


                                                      32
The apply() and call() Methods

 These methods allow you to invoke a function as if it
  were a method of some other object.
 The first argument to both call() and apply() is
  the object on which the function is to be invoked;
  this argument becomes the value of the this
  keyword within the body of the function.
 Any remaining arguments to call() are the values
  that are passed to the function that is invoked.



                                                          33
The apply() and call() Methods

  f.call(o, 1, 2);

 This is similar to the following lines of code:
  o.m = f;
  o.m(1,2);
  delete o.m;
 The apply() method is like the call()
  method, except that the arguments to be passed to
  the function are specified as an array:
  f.apply(o, [1, 2]);




                                                      34
Anonymous Functions

 An anonymous function, executed immediately.
   (function() {
      var foo = 10;
      var bar = 2;
      alert(foo * bar);
   })();
 An anonymous function with arguments.
   (function(foo, bar) {
     alert(foo * bar);
   })(10, 2);
 An anonymous function that returns a value.
   var baz = (function(foo, bar) {
         return foo * bar;
   })(10, 2);


                                                 35
Anonymous Functions (cont.)

 Here’s a way of “hiding” some local variables – like
  block scope in C:
> var a = 1;
> var b = 2;
> (function() {
      var b = 3;
      a += b;
})();
>a
4
>b
2




                                                         36
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.
  function betterExampleNeeded() {
     var a = 1;
     function oneMoreThanA() {
          return a + 1;
     }
     return oneMoreThanA();
  }

                                                          37
Working with Closures




                        38
Working with Closures

 Closures are often considered an advanced feature in JavaScript, but
   understanding them is essential to mastering the language.
 JavaScript allows inner functions.
 And that those inner functions are allowed access to all of the local
   variables, parameters and declared inner functions within their outer
   function(s).
 A closure is formed when one of those inner functions is made accessible
   outside of the function in which it was contained, so that it may be
   executed after the outer function has returned.
 At which point it still has access to the local variables, parameters and
   inner function declarations of its outer function.




                                                                              39
Working with Closures (cont.)

 Consider the following function:
  function init() {
      var name = “Mozilla”;
      function displayName() {
          alert(name);
      }
      displayName();
  }
Working with Closures (cont.)
 This is an example of lexical scoping: in JavaScript, the
  scope of a variable is defined by its location within the
  source code, and nested functions have access to
  variables declared in their outer scope.
 Now consider the following example:
  function makeFunc() {
     var name = “Mozilla”;
     function displayName() {
          alert(name);
     }
     return displayName;
  }
  var myFunc = makeFunc();
  myFunc();


                                                              41
Working with Closures (cont.)

 The displayName() inner function was
  returned from the outer function before being
  executed.
 Normally, the local variables within a function
  only exist for the duration of that function’s
  execution. Once makeFunc() has finished
  executing, it is reasonable to expect that the
  name variable will no longer be necessary.
 Since the code still works as expected, this is
  obviously not the case.

                                                    42
Working with Closures (cont.)

 A closure is a special kind of object that combines
  two things: a function, and the environment in
  which that function was created.
 The environment consists of any local variables that
  were in-scope at the time that the closure was
  created.
 In this case, myFunc is a closure that incorporates
  both the displayName() and the “Mozilla” string
  that existed when the closure was created.



                                                         43
A More Interesting Example

 function makeAdder(x) {
    return function(y) {
       return x + y;
    }
 }

 var add5 = makeAdder(5);
 var add10 = makeAdder(10);

 console.log(add5(2)); //7
 console.log(add10(2)); //12




                               44
A More Interesting Example (cont.)

 We have defined a function makeAdder(x) which takes a
  single argument x and returns a new function. The function
  it returns takes a single argument y, and returns the sum of
  x and y.
 In essence, makeAdder is a function factory – it creates
  functions which can add a specific value to their argument.
• add5 and add10 are both closures. They share the same
  function body definition, but store different environments.
 In add5’s environment, x is 5. In add10’s environment, x is
  10.




                                                                 45
Details of the Object Model




                              46
Class-Based vs. Prototype-Based
Languages
Class-Based                     Prototype-Based
 Class and instance are         All objects are instances.
  distinct entities.
 Define a class with a class    Define and create a set of
  definition; instantiate a       objects with constructor
  class with constructor          functions.
  methods.
 Create a single object with
                                 Same.
  new operator.
Class-Based vs. Prototype-Based
Languages (cont.)
                                    Construct an object
 Construct an object
                                     hierarchy by assigning an
  hierarchy by using class
                                     object as the prototype
  definitions to define
                                     associated with a
  subclasses of existing
                                     constructor function.
  classes.
                                    Inherit properties by
 Inherit properties by              following the prototype
                                     chain.
  following the class chain.
                                    Constructor function or
 Class definition specifies all
                                     prototype specifies an
  properties of all instances
                                     initial set of properties. Can
  of a class. Cannot add
                                     add or remove properties
  properties dynamically at          dynamically to individual
  run time.                          objects or to the entire set
                                     of objects.
Class-Based vs. Prototype-Based
Languages (cont.)
            Java           JavaScript
Strongly-typed      Loosely-typed
Static              Dynamic
Classical           Prototypical
Classes             Functions
Constructors        Functions
Methods             Functions

                                        49
Public Members

 All of the class’s attributes and methods are
  public and accessible. The public attributes are
  created using the this keyword.
 There are two main ways of putting members in
  a new object:
   In the constructor
   In the prototype




                                                     50
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.
   function Container(param) {
      this.member = param;
   }
 So, if we construct a new object
  var myContainer = new Container(„abc‟);
 then
  myContainer.member contains „abc‟.




                                                                 51
In the prototype

 This technique is usually used to add public
  methods.
 To add a method to all objects made by a
  constructor, add a function to the constructor’s
  prototype:
  Container.prototype.stamp = function(string) {
     return this.member + string;
  }

  myContainer.stamp(„def‟);   //‟abcdef‟



                                                     52
Private Members Using a Naming
Convention
 An underscore is added to the beginning of each
  member, signifying that it is intended to be
  private.
 Using an underscore is a well-known naming
  convention; it says that the attribute (or
  method) is used internally, and that accessing it
  or setting it directly may have unintended
  consequences.


                                                      53
Private Members Through Closures

 Private members are made by the constructor.
  Ordinary vars and parameters of the
  constructor becomes the private members.
 By convention, we make a private that
  parameter. This is used to make the object
  available to the private methods.
 Private methods cannot be called by public
  methods.



                                                 54
Private Members Through Closures (cont.)

 function Container(param) {
 this.member = param; // Public attribute.
 var secret = 3; // Private attribute.
 var that = this; // Private attribute.

     function dec() { // Private method.
     ...
     }
 }

 //Public method.
 Container.prototype.stamp = function() {
 ...
 };


                                             55
Privileged Members

 A privileged method is able to access the private
  variables and methods, and is itself accessible to
  public methods and the outside.




                                                       56
Privileged Members
 function Container(param) {
  this.member = param; // Public attribute.
  var secret = 3; // Private attribute.
  var that = this; // Private attribute.

     function dec() { // Private method.
       if(secret > 0) {
          secret -= 1;
          return true;
       } else {
          return false;
       }
     }

     this.service = function() { //Privileged method.
      if(dec()) {
        return that.member;
      } else {
        return null;
      }
     };
 }
                                                        57
Static Members

 Static members operate on the class-level instead
  of the instance-level; there is only one copy of each
  static member.
 These private static members can be accessed from
  within the constructor, which means that any
  private or privileged function has access to them.
 Since they are declared outside of the
  constructor, they do not have access to any of the
  private attributes, and as such, are not privileged;
  private methods can call private static methods, but
  not the other way around.


                                                          58
var Book = (function() {
     var numOfBooks = 0; // Private static attributes.
     function checkIsbn(isbn) { // Private static method.
     ...
     }
     // Return the constructor.
     return function(newIsbn, newTitle, newAuthor) {
          var isbn; // Private attributes.
          this.getIsbn = function() { // Privileged methods.
             return isbn;
          };
          this.setIsbn = function(newIsbn) {
             if(!checkIsbn(newIsbn)) throw new Error('Book: Invalid ISBN.');
             isbn = newIsbn;
          };

          numOfBooks++; // Keep track of how many Books have been created
          this.setIsbn(newIsbn);
     }
})();
Book.convertToTitleCase = function(inputString) { // Public static method.
...
};
Book.prototype = { // Public, non-privileged methods.
      display: function() {
      ...
      }
};

                                                                               59
A Short Summary

 Private and Privileged members can only be made
  when an object is constructed.
 Public members can be added at any time.
 Having too many privileged methods can cause
  memory problems because new copies of all
  privileged methods are created for each instance.
 In the public members pattern, all methods are
  created off of the prototype, which means there is
  only one copy of each in memory, no matter how
  many instances you create.



                                                       60
Inheritance:
The Employee Example




                       61
Very Simple Implementation




                             62
Object Hierarchy




                   63
How does it work?

Suppose you create the mark object:
   var mark = new WorkerBee();
 When JavaScript sees the new operator, it creates
   a new generic object and passes this new object as
   the value of the this keyword to the WorkerBee
   constructor function.
 Then sets the value of WorkerBee.prototype
   to an object of Employee to setup prototype chain.



                                                        64
Local versus Inherited Values

    When you access an object property, JavaScript
     performs these steps:
         Check to see if the value exists locally. If it does, return
    1.
         that value.
         If there is not a local value, check the prototype chain.
    2.
         If an object in the prototype chain has a value for the
    3.
         specified property, return that value.
         If no such property is found, the object does not have
    4.
         the property.



                                                                        65
Does it work?

 Suppose you create amy instance.
  var amy = new WorkerBee();
  amy.name = “”;
  amy.dept = “general”;
  amy.projects = [];

 Now, suppose you change the value of the name
  property in the prototype associated with
  Employee.
  Employee.prototype.name = “Unknown”;




                                                  66
Does it work? (cont.)

 If you want to have default values for object properties and you want to
   be able to change the default values at run time, you should set the
   properties in the constructor’s prototype, not in the constructor function
   itself.
   function Employee() {
       this.dept = “general”;
   }
   Employee.prototype.name = “”;
   function WorkerBee() {
       this.projects = [];
   }
   WorkerBee.prototype = new Employee();

   amy = new WorkerBee();

   Employee.prototype.name = “Unknown”;



                                                                                67
Adding Properties

 In JavaScript, you can add properties to any
  object at run time.
 To add a property that is specific to a single
  object, you assign a value to the object.
  mark.bonus = 3000;

 Now, the mark object has a bonus property, but
  no other WorkerBee has this property.




                                                   68
Adding Properties (cont.)

 If you add a new property to an object that is
  being used as the prototype for a constructor
  function, you add that property to all objects
  that inherit properties from the prototype.
  Employee.prototype.specialty = “none”;




                                                   69
Adding Properties (cont.)




                            70
More Flexible Constructors




                             71
More Flexible Constructors




                             72
A Cleaner Approach

 Another way of inheriting is by using
  the .call/.apply methods. Below are
  equivalent:



 Using the javascript .call method makes a
  cleaner implementation because the quot;.basequot;
  is not needed anymore.
Don’t suppose it will work

 Just because you have called the WorkerBee
  constructor from inside the Engineering
  constructor, you have set up inheritance
  appropriately for Engineer object. This is not the
  case.
 Calling the WorkerBee constructor ensures that
  an Engineer object starts out with the properties
  specified in all constructor functions that are called.
 If you later add properties to the Employee or
  WorkerBee prototypes, those properties are not
  inherited by the Engineer object.


                                                            74
Don’t suppose it will work (cont.)

 function Enginner(name, projs, mach) {
   WorkerBee.call(this, name, “engineering”, projs);
   this.match = mach || “”;
 }
 var jane = new Engineer(“Doe, Jane”, [“navigator”,
  “javascript”], “belau”);
 Employee.prototype.specialty = “none”;
 The jane object does not inherit the specialty
  property. You still need to explicitly set up the
  prototype to ensure dynamic inheritance.




                                                       75
No Multiple Inheritance

 JavaScript does not support multiple
  inheritance.
 Because an object has a single associated
  prototype, JavaScript cannot dynamically inherit
  from more than one prototype chain.
 In JavaScript, you can have a constructor
  function call more than one other constructor
  function within it.



                                                     76
No Multiple Inheritance (cont.)

function Hobbyist(hobby) {
  this.hobby = hobby || “scuba”;
}

function Engineer(name, projs, mach, hobby) {
  WorkerBee.call(this, name, “engineering”, projs);
  Hobbyist.call(this, hobby);
  this.machine = mach || “”;
}
Engineer.prototype = new WorkerBee();

dennis = new Engineer(“Doe Dennis”, [“collabra”], “hugo”);



                                                             77
No Multiple Inheritance (cont.)

 Assume, you then add a property to the Hobbyist
  constructor’s prototype.
  Hobbyist.prototype.equipment = [“mask”, “fins”,
  “regulator”, “bcd”];
 The dennis object does not inherit this new property.




                                                          78
Patterns Summary

 Public
  function Constructor(…) {
      this.membername = value;
  }
  Constructor.prototype.membername = value;
 Private
  function Constructor(…) {
     var that = this;
     var membername = value;
     function membername(…) {…}
  }


                                              79
Patterns Summary (cont.)

 Privileged
  function Constructor(…) {
     this.membername = function(…) {…};
  }
 Inheritance
  var SuperClass = function(…) {
      this.superclassmember = value;
  };
  var SubClass = function(…) {
      SuperClass.call(this, params);
      this.subclassmember = value;
  };
  SubClass.prototype = new SuperClass();


                                           80
Practical Closures




                     81
Practical closures

 A closure lets you associate some data
  (environment) with a function that operates on
  that data.
 You can use a closure anywhere that you might
  normally use an object with only a single
  method.




                                                   82
Example 1: Factory Method

 Suppose, we wish to add to a page buttons that
  adjust the size of the page text.
  function size12() {
     document.body.style.fontSize = “12px”;
  }

  function size14() {
     document.body.style.fontSize = “14px”;
  }

  function size16() {
     document.body.style.fontSize = “16px”;
  }

                                                   83
Example 1: Factory Method (cont.)

 Now, one could imagine that you would want to
  generalize this notion of an “size function”, and you
  would not want to write dozens and dozens of size
  functions.
  function makeSizer(size) {
      return function() {
         document.body.style.fontSize = size + “px”;
      }
  }

  var size12 = makeSize(12);
  var size14 = makeSize(14);
  var size16 = makeSize(16);


                                                          84
Example 1: Factory Method (cont.)

• We can attach them to buttons as follows:




                                              85
Example 2: Emulating private methods
with closures
 The shared environment is created in the body
  of an anonymous function, which is executed as
  soon as it has been defined.
 The environment contains two private items: a
  variable called privateCounter and a function
  called changeBy.
 Neither of these private items can be accessed
  directly from outside the anonymous function.



                                                   86
var Counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
      privateCounter += val;
  }
  return {
     increment: function() {
        changeBy(1);
     },
     decrement: function() {
        changeBy(-1);
     },
     value: function() {
        return privateCounter;
     }
  }
})();

alert(Counter.value());   //0
Counter.increment();
Counter.increment();
alert(Counter.value());   //2
Counter.decrement();
alert(Counter.value());   //1


                                 87
Example 3: Emulating private static
methods with closures
 See slide 58 and 59.




                                      88
Example 4: Creating closures in loops




                                        89
Explanation

 The reason for this is the functions assigned to
  onfocus are closures; they consist of the function
  definition and the captured environment from the
  setupHelp function’s scope.
 Three closures have been created, but each one
  shares the same single environment.
 By the time the onfocus callbacks are executed, the
  loop has run its course and the item variable (shared
  by all three closures) has been left pointing to the
  last entry in the helpText list.


                                                          90
Typical Solution




                   91
Using Anonymous Functions to Induce
the Scope
// Iterate through each of the items
for ( var i = 0; i < helpText.length; i++ ) {
    // Use a self-executed anonymous function to induce scope
    (function(){
       // Remember the value within this scope
       var item = helpText[i];
       // Bind a function to the element
       document.getElementById(item).onfocus = function() {
            // item refers to a parent variable
            // scoped within the context of this for loop
            document.getElementById(„help‟).innerHTML = item.help;
       };
    })();
}
Example 5: setTimeout with Function
References
 A common use for a closure is to provide
  parameters for the execution of a function prior to
  the execution of that function.
 The problem is that the function that passes to
  setTimeout cannot provide parameters.
 However, code could call another function that
  returned a reference to an inner function
  object, with that inner function object being passed
  by reference to the setTimeout function. The
  parameters to be used for the execution of the inner
  function are passed with the call to the function that
  returns it.

                                                           93
Example 5: setTimeout with Function
References (cont.)
function callLater(paramA, paramB, paramC) {
   return function() {
       paramA[paramB] = paramC;
   }
};

var functRef = callLater(elStyle, “display”, “none”);
setTimeout(functRef, 500);




                                                        94
Example 6: Using Anonymous Functions to
Hide Variables from the Global Scope
// Create a new anonymous function, to use as a wrapper
(function(){
    // The variable that would, normally, be global
    var msg = quot;Thanks for visiting!quot;;
    // Binding a new function to a global object
    window.onunload = function(){
         // Which uses the 'hidden' variable
         alert( msg );
    };
// Close off the anonymous function and execute it
})();
Example 7: Associating Functions with
Object Instance Methods
 You want to associate different functions to each
  event handler.
 Don’t put associateObjWithEvent() inside the
  DhtmlObject constructor function. See
  Accidental Closures and Performance
  considerations for more details.




                                                      96
function associateObjWithEvent(obj, methodName){
     return function(e){
          e = e || window.event;
          return obj[methodName](e, this);
     };
}


function DhtmlObject(elementId){
     var el = getElementWithId(elementId);
     if(el){
          el.onclick = associateObjWithEvent(this, quot;doOnClickquot;);
          el.onmouseover = associateObjWithEvent(this, quot;doMouseOverquot;);
          el.onmouseout = associateObjWithEvent(this, quot;doMouseOutquot;);
     }
}


DhtmlObject.prototype.doOnClick = function(event, element){
     ... // doOnClick method body.
};
DhtmlObject.prototype.doMouseOver = function(event, element){
     ... // doMouseOver method body.
};
DhtmlObject.prototype.doMouseOut = function(event, element){
     ... // doMouseOut method body.
};
Example 8: Encapsulating Related
Functionality
 The array is going to act as a buffer for the output, but defining it
  locally to the function will result in its re-creation on each
  execution of the function.
 One approach might make the array a global variable so that it
  can be re-used without being re-created. But the effect is to
  render the code less manageable, as, if it is to be used elsewhere.
  It also makes the code less easy to integrate with other code
  because it pollutes the global namespace.
 A Closure allows the buffer array to be associated (and neatly
  packaged) with the function that is dependent upon it and
  simultaneously keep the property name to which the buffer array
  as assigned out of the global namespace and free of the risk of
  name conflicts and accidental interactions.



                                                                          98
var getImgInPositionedDivHtml = (function(){
    var buffAr = [
         '<div id=quot;', '', // index 1, DIV ID attribute
         'quot; style=quot;position:absolute;top:', '', // index 3, DIV top position
         'px;left:', '', // index 5, DIV left position
         'px;width:', '', // index 7, DIV width
         'px;height:','', // index 9, DIV height
         'px;overflow:hidden;quot;><img src=quot;', '', // index 11, IMG URL
         'quot; width=quot;', '', // index 13, IMG width
         'quot; height=quot;', '', // index 15, IMG height
         'quot; alt=quot;', '', // index 17, IMG alt text
         'quot;></div>'
    ];


    return function(url, id, width, height, top, left, altText){
         buffAr[1] = id; buffAr[3] = top;
         buffAr[5] = left;
         buffAr[13] = (buffAr[7] = width);
         buffAr[15] = (buffAr[9] = height);
         buffAr[11] = url; buffAr[17] = altText;


         return buffAr.join('');
    }; //:End of inner function expression.
})();
Example 8: Encapsulating Related
Functionality
 The array is going to act as a buffer for the output, but defining it
  locally to the function will result in its re-creation on each
  execution of the function.
 One approach might make the array a global variable so that it
  can be re-used without being re-created. But the effect is to
  render the code less manageable. It also makes the code less
  easy to integrate with other code because it pollutes the global
  namespace.
 A Closure allows the buffer array to be associated (and neatly
  packaged) with the function that is dependent upon it and
  simultaneously keep the property name to which the buffer array
  as assigned out of the global namespace and free of the risk of
  name conflicts and accidental interactions.



                                                                          100
Accidental Closures

 Rendering any inner function accessible
  outside of the body of the function in which it
  was created will form a closure.
 Accidentally creating closures can have
  harmful side effects as the following section
  on the IE memory leak problem describes.
 A common situation is where inner functions
  are used is as event handlers for DOM
  elements.
Accidental Closures (cont.)
var quantaty = 5;
function addGlobalQueryOnClick(linkRef){
     if(linkRef){
           linkRef.onclick = function(){
                 this.href += ('?quantaty='+escape(quantaty));
                 return true;
           };
     }
}
   Whenever the addGlobalQueryOnClick function is called a new inner function is
    created (and a closure formed by its assignment).
   From the efficiency point of view that would not be significant if the
    addGlobalQueryOnClick function was only called once or twice, but if the function
    was heavily employed many distinct function objects would be created (one for each
    evaluation of the inner function expression).
Accidental Closures (cont.)
 As the inner function in the first version is not being used to
  exploit the closures produced by its use, it would be more
  efficient not to use an inner function, and thus not repeat
  the process of creating many essentially identical function
  objects.

   var quantaty = 5;
   function addGlobalQueryOnClick(linkRef){
       if(linkRef){
           linkRef.onclick = forAddQueryOnClick;
       }
   }
   function forAddQueryOnClick(){
       this.href += ('?quantaty='+escape(quantaty));
       return true;
   }
References
 Pro JavaScript Design Patterns
 JavaScript Definitive Guide 5th edition
 Pro JavaScript Techniques
 https://developer.mozilla.org/en/A_re-introduction_to_JavaScript
 https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Details_of_th
    e_Object_Model
   https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with
    _Closures
   http://www.jibbering.com/faq/faq_notes/closures.html
   http://en.wikipedia.org/wiki/JavaScript
   http://blogs.msdn.com/ericlippert/archive/2003/09/17/53028.aspx
   http://msdn.microsoft.com/en-us/library/bb250448.aspx



                                                                              104
References (cont.)

 http://blog.j15r.com/2005/06/another-word-or-two-on-memory-leaks.html
 http://en.wikipedia.org/wiki/Closure_(computer_science)
 http://javascript.crockford.com/inheritance.html
 http://blog.j15r.com/2005/01/dhtml-leaks-like-sieve.html
 http://www.crockford.com/javascript/private.html
 http://www.quirksmode.org/blog/archives/2005/02/javascript_memo.html
 http://vinaytech.wordpress.com/2009/02/24/closuresandiecircular/
 http://www.ibm.com/developerworks/web/library/wa-memleak/
 http://support.microsoft.com/kb/830555
 http://vinaytech.wordpress.com/2009/02/24/closuresandiecircular/




                                                                          105

Mais conteúdo relacionado

Mais procurados

A Deeper look into Javascript Basics
A Deeper look into Javascript BasicsA Deeper look into Javascript Basics
A Deeper look into Javascript BasicsMindfire Solutions
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScriptRangana Sampath
 
JavaScript 101
JavaScript 101JavaScript 101
JavaScript 101ygv2000
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptWalid Ashraf
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced JavascriptDhruvin Shah
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScriptAndres Baravalle
 
javascript
javascript javascript
javascript Kaya Ota
 
JavaScript - Chapter 3 - Introduction
 JavaScript - Chapter 3 - Introduction JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 3 - IntroductionWebStackAcademy
 
Complete Notes on Angular 2 and TypeScript
Complete Notes on Angular 2 and TypeScriptComplete Notes on Angular 2 and TypeScript
Complete Notes on Angular 2 and TypeScriptEPAM Systems
 
Java script final presentation
Java script final presentationJava script final presentation
Java script final presentationAdhoura Academy
 
Introduction to JavaScript Programming
Introduction to JavaScript ProgrammingIntroduction to JavaScript Programming
Introduction to JavaScript ProgrammingRaveendra R
 
Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)
Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)
Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)raja kvk
 

Mais procurados (20)

Javascript
JavascriptJavascript
Javascript
 
Js ppt
Js pptJs ppt
Js ppt
 
Javascript functions
Javascript functionsJavascript functions
Javascript functions
 
Java script ppt
Java script pptJava script ppt
Java script ppt
 
A Deeper look into Javascript Basics
A Deeper look into Javascript BasicsA Deeper look into Javascript Basics
A Deeper look into Javascript Basics
 
Introduction to JavaScript Programming
Introduction to JavaScript ProgrammingIntroduction to JavaScript Programming
Introduction to JavaScript Programming
 
OOP in JavaScript
OOP in JavaScriptOOP in JavaScript
OOP in JavaScript
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
JavaScript 101
JavaScript 101JavaScript 101
JavaScript 101
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
WEB TECHNOLOGIES JavaScript
WEB TECHNOLOGIES JavaScriptWEB TECHNOLOGIES JavaScript
WEB TECHNOLOGIES JavaScript
 
javascript
javascript javascript
javascript
 
JavaScript - Chapter 3 - Introduction
 JavaScript - Chapter 3 - Introduction JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 3 - Introduction
 
Complete Notes on Angular 2 and TypeScript
Complete Notes on Angular 2 and TypeScriptComplete Notes on Angular 2 and TypeScript
Complete Notes on Angular 2 and TypeScript
 
Java script final presentation
Java script final presentationJava script final presentation
Java script final presentation
 
Introduction to JavaScript Programming
Introduction to JavaScript ProgrammingIntroduction to JavaScript Programming
Introduction to JavaScript Programming
 
Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)
Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)
Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)
 

Destaque

CSS Sanity with Sass: The Inverted Triangle Approach
CSS Sanity with Sass: The Inverted Triangle ApproachCSS Sanity with Sass: The Inverted Triangle Approach
CSS Sanity with Sass: The Inverted Triangle ApproachJulie Kuehl
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compassNick Cooley
 
Javascript Prototype Visualized
Javascript Prototype VisualizedJavascript Prototype Visualized
Javascript Prototype Visualized军 沈
 
Smart CSS theming with Sass and Compass
Smart CSS theming with Sass and CompassSmart CSS theming with Sass and Compass
Smart CSS theming with Sass and CompassMihaela
 
Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)Tahmina Khatoon
 
Advanced JavaScript Concepts
Advanced JavaScript ConceptsAdvanced JavaScript Concepts
Advanced JavaScript ConceptsNaresh Kumar
 
Object Oriented Programming in JavaScript
Object Oriented Programming in JavaScriptObject Oriented Programming in JavaScript
Object Oriented Programming in JavaScriptzand3rs
 
JavaScript Prototype and Module Pattern
JavaScript Prototype and Module PatternJavaScript Prototype and Module Pattern
JavaScript Prototype and Module PatternNarendra Sisodiya
 
Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Eric Sembrat
 
Sass and compass workshop
Sass and compass workshopSass and compass workshop
Sass and compass workshopShaho Toofani
 
Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sassKnoldus Inc.
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototypingMarcelo Graciolli
 
Prototype & Inheritance in JavaScript
Prototype & Inheritance in JavaScriptPrototype & Inheritance in JavaScript
Prototype & Inheritance in JavaScriptSunny Sharma
 
Prototype-based Programming with JavaScript
Prototype-based Programming with JavaScriptPrototype-based Programming with JavaScript
Prototype-based Programming with JavaScriptlienhard
 

Destaque (18)

CSS Sanity with Sass: The Inverted Triangle Approach
CSS Sanity with Sass: The Inverted Triangle ApproachCSS Sanity with Sass: The Inverted Triangle Approach
CSS Sanity with Sass: The Inverted Triangle Approach
 
Prototype
PrototypePrototype
Prototype
 
SASS - CSS with Superpower
SASS - CSS with SuperpowerSASS - CSS with Superpower
SASS - CSS with Superpower
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
 
Javascript Prototype Visualized
Javascript Prototype VisualizedJavascript Prototype Visualized
Javascript Prototype Visualized
 
Smart CSS theming with Sass and Compass
Smart CSS theming with Sass and CompassSmart CSS theming with Sass and Compass
Smart CSS theming with Sass and Compass
 
Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)
 
Advanced JavaScript Concepts
Advanced JavaScript ConceptsAdvanced JavaScript Concepts
Advanced JavaScript Concepts
 
Object Oriented Programming in JavaScript
Object Oriented Programming in JavaScriptObject Oriented Programming in JavaScript
Object Oriented Programming in JavaScript
 
JavaScript Prototype and Module Pattern
JavaScript Prototype and Module PatternJavaScript Prototype and Module Pattern
JavaScript Prototype and Module Pattern
 
Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Sass - Getting Started with Sass!
Sass - Getting Started with Sass!
 
Sass and compass workshop
Sass and compass workshopSass and compass workshop
Sass and compass workshop
 
Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sass
 
Sas demo
Sas demoSas demo
Sas demo
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototyping
 
Prototype & Inheritance in JavaScript
Prototype & Inheritance in JavaScriptPrototype & Inheritance in JavaScript
Prototype & Inheritance in JavaScript
 
Prototype-based Programming with JavaScript
Prototype-based Programming with JavaScriptPrototype-based Programming with JavaScript
Prototype-based Programming with JavaScript
 
Sass
SassSass
Sass
 

Semelhante a JavaScript in Object-Oriented Way

Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Sopheak Sem
 
Object oriented javascript
Object oriented javascriptObject oriented javascript
Object oriented javascriptUsman Mehmood
 
JavaScript OOPS Implimentation
JavaScript OOPS ImplimentationJavaScript OOPS Implimentation
JavaScript OOPS ImplimentationUsman Mehmood
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript ProgrammingSehwan Noh
 
Master in javascript
Master in javascriptMaster in javascript
Master in javascriptRobbin Zhao
 
Class notes(week 2) on basic concepts of oop-2
Class notes(week 2) on basic concepts of oop-2Class notes(week 2) on basic concepts of oop-2
Class notes(week 2) on basic concepts of oop-2Kuntal Bhowmick
 
Class notes(week 2) on basic concepts of oop-2
Class notes(week 2) on basic concepts of oop-2Class notes(week 2) on basic concepts of oop-2
Class notes(week 2) on basic concepts of oop-2Kuntal Bhowmick
 
AJS UNIT-1 2021-converted.pdf
AJS UNIT-1 2021-converted.pdfAJS UNIT-1 2021-converted.pdf
AJS UNIT-1 2021-converted.pdfSreeVani74
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to JavascriptAmit Tyagi
 
JavaScript Object Oriented Programming Cheat Sheet
JavaScript Object Oriented Programming Cheat SheetJavaScript Object Oriented Programming Cheat Sheet
JavaScript Object Oriented Programming Cheat SheetHDR1001
 
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPTHSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPTAAFREEN SHAIKH
 
Enabling White-Box Reuse in a Pure Composition Language
Enabling White-Box Reuse in a Pure Composition LanguageEnabling White-Box Reuse in a Pure Composition Language
Enabling White-Box Reuse in a Pure Composition Languageelliando dias
 
WEB MODULE 3.pdf
WEB MODULE 3.pdfWEB MODULE 3.pdf
WEB MODULE 3.pdfDeepika A B
 
JavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQueryJavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQueryJamshid Hashimi
 
Introduction to object oriented programming
Introduction to object oriented programmingIntroduction to object oriented programming
Introduction to object oriented programmingAbzetdin Adamov
 
Object oriented java script
Object oriented java scriptObject oriented java script
Object oriented java scriptvivek p s
 

Semelhante a JavaScript in Object-Oriented Way (20)

Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02
 
Object oriented javascript
Object oriented javascriptObject oriented javascript
Object oriented javascript
 
Java script
Java scriptJava script
Java script
 
JavaScript OOPS Implimentation
JavaScript OOPS ImplimentationJavaScript OOPS Implimentation
JavaScript OOPS Implimentation
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 
Master in javascript
Master in javascriptMaster in javascript
Master in javascript
 
Class notes(week 2) on basic concepts of oop-2
Class notes(week 2) on basic concepts of oop-2Class notes(week 2) on basic concepts of oop-2
Class notes(week 2) on basic concepts of oop-2
 
Class notes(week 2) on basic concepts of oop-2
Class notes(week 2) on basic concepts of oop-2Class notes(week 2) on basic concepts of oop-2
Class notes(week 2) on basic concepts of oop-2
 
AJS UNIT-1 2021-converted.pdf
AJS UNIT-1 2021-converted.pdfAJS UNIT-1 2021-converted.pdf
AJS UNIT-1 2021-converted.pdf
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
JavaScript Object Oriented Programming Cheat Sheet
JavaScript Object Oriented Programming Cheat SheetJavaScript Object Oriented Programming Cheat Sheet
JavaScript Object Oriented Programming Cheat Sheet
 
Javascript
JavascriptJavascript
Javascript
 
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPTHSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
 
JavsScript OOP
JavsScript OOPJavsScript OOP
JavsScript OOP
 
Enabling White-Box Reuse in a Pure Composition Language
Enabling White-Box Reuse in a Pure Composition LanguageEnabling White-Box Reuse in a Pure Composition Language
Enabling White-Box Reuse in a Pure Composition Language
 
WEB MODULE 3.pdf
WEB MODULE 3.pdfWEB MODULE 3.pdf
WEB MODULE 3.pdf
 
JavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQueryJavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQuery
 
Introduction to object oriented programming
Introduction to object oriented programmingIntroduction to object oriented programming
Introduction to object oriented programming
 
Object oriented java script
Object oriented java scriptObject oriented java script
Object oriented java script
 
Week3
Week3Week3
Week3
 

Mais de Chamnap Chhorn

Mais de Chamnap Chhorn (7)

Introduction to rails
Introduction to railsIntroduction to rails
Introduction to rails
 
High performance website
High performance websiteHigh performance website
High performance website
 
Ruby object model
Ruby object modelRuby object model
Ruby object model
 
Rest and Rails
Rest and RailsRest and Rails
Rest and Rails
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web Architecture
 
Principles in Refactoring
Principles in RefactoringPrinciples in Refactoring
Principles in Refactoring
 
Rest in Rails
Rest in RailsRest in Rails
Rest in Rails
 

Último

AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 

Último (20)

AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 

JavaScript in Object-Oriented Way

  • 2. Agenda  Introduction to JavaScript  Working with Objects  Working with Functions  Working with Closures  Details of the Object Model  Public Members  Private Members  Privileged Members  Static Members  Inheritance  Practical Closures 2
  • 4. Introduction to JavaScript  JavaScript has a reasonable claim to being the world’s most misunderstood programming language.  JavaScript is a scripting language most often used for client-side web development.  Major implementations are SpiderMonkey, Rhino, KJS, JavaScriptCore, and V8.  It is a dynamic, weakly typed, prototype-based language with first-class functions. 4
  • 5. Dynamic Language  A high level of programming languages that execute many common behaviors at runtime. These behaviors could include:  Extension of the program,  By adding new code,  By extending objects and definitions,  Or by modifying the type system.  Dynamic languages and dynamic typing are not identical concepts, and a dynamic language need not be dynamically typed, though many dynamic languages are dynamically typed. 5
  • 6. A Loosely Typed Language  In JavaScript, you do not declare a type when defining a variable. However, this does not mean that variables are not typed. Depending on what data it contains, a variable can have one of several types.  A variable can change its type, depending on what value is assigned to it. The primitive datatypes can also be cast from one type to another.  There are three primitive types: booleans, numbers, and strings.  There are functions, which contain executable code. There are objects, which are composite datatypes.  Lastly, there are the null and undefined datatypes. Primitive datatypes are passed by value, while all other datatypes are passed by reference. 6
  • 7. Prototyped-based Programming  A style of object-oriented programming in which classes are not present, and behavior reuse (known as inheritance in class-based languages) is performed via a process of cloning existing objects that serve as prototypes. This model can also be known as class-less, prototype-oriented or instance- based programming.  In prototype-based systems there are two methods of constructing new objects, through cloning of an existing object, and through ex nihilo (quot;from nothingquot;) object creation. 7
  • 8. Language Features  Structured JavaScript supports all the structured programming syntax in C (e.g., if statements, while loops, switch statements, etc.). One partial exception is scoping: C-style block-level scoping is not supported. JavaScript 1.7, however, supports block-level scoping with the let keyword. Like C, JavaScript makes a distinction between expressions and statements.  Dynamic dynamic typing Types are associated with values, not variables. JavaScript supports duck typing. objects as associative arrays JavaScript is heavily object-based. Objects are associative arrays. Properties and their values can be added, changed, or deleted at run-time. run-time evaluation JavaScript includes an eval function that can execute statements provided as strings at run-time. 8
  • 9. Language Features (cont.)  Functional first-class functions Functions are first-class; they are objects themselves. As such, they have properties and can be passed around and interacted with like any other objects. first-class functions treats functions as first-class objects. Specifically, this means that the language supports constructing new functions during the execution of a program, storing them in data structures, passing them as arguments to other functions, and returning them as the values of other functions. inner functions and closures Inner functions (functions defined within other functions) are created each time the outer function is invoked, and variables of the outer functions for that invocation continue to exist as long as the inner functions still exist, even after that invocation is finished (e.g. if the inner function was returned, it still has access to the outer function's variables) — this is the mechanism behind closures within JavaScript. 9
  • 10. Language Features (cont.)  Prototype-based prototypes JavaScript uses prototypes instead of classes for defining object properties, including methods, and inheritance. It is possible to simulate many class-based features with prototypes in JavaScript. functions as object constructors Functions double as object constructors along with their typical role. Prefixing a function call with new creates a new object and calls that function with its local this keyword bound to that object for that invocation. The function's prototype property determines the new object's prototype. functions as methods Unlike many object-oriented languages, there is no distinction between a function definition and a method definition. Rather, the distinction occurs during function calling; a function can be called as a method. When a function is invoked as a method of an object, the function's local this keyword is bound to that object for that invocation. 10
  • 11. Language Features (cont.)  Others run-time environment JavaScript typically relies on a run-time environment (e.g. in a web browser) to provide objects and methods by which scripts can interact with quot;the outside worldquot;. (This is not a language feature, but it is common in most JavaScript implementations.) variadic functions An indefinite number of parameters can be passed to a function. The function can both access them through formal parameters and the local arguments object. array and object literals Like many scripting languages, arrays and objects (associative arrays in other languages) can be created with a succinct shortcut syntax. The object literal in particular is the basis of the JSON data format. regular expressions JavaScript also supports regular expressions in a manner similar to Perl. 11
  • 13. Objects  JavaScript is fundamentally about objects. Array are objects. Functions are objects. Objects are objects.  What are objects?  Objects are collections of name-value pairs. The names are strings, and the values are string, numbers, booleans, and objects. 13
  • 14. Objects and Properties  You define a property of an object by assigning it a value. myCar.make = “Ford”;  JavaScript objects are sometimes called associative arrays, since each property is associated with a string value that can be used to access it.  Properties of JavaScript objects can be accessed or set using a dot notation or bracket notation. myCar.make = “Ford”; or myCar[“make”] = “Ford”; or var propertyName = “make”; myCar[propertyName] = “Ford”; 14
  • 15. Objects and Properties (cont.)  You can use the bracket notation with for…in to iterate over all the properties of an object. function showProperties(obj, objName) { var result = “”; for(var i in obj) result += objName + “.” + i + “ = “ + obj[i] + “n”; return result; } myCar.make = Ford myCar.model = Mustang myCar.year = 1969 15
  • 16. Creating New Objects  You can create an object using an object initializer. var obj = { property_1: value_1, property_2: value_2, property_n: value_n };  Alternatively, you can create an object with these two steps: Define the object type by writing a constructor 1. function. 2. Create an instance of the object with new. 16
  • 17. Creating New Objects (cont.) function Car(make, model, year) { this.make = make; this.model = model; this.year = year; }  Now, you can create an object called myCar as follows: myCar = new Car(“Eagle”, “Talon TSi”, 1993);  You can create any number of car objects by calls to new.  An object can have a property that is itself another object. 17
  • 18. Indexing Object Properties  In JavaScript 1.1 or later,  if you initially define a property by its name, you must always refer to it by its name, myCar.color = “red”;  and if you initially define a property by an index, you must always refer to it by its index. myCar[5] = “25 mpg”; 18
  • 19. Define Properties for an Object Type  You can add a property defined object by using the prototype property. Car.prototype.color = “red”; car1.color = “blue”;  This defines a property that is shared by all objects of the specified type, rather than by just one instance of the object. 19
  • 20. Define Methods  A method is a function associated with an object. You define a method by: object.methodname = function_name;  You can then call the method in the context of the object as follows: object.methodname(params); 20
  • 21. Define Methods (cont.) function displayCar() { return “A beautiful ” + this.year + “ ” + this.make + “ ” + this.model; } function Car(make, model, year, owner) { this.make = make; this.model = model; this.year = year; this.owner = owner; this.displayCar = displayCar; } car1.displayCar(); car2.displayCar(); 21
  • 22. Deleting Properties  You can remove a property by using the delete operator. //create a new object with two properties: a and b. myObj = new Object(); myObj.a = 5; myObj.b = 12; delete myObj.a; //remove the a property 22
  • 24. Function Object  A JavaScript function can take 0 or more named parameters.  The function body can declare its own variables which are local to that function.  If no return statement is used, JavaScript returns undefined. function add(x, y) { var total = x + y; return total; } 24
  • 25. Functions As First-Class Objects  In JavaScript, functions are first-class objects. They can be stored in variables, passed into other functions as arguments, passed out of functions as return values, and constructed at run-time.  You can create anonymous functions, which are functions created using the function() { ... } syntax. They are not given names, but they can be assigned to variables.  JavaScript has function-level scope.  JavaScript is also lexically scoped, which means that functions run in the scope they are defined in, not the scope they are executed in. 25
  • 26. Function Arguments  JavaScript functions can be invoked with any number of arguments, regardless of the number of arguments named in the function definition.  You can call a function without passing the parameters it expects, in which case they will be set to underfined. add(); //NaN  You can also pass in more arguments than the function is expecting: add(2, 3, 4); //5 26
  • 27. The arguments object  Functions have access to an additional variable inside their body called arguments, which is an array-like object holding all of the values passed to the function. function add() { var sum = 0; for(var i=0; i<arguments.length; i++) { sum += arguments[i]; } return sum; } add(2, 3, 4, 5); //14 27
  • 28. The arguments object (cont.)  The arguments object defines a callee property that refers to the function that is currently being executed. This property is rarely useful, but it can be used to allow unnamed functions to invoke themselves recursively. function(x) { if (x <= 1) return 1; return x * arguments.callee(x-1); } 28
  • 29. Functions as Data  In JavaScript, however, functions are also data, which means that they can be assigned to variables, stored in the properties of objects or the elements of arrays, passed as arguments to functions, and so on. function square(x) { return x*x; } var a = square(4); // a contains the number 16 var b = square; // Now b refers to square var c = b(5); // c contains the number 25 var o = new Object(); o.square = function(x) { return x*x; } y = o.square(16); // y equals 256 29
  • 30. Constructor Functions  A constructor function is a function that initializes the properties of an object and is intended for use with the new operator. function Car(make, model, year, owner) { this.make = make; this.model = model; this.year = year; this.owner = owner; } 30
  • 31. Function Properties and Methods  The length property of the arguments array specifies the number of arguments that were passed to the function.  The length property of the Function object returns exactly how many declared parameters a function has.  Note that unlike arguments.length, this length property is available both inside and outside of the function body. function check(args) { var actual = args.length; var expected = args.callee.length; if (actual != expected) { throw new Error(quot;Wrong number of arguments: expected: quot; + expected + quot;; actually passed quot; + actual); } } 31
  • 32. DefiningYour Own Function Properties  When a function needs to use a variable whose value persists across invocations, it is often convenient to use a property of the Function object, instead of cluttering up the namespace by defining a global variable. function counter() { if (!arguments.callee.count) { arguments.callee.count = 0; } return arguments.callee.count++; } 32
  • 33. The apply() and call() Methods  These methods allow you to invoke a function as if it were a method of some other object.  The first argument to both call() and apply() is the object on which the function is to be invoked; this argument becomes the value of the this keyword within the body of the function.  Any remaining arguments to call() are the values that are passed to the function that is invoked. 33
  • 34. The apply() and call() Methods f.call(o, 1, 2);  This is similar to the following lines of code: o.m = f; o.m(1,2); delete o.m;  The apply() method is like the call() method, except that the arguments to be passed to the function are specified as an array: f.apply(o, [1, 2]); 34
  • 35. Anonymous Functions  An anonymous function, executed immediately. (function() { var foo = 10; var bar = 2; alert(foo * bar); })();  An anonymous function with arguments. (function(foo, bar) { alert(foo * bar); })(10, 2);  An anonymous function that returns a value. var baz = (function(foo, bar) { return foo * bar; })(10, 2); 35
  • 36. Anonymous Functions (cont.)  Here’s a way of “hiding” some local variables – like block scope in C: > var a = 1; > var b = 2; > (function() { var b = 3; a += b; })(); >a 4 >b 2 36
  • 37. 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. function betterExampleNeeded() { var a = 1; function oneMoreThanA() { return a + 1; } return oneMoreThanA(); } 37
  • 39. Working with Closures  Closures are often considered an advanced feature in JavaScript, but understanding them is essential to mastering the language.  JavaScript allows inner functions.  And that those inner functions are allowed access to all of the local variables, parameters and declared inner functions within their outer function(s).  A closure is formed when one of those inner functions is made accessible outside of the function in which it was contained, so that it may be executed after the outer function has returned.  At which point it still has access to the local variables, parameters and inner function declarations of its outer function. 39
  • 40. Working with Closures (cont.)  Consider the following function: function init() { var name = “Mozilla”; function displayName() { alert(name); } displayName(); }
  • 41. Working with Closures (cont.)  This is an example of lexical scoping: in JavaScript, the scope of a variable is defined by its location within the source code, and nested functions have access to variables declared in their outer scope.  Now consider the following example: function makeFunc() { var name = “Mozilla”; function displayName() { alert(name); } return displayName; } var myFunc = makeFunc(); myFunc(); 41
  • 42. Working with Closures (cont.)  The displayName() inner function was returned from the outer function before being executed.  Normally, the local variables within a function only exist for the duration of that function’s execution. Once makeFunc() has finished executing, it is reasonable to expect that the name variable will no longer be necessary.  Since the code still works as expected, this is obviously not the case. 42
  • 43. Working with Closures (cont.)  A closure is a special kind of object that combines two things: a function, and the environment in which that function was created.  The environment consists of any local variables that were in-scope at the time that the closure was created.  In this case, myFunc is a closure that incorporates both the displayName() and the “Mozilla” string that existed when the closure was created. 43
  • 44. A More Interesting Example function makeAdder(x) { return function(y) { return x + y; } } var add5 = makeAdder(5); var add10 = makeAdder(10); console.log(add5(2)); //7 console.log(add10(2)); //12 44
  • 45. A More Interesting Example (cont.)  We have defined a function makeAdder(x) which takes a single argument x and returns a new function. The function it returns takes a single argument y, and returns the sum of x and y.  In essence, makeAdder is a function factory – it creates functions which can add a specific value to their argument. • add5 and add10 are both closures. They share the same function body definition, but store different environments.  In add5’s environment, x is 5. In add10’s environment, x is 10. 45
  • 46. Details of the Object Model 46
  • 47. Class-Based vs. Prototype-Based Languages Class-Based Prototype-Based  Class and instance are  All objects are instances. distinct entities.  Define a class with a class  Define and create a set of definition; instantiate a objects with constructor class with constructor functions. methods.  Create a single object with  Same. new operator.
  • 48. Class-Based vs. Prototype-Based Languages (cont.)  Construct an object  Construct an object hierarchy by assigning an hierarchy by using class object as the prototype definitions to define associated with a subclasses of existing constructor function. classes.  Inherit properties by  Inherit properties by following the prototype chain. following the class chain.  Constructor function or  Class definition specifies all prototype specifies an properties of all instances initial set of properties. Can of a class. Cannot add add or remove properties properties dynamically at dynamically to individual run time. objects or to the entire set of objects.
  • 49. Class-Based vs. Prototype-Based Languages (cont.) Java JavaScript Strongly-typed Loosely-typed Static Dynamic Classical Prototypical Classes Functions Constructors Functions Methods Functions 49
  • 50. Public Members  All of the class’s attributes and methods are public and accessible. The public attributes are created using the this keyword.  There are two main ways of putting members in a new object:  In the constructor  In the prototype 50
  • 51. 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. function Container(param) { this.member = param; }  So, if we construct a new object var myContainer = new Container(„abc‟);  then myContainer.member contains „abc‟. 51
  • 52. In the prototype  This technique is usually used to add public methods.  To add a method to all objects made by a constructor, add a function to the constructor’s prototype: Container.prototype.stamp = function(string) { return this.member + string; } myContainer.stamp(„def‟); //‟abcdef‟ 52
  • 53. Private Members Using a Naming Convention  An underscore is added to the beginning of each member, signifying that it is intended to be private.  Using an underscore is a well-known naming convention; it says that the attribute (or method) is used internally, and that accessing it or setting it directly may have unintended consequences. 53
  • 54. Private Members Through Closures  Private members are made by the constructor. Ordinary vars and parameters of the constructor becomes the private members.  By convention, we make a private that parameter. This is used to make the object available to the private methods.  Private methods cannot be called by public methods. 54
  • 55. Private Members Through Closures (cont.) function Container(param) { this.member = param; // Public attribute. var secret = 3; // Private attribute. var that = this; // Private attribute. function dec() { // Private method. ... } } //Public method. Container.prototype.stamp = function() { ... }; 55
  • 56. Privileged Members  A privileged method is able to access the private variables and methods, and is itself accessible to public methods and the outside. 56
  • 57. Privileged Members function Container(param) { this.member = param; // Public attribute. var secret = 3; // Private attribute. var that = this; // Private attribute. function dec() { // Private method. if(secret > 0) { secret -= 1; return true; } else { return false; } } this.service = function() { //Privileged method. if(dec()) { return that.member; } else { return null; } }; } 57
  • 58. Static Members  Static members operate on the class-level instead of the instance-level; there is only one copy of each static member.  These private static members can be accessed from within the constructor, which means that any private or privileged function has access to them.  Since they are declared outside of the constructor, they do not have access to any of the private attributes, and as such, are not privileged; private methods can call private static methods, but not the other way around. 58
  • 59. var Book = (function() { var numOfBooks = 0; // Private static attributes. function checkIsbn(isbn) { // Private static method. ... } // Return the constructor. return function(newIsbn, newTitle, newAuthor) { var isbn; // Private attributes. this.getIsbn = function() { // Privileged methods. return isbn; }; this.setIsbn = function(newIsbn) { if(!checkIsbn(newIsbn)) throw new Error('Book: Invalid ISBN.'); isbn = newIsbn; }; numOfBooks++; // Keep track of how many Books have been created this.setIsbn(newIsbn); } })(); Book.convertToTitleCase = function(inputString) { // Public static method. ... }; Book.prototype = { // Public, non-privileged methods. display: function() { ... } }; 59
  • 60. A Short Summary  Private and Privileged members can only be made when an object is constructed.  Public members can be added at any time.  Having too many privileged methods can cause memory problems because new copies of all privileged methods are created for each instance.  In the public members pattern, all methods are created off of the prototype, which means there is only one copy of each in memory, no matter how many instances you create. 60
  • 64. How does it work? Suppose you create the mark object: var mark = new WorkerBee();  When JavaScript sees the new operator, it creates a new generic object and passes this new object as the value of the this keyword to the WorkerBee constructor function.  Then sets the value of WorkerBee.prototype to an object of Employee to setup prototype chain. 64
  • 65. Local versus Inherited Values  When you access an object property, JavaScript performs these steps: Check to see if the value exists locally. If it does, return 1. that value. If there is not a local value, check the prototype chain. 2. If an object in the prototype chain has a value for the 3. specified property, return that value. If no such property is found, the object does not have 4. the property. 65
  • 66. Does it work?  Suppose you create amy instance. var amy = new WorkerBee(); amy.name = “”; amy.dept = “general”; amy.projects = [];  Now, suppose you change the value of the name property in the prototype associated with Employee. Employee.prototype.name = “Unknown”; 66
  • 67. Does it work? (cont.)  If you want to have default values for object properties and you want to be able to change the default values at run time, you should set the properties in the constructor’s prototype, not in the constructor function itself. function Employee() { this.dept = “general”; } Employee.prototype.name = “”; function WorkerBee() { this.projects = []; } WorkerBee.prototype = new Employee(); amy = new WorkerBee(); Employee.prototype.name = “Unknown”; 67
  • 68. Adding Properties  In JavaScript, you can add properties to any object at run time.  To add a property that is specific to a single object, you assign a value to the object. mark.bonus = 3000;  Now, the mark object has a bonus property, but no other WorkerBee has this property. 68
  • 69. Adding Properties (cont.)  If you add a new property to an object that is being used as the prototype for a constructor function, you add that property to all objects that inherit properties from the prototype. Employee.prototype.specialty = “none”; 69
  • 73. A Cleaner Approach  Another way of inheriting is by using the .call/.apply methods. Below are equivalent:  Using the javascript .call method makes a cleaner implementation because the quot;.basequot; is not needed anymore.
  • 74. Don’t suppose it will work  Just because you have called the WorkerBee constructor from inside the Engineering constructor, you have set up inheritance appropriately for Engineer object. This is not the case.  Calling the WorkerBee constructor ensures that an Engineer object starts out with the properties specified in all constructor functions that are called.  If you later add properties to the Employee or WorkerBee prototypes, those properties are not inherited by the Engineer object. 74
  • 75. Don’t suppose it will work (cont.) function Enginner(name, projs, mach) { WorkerBee.call(this, name, “engineering”, projs); this.match = mach || “”; } var jane = new Engineer(“Doe, Jane”, [“navigator”, “javascript”], “belau”); Employee.prototype.specialty = “none”;  The jane object does not inherit the specialty property. You still need to explicitly set up the prototype to ensure dynamic inheritance. 75
  • 76. No Multiple Inheritance  JavaScript does not support multiple inheritance.  Because an object has a single associated prototype, JavaScript cannot dynamically inherit from more than one prototype chain.  In JavaScript, you can have a constructor function call more than one other constructor function within it. 76
  • 77. No Multiple Inheritance (cont.) function Hobbyist(hobby) { this.hobby = hobby || “scuba”; } function Engineer(name, projs, mach, hobby) { WorkerBee.call(this, name, “engineering”, projs); Hobbyist.call(this, hobby); this.machine = mach || “”; } Engineer.prototype = new WorkerBee(); dennis = new Engineer(“Doe Dennis”, [“collabra”], “hugo”); 77
  • 78. No Multiple Inheritance (cont.)  Assume, you then add a property to the Hobbyist constructor’s prototype. Hobbyist.prototype.equipment = [“mask”, “fins”, “regulator”, “bcd”];  The dennis object does not inherit this new property. 78
  • 79. Patterns Summary  Public function Constructor(…) { this.membername = value; } Constructor.prototype.membername = value;  Private function Constructor(…) { var that = this; var membername = value; function membername(…) {…} } 79
  • 80. Patterns Summary (cont.)  Privileged function Constructor(…) { this.membername = function(…) {…}; }  Inheritance var SuperClass = function(…) { this.superclassmember = value; }; var SubClass = function(…) { SuperClass.call(this, params); this.subclassmember = value; }; SubClass.prototype = new SuperClass(); 80
  • 82. Practical closures  A closure lets you associate some data (environment) with a function that operates on that data.  You can use a closure anywhere that you might normally use an object with only a single method. 82
  • 83. Example 1: Factory Method  Suppose, we wish to add to a page buttons that adjust the size of the page text. function size12() { document.body.style.fontSize = “12px”; } function size14() { document.body.style.fontSize = “14px”; } function size16() { document.body.style.fontSize = “16px”; } 83
  • 84. Example 1: Factory Method (cont.)  Now, one could imagine that you would want to generalize this notion of an “size function”, and you would not want to write dozens and dozens of size functions. function makeSizer(size) { return function() { document.body.style.fontSize = size + “px”; } } var size12 = makeSize(12); var size14 = makeSize(14); var size16 = makeSize(16); 84
  • 85. Example 1: Factory Method (cont.) • We can attach them to buttons as follows: 85
  • 86. Example 2: Emulating private methods with closures  The shared environment is created in the body of an anonymous function, which is executed as soon as it has been defined.  The environment contains two private items: a variable called privateCounter and a function called changeBy.  Neither of these private items can be accessed directly from outside the anonymous function. 86
  • 87. var Counter = (function() { var privateCounter = 0; function changeBy(val) { privateCounter += val; } return { increment: function() { changeBy(1); }, decrement: function() { changeBy(-1); }, value: function() { return privateCounter; } } })(); alert(Counter.value()); //0 Counter.increment(); Counter.increment(); alert(Counter.value()); //2 Counter.decrement(); alert(Counter.value()); //1 87
  • 88. Example 3: Emulating private static methods with closures  See slide 58 and 59. 88
  • 89. Example 4: Creating closures in loops 89
  • 90. Explanation  The reason for this is the functions assigned to onfocus are closures; they consist of the function definition and the captured environment from the setupHelp function’s scope.  Three closures have been created, but each one shares the same single environment.  By the time the onfocus callbacks are executed, the loop has run its course and the item variable (shared by all three closures) has been left pointing to the last entry in the helpText list. 90
  • 92. Using Anonymous Functions to Induce the Scope // Iterate through each of the items for ( var i = 0; i < helpText.length; i++ ) { // Use a self-executed anonymous function to induce scope (function(){ // Remember the value within this scope var item = helpText[i]; // Bind a function to the element document.getElementById(item).onfocus = function() { // item refers to a parent variable // scoped within the context of this for loop document.getElementById(„help‟).innerHTML = item.help; }; })(); }
  • 93. Example 5: setTimeout with Function References  A common use for a closure is to provide parameters for the execution of a function prior to the execution of that function.  The problem is that the function that passes to setTimeout cannot provide parameters.  However, code could call another function that returned a reference to an inner function object, with that inner function object being passed by reference to the setTimeout function. The parameters to be used for the execution of the inner function are passed with the call to the function that returns it. 93
  • 94. Example 5: setTimeout with Function References (cont.) function callLater(paramA, paramB, paramC) { return function() { paramA[paramB] = paramC; } }; var functRef = callLater(elStyle, “display”, “none”); setTimeout(functRef, 500); 94
  • 95. Example 6: Using Anonymous Functions to Hide Variables from the Global Scope // Create a new anonymous function, to use as a wrapper (function(){ // The variable that would, normally, be global var msg = quot;Thanks for visiting!quot;; // Binding a new function to a global object window.onunload = function(){ // Which uses the 'hidden' variable alert( msg ); }; // Close off the anonymous function and execute it })();
  • 96. Example 7: Associating Functions with Object Instance Methods  You want to associate different functions to each event handler.  Don’t put associateObjWithEvent() inside the DhtmlObject constructor function. See Accidental Closures and Performance considerations for more details. 96
  • 97. function associateObjWithEvent(obj, methodName){ return function(e){ e = e || window.event; return obj[methodName](e, this); }; } function DhtmlObject(elementId){ var el = getElementWithId(elementId); if(el){ el.onclick = associateObjWithEvent(this, quot;doOnClickquot;); el.onmouseover = associateObjWithEvent(this, quot;doMouseOverquot;); el.onmouseout = associateObjWithEvent(this, quot;doMouseOutquot;); } } DhtmlObject.prototype.doOnClick = function(event, element){ ... // doOnClick method body. }; DhtmlObject.prototype.doMouseOver = function(event, element){ ... // doMouseOver method body. }; DhtmlObject.prototype.doMouseOut = function(event, element){ ... // doMouseOut method body. };
  • 98. Example 8: Encapsulating Related Functionality  The array is going to act as a buffer for the output, but defining it locally to the function will result in its re-creation on each execution of the function.  One approach might make the array a global variable so that it can be re-used without being re-created. But the effect is to render the code less manageable, as, if it is to be used elsewhere. It also makes the code less easy to integrate with other code because it pollutes the global namespace.  A Closure allows the buffer array to be associated (and neatly packaged) with the function that is dependent upon it and simultaneously keep the property name to which the buffer array as assigned out of the global namespace and free of the risk of name conflicts and accidental interactions. 98
  • 99. var getImgInPositionedDivHtml = (function(){ var buffAr = [ '<div id=quot;', '', // index 1, DIV ID attribute 'quot; style=quot;position:absolute;top:', '', // index 3, DIV top position 'px;left:', '', // index 5, DIV left position 'px;width:', '', // index 7, DIV width 'px;height:','', // index 9, DIV height 'px;overflow:hidden;quot;><img src=quot;', '', // index 11, IMG URL 'quot; width=quot;', '', // index 13, IMG width 'quot; height=quot;', '', // index 15, IMG height 'quot; alt=quot;', '', // index 17, IMG alt text 'quot;></div>' ]; return function(url, id, width, height, top, left, altText){ buffAr[1] = id; buffAr[3] = top; buffAr[5] = left; buffAr[13] = (buffAr[7] = width); buffAr[15] = (buffAr[9] = height); buffAr[11] = url; buffAr[17] = altText; return buffAr.join(''); }; //:End of inner function expression. })();
  • 100. Example 8: Encapsulating Related Functionality  The array is going to act as a buffer for the output, but defining it locally to the function will result in its re-creation on each execution of the function.  One approach might make the array a global variable so that it can be re-used without being re-created. But the effect is to render the code less manageable. It also makes the code less easy to integrate with other code because it pollutes the global namespace.  A Closure allows the buffer array to be associated (and neatly packaged) with the function that is dependent upon it and simultaneously keep the property name to which the buffer array as assigned out of the global namespace and free of the risk of name conflicts and accidental interactions. 100
  • 101. Accidental Closures  Rendering any inner function accessible outside of the body of the function in which it was created will form a closure.  Accidentally creating closures can have harmful side effects as the following section on the IE memory leak problem describes.  A common situation is where inner functions are used is as event handlers for DOM elements.
  • 102. Accidental Closures (cont.) var quantaty = 5; function addGlobalQueryOnClick(linkRef){ if(linkRef){ linkRef.onclick = function(){ this.href += ('?quantaty='+escape(quantaty)); return true; }; } }  Whenever the addGlobalQueryOnClick function is called a new inner function is created (and a closure formed by its assignment).  From the efficiency point of view that would not be significant if the addGlobalQueryOnClick function was only called once or twice, but if the function was heavily employed many distinct function objects would be created (one for each evaluation of the inner function expression).
  • 103. Accidental Closures (cont.)  As the inner function in the first version is not being used to exploit the closures produced by its use, it would be more efficient not to use an inner function, and thus not repeat the process of creating many essentially identical function objects. var quantaty = 5; function addGlobalQueryOnClick(linkRef){ if(linkRef){ linkRef.onclick = forAddQueryOnClick; } } function forAddQueryOnClick(){ this.href += ('?quantaty='+escape(quantaty)); return true; }
  • 104. References  Pro JavaScript Design Patterns  JavaScript Definitive Guide 5th edition  Pro JavaScript Techniques  https://developer.mozilla.org/en/A_re-introduction_to_JavaScript  https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Details_of_th e_Object_Model  https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with _Closures  http://www.jibbering.com/faq/faq_notes/closures.html  http://en.wikipedia.org/wiki/JavaScript  http://blogs.msdn.com/ericlippert/archive/2003/09/17/53028.aspx  http://msdn.microsoft.com/en-us/library/bb250448.aspx 104
  • 105. References (cont.)  http://blog.j15r.com/2005/06/another-word-or-two-on-memory-leaks.html  http://en.wikipedia.org/wiki/Closure_(computer_science)  http://javascript.crockford.com/inheritance.html  http://blog.j15r.com/2005/01/dhtml-leaks-like-sieve.html  http://www.crockford.com/javascript/private.html  http://www.quirksmode.org/blog/archives/2005/02/javascript_memo.html  http://vinaytech.wordpress.com/2009/02/24/closuresandiecircular/  http://www.ibm.com/developerworks/web/library/wa-memleak/  http://support.microsoft.com/kb/830555  http://vinaytech.wordpress.com/2009/02/24/closuresandiecircular/ 105