JavaScript in Object-Oriented WayChhorn Chamnap

May 2009

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

3

Introduction to JavaScript

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.

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.

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.

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 ("from nothing") object creation.

8

Language Features

StructuredJavaScript 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.

Dynamicdynamic typing

Types are associated with values, not variables.JavaScript supports duck typing.

objects as associative arraysJavaScript 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.

9

Language Features (cont.)

Functionalfirst-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.

10

Language Features (cont.)

Prototype-basedprototypes

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.

11

Language Features (cont.)

Othersrun-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 "the outside world". (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.

12

Working with Objects

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.

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”;

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

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:

1. Define the object type by writing a constructor function.

2. Create an instance of the object with new.

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.

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”;

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.

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);

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();

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

23

Working with Functions

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;

}

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.

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

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

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);

}

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 squarevar 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

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;

}

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("Wrong number of arguments: expected: " + expected + "; actually passed " + actual);

}}

32

Defining Your 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++;

}

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.

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]);

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);

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;

})();> a4> b2

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();

}

38

Working with Closures

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.

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();

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.

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.

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

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.

46

Details of the Object Model

Class-Based vs. Prototype-Based LanguagesClass-Based Prototype-Based

Class and instance are distinct entities.

Define a class with a class definition; instantiate a class with constructor methods.

Create a single object with new operator.

All objects are instances.

Define and create a set of objects with constructor functions.

Same.

Class-Based vs. Prototype-Based Languages (cont.) Construct an object

hierarchy by using class definitions to define subclasses of existing classes.

Inherit properties by following the class chain.

Class definition specifies all properties of all instances of a class. Cannot add properties dynamically at run time.

Construct an object hierarchy by assigning an object as the prototype associated with a constructor function.

Inherit properties by following the prototype chain.

Constructor function or prototype specifies an initial set of properties. Can add or remove properties dynamically to individual objects or to the entire set of objects.

49

Class-Based vs. Prototype-Based Languages (cont.)

FunctionsMethods

FunctionsConstructors

FunctionsClasses

PrototypicalClassical

DynamicStatic

Loosely-typedStrongly-typed

JavaScriptJava

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

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 objectvar myContainer = new Container(‘abc’);

then myContainer.member contains ‘abc’.

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’

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.

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.

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() {...};

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.

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;}

};}

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.

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 createdthis.setIsbn(newIsbn);

}})();Book.convertToTitleCase = function(inputString) { // Public static method....};Book.prototype = { // Public, non-privileged methods.

display: function() {...}

};

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.

61

Inheritance:The Employee Example

62

Very Simple Implementation

63

Object Hierarchy

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.

65

Local versus Inherited Values

When you access an object property, JavaScript performs these steps:

1. Check to see if the value exists locally. If it does, return that value.

2. If there is not a local value, check the prototype chain.

3. If an object in the prototype chain has a value for the specified property, return that value.

4. If no such property is found, the object does not have the property.

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”;

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”;

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.

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”;

70

Adding Properties (cont.)

71

More Flexible Constructors

72

More Flexible Constructors

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 ".base" 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.

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.

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.

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”);

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.

79

Patterns Summary

Publicfunction Constructor(…) {

this.membername = value;}

Constructor.prototype.membername = value;

Privatefunction Constructor(…) {

var that = this;

var membername = value;function membername(…) {…}

}

80

Patterns Summary (cont.)

Privilegedfunction Constructor(…) {

this.membername = function(…) {…};}

Inheritancevar SuperClass = function(…) {

this.superclassmember = value;};var SubClass = function(…) {

SuperClass.call(this, params);this.subclassmember = value;

};SubClass.prototype = new SuperClass();

81

Practical Closures

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.

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”;

}

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);

85

Example 1: Factory Method (cont.)• We can attach them to buttons as

follows:

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.

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()); //0Counter.increment();Counter.increment();alert(Counter.value()); //2Counter.decrement();alert(Counter.value()); //1

88

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

89

Example 4: Creating closures in loops

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.

91

Typical Solution

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.

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);

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 = "Thanks for visiting!";

// 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.

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, "doOnClick");

el.onmouseover = associateObjWithEvent(this, "doMouseOver");

el.onmouseout = associateObjWithEvent(this, "doMouseOut");

}

}

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.

var getImgInPositionedDivHtml = (function(){

var buffAr = [

'<div id="', '', // index 1, DIV ID attribute

'" style="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;\"><img src=\"', '', // index 11, IMG URL

'\" width=\"', '', // index 13, IMG width

'\" height=\"', '', // index 15, IMG height

'\" alt=\"', '', // index 17, IMG alt text

'\"><\/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.

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;}

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_the_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

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/