Modern JavaScript Develop And Design Instructor’s Notes Chapter 14 – Advanced JavaScript Modern JavaScript Design And Develop Copyright © 2012 by Larry Ullman

Objectives Create and use a namespace Define and utilize constructor functions Understand the nature of prototypical inheritance

More Objectives Recognize and begin using closures Identify an object’s type using alternative approaches Minify completed project code

Defining Namespaces var someNamespace = { someProperty: 23, someMethod: function() {…} }; // Use someNamespace.someProperty // and someNamespace.someMethod() Namespaces are named realms with their own local scope. Namespaces help to prevent conflicts. Try to use unique identifiers. Namespaces in JavaScript are created by just making a new custom object.

Creating Custom Objects var employee = { firstName: 'Joseph', lastName: 'Doe', department: 'Accounting', hireDate: new Date(), getName: function() { return this.lastName + ', ' + this.firstName; } // No comma. }; // Don't forget the semicolon! JavaScript is prototypical: you do not define classes to create custom objects. You can create a new generic object if you need a single instance of a custom object.

Creating Custom Objects function Employee(firstName, lastName, department) { this.firstName = firstName; this.lastName = lastName; this.department = department; this.hireDate = new Date(); this.getName = function() { return this.firstName + ' ' + this.lastName; }; } If you need to create multiple instances of a custom object, define a constructor function. Constructor functions are normally capitalized. Use this to refer to object attributes. Do not return values! Use new to create new objects of this type.

Creating Custom Objects Define toString() and/or valueOf() methods so that your custom objects behave like other objects in JavaScript. The two methods may or may not return the same thing.

Prototypical Inheritance var test = { thing: 1 }; test.hasOwnProperty('thing'); // true test.valueOf(); // Object: i.e., there is a valueOf() method test.hasOwnProperty('valueOf'); // false All objects in JavaScript inherit from prototypes, including custom objects. Object is the root prototype in JavaScript. Objects can be prototypes of prototypes. When you reference an attribute or method, JavaScript will look through the prototype chain to find the corresponding definition, or return undefined if not found.

Adding Prototype Methods function Employee(firstName, lastName, department) { /* Actual code. */ } Employee.prototype.getNameBackwards = function() { return this.lastName + ', ' + this.firstName: You can use the prototype property to retroactively add a method to an object type. You should be judicious about using this capability.

Closures Function definition with a memory Might be created when: One function is defined within another The inner function references variables that exist in the outer function The inner function will be called after the outer function has stopped executing Advanced concept to grasp.

Closure Example The onload function sets up the page, including creating a variable. The form’s submission function will be called any number of times, after the onload function has stopped executing. The submission function can access the variables defined within the onload function.

Closure Example window.onload = function() { 'use strict’; var target = document.getElementById('target'); var opacity = 100; var fader = setInterval(function() { opacity -= 10; if (opacity >= 0) { if (typeof target.style.opacity == 'string') { target.style.opacity = (opacity/100); } else { // For others: target.style.filter = 'alpha(opacity=' + opacity + ')'; } } else { clearInterval(fader); }, 100); // End of setInterval(). }; // End of onload anonymous function. Another closure example. The anonymous function provided to setInterval() will make use of the opacity variable.

Type Identification typeof is sometimes too vague. instanceof confirms the prototype Or you can check the constructor property.

Minifying Code Minify code before releasing it into the wild. Use a command-line or Web-based minification tool.