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

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

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

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

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

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

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

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

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

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

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

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

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

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