Object-Oriented JavaScript: Constructors, Methods, and Context

Object‐Oriented 
JavaScript
Getting from Scripts to Applications
Donald J. Sipe  |  Refresh Jacksonville  |  November 11th 2008
 JavaScript
Hello World!
We are here
Pseudoclassical Inheritance
JavaScript
What we’ll be talking about
OOP Basics
 Scope
 Closures
 Context
Appling to OOP
 Constructors
 Methods
 Public
 Private
 Privileged
 But First... Some handy tools
Here are some handy things you might not know 
JavaScript can do:
 Object‐literal notation
 Anonymous functions
 Binary assignment
 Dot‐style and array‐style access of properties
Handy Tools
Object Literal Notation—Makes JSON possible
  // The old way
var myObject = new Object();
myObject.val = “test”;
  // Using object literal notation
var myObject = {
  val: “test”
};
Handy Tools
Object Literal Notation
  // The old way
var myArray = new Array(1, 30, “Refresh”);
  // Using object literal notation
var myArray = [1, 30, “Refresh”];
Handy Tools
Anonymous Functions
 In JavaScript, functions are treated as values, which 
means:
 Functions can be assigned to variables
 Functions can be passed as arguments to other functions
  
Handy Tools
Anonymous Functions
  // Using an anonymous function as an argument
setTimeout( function () {
    alert( “Refresh” );
  }, 1000
);
  
// Using a function as a variable
var myFunc = function () { 
  alert( “Refresh” ); 
};
setTimeout(myFunc, 1000);
Handy Tools
Anonymous Functions : Building a “scope bubble”
Using an anonymous function to wrap code you don’t want in the 
global scope
  var globalVar = “Refresh”;  // Global scope
// Create a scope bubble
( function () {
  var privateVar = “Jacksonville”;
  alert( globalVar + “ ” + privateVar );
} )();
  alert (privateVar == undefined);
Handy Tools
Binary Assignment
Set a default value only if the variable doesn’t have a value yet
  // Traditional ternary assignment
var myVar = myVar ? myVar : 0;
  // Binary assignment
var myVar = myVal || 0;
Handy Tools
Dot‐Style and Array‐Style property access
  var sampleObj = {
  color: “blue”,
  width: “16px”
};
  // Traditional dot‐style access
alert( sampleObj.color == “blue” );
  // Alternative array‐style access
alert( sampleObj[“width”] == “16px” );
Back to OOP Basics…
 Scope, Closures, and Context
Scope
 Only functions have scope.  Blocks (if, while, for, switch) 
do not.
 All variables are within the global scope unless they are 
defined within a function.
 All global variables actually become properties of the 
window object
 When variables are not declared using the var keyword, 
they decared globally.
Scope
  var foo = “orig”;  // foo is now a global variable
  if ( true ) {
  foo = “new”;  // Global foo now equals “new”
}
  // create function to modify its own foo variable
function test () {
  var foo = “old”;
}
  test();
alert( foo == “new” );  // Global foo still equals “new”
Scope
If you forget to use the var keyword to define a value within a 
function—even if it’s only used within the function—the value 
will be defined globally.
  
var foo = “new”;
alert( foo == “new” );
 
// Omitting the var keyword reverts scope
// of foo to global level
function badTest () {
  foo = “bad news”;
}
  badTest();
// Global foo now equals “bad news”
alert( foo == “bad news” );  
Scope: Inner Func@ons
 Functions can be defined within one another
 Inner functions have access to the outer function’s 
variables and parameters.
  function getRandomInt(max) {
  var randNum = Math.random() * max;
  function ceil() {
    return Math.ceil(randNum);
  }
  return ceil();  // Notice that no arguments are passed
}
// Alert random number between 1 and 5
alert(getRandomInt(5));
Closures
 Inner functions maintain the scope they enjoyed when 
their parent function was called—even after the parent 
function has terminated.
 This allows you to effectively pass variables to 
functions that may not be called for some time.
Closures
  function delayedAlert (message, delay) {
  // Set an enclosed callback
  setTimeout( function () {
    // Use message variable passed to outer function
    alert(message);
  }, delay);
  // Display a message with a 5 second delay
delayedAlert(“Refresh”, 5000);
Context
 Your code will always be running within the context of 
another object
 Context is maintained through the use of the this 
variable.
  function increment() {
  this.x = this.x || 0;
  return this.x++;
};
  
alert( increment() == 0 );
  alert( increment() == 1 );
Context
  var myObject = {
  set: function (newVal) { this.val = newVal; }
};
  alert( myObject.val == null );  // val property not set yet
  myObject.set(“Refresh”);
alert( myObject.val == “Refresh” ); // val equals “Refresh”
  // Change the context of set() to the window object 
window.set = myObject.set; 
window.set( “Refresh Jacksonville” );
  alert( myObject.val == “Refresh” );
  alert( window.val == “Refresh Jacksonville” );
Context: Changing Contexts
JavaScript provides two handy functions for executing a 
function within the context of another function:
 call( )
 apply( )
Using call() — Arguments passed by name
  
// Simple function to change the color style of a node
function changeColor (newColor) {
  this.style.color = newColor;
}
  
// window.changeColor has no style property, so call fails
changeColor( “red” );
  
// Grab the DOM node with the id “required”
var reqField = document.getElementById( “required” );
  // Call changeColor() within reqField’s context
changeColor.call( reqField, “red” );
Using apply() — Arguments passed as an array
  
// Simple function to change the color style of a node
function changeColor (newColor) {
  this.style.color = newColor;
}
  
// Set the text color of the body element
function setBodyTextColor () {
  changeColor.apply( document.body, arguments );
}
  setBodyTextColor( “black” );
Object Oriented 
Programming
Constructors and methods
Object Oriented Programming
Now let’s apply all of this information to a more classical 
view of OOP in JavaScript:
 Constructors 
 Object Methods
 Public
 Private
 Privileged
About Objects
 Almost everything written in JavaScript is an object
 Objects can be though of as a collection of properties
—much like a hash in other languages
 JavaScript doesn’t have a concept of classes like other 
object‐oriented languages
 Classes are simulated using a concept called prototypal 
inheritance
Constructors
Like other languages, JavaScript uses the new operator to create 
new instances of objects.
  // Create User object constructor
function User ( name ) {
  this.name = name;
}
  // Create a new instance of a User
var me = new User(“Bob”);
  // Alert new user’s name
alert( me.name == “Bob” );
  // Cannot call User directly
alert( User.name == undefined ); // window.name is undefined
Methods
Private Privileged Public

Public Methods
One way to create a public method—a function that can 
be freely reference by code outside your object—is to 
attach it to the object’s prototype.
An object’s prototype is a special property that acts as a 
base reference of your object.  
This prototype object is copied and applied to all new 
instances of your object.
Public Methods
  // Our User object written a different way
var User = function (name) {
}
  // Add a public accessor method for name
User.prototype.getName = function () {
  return this.name;
}
  var me = new User( “Bob” );
  alert( me.getName() == “Bob” );
Private Methods
Private methods are functions that are only accessible to 
methods inside your object and cannot be accessed by 
external code.
Private Methods
  // Our User object with some changes
var User = function (name) {
  function welcome () {
    alert( “Welcome back, ” + this.name + “.”);
  }
  welcome();
}
  // Create a new User 
var me = new User( “Bob” );  // Alerts: “Welcome, Bob.”
// Fails because welcome is not a public method
me.welcome();
“Privileged” Methods
The term privileged method  was coined by Douglas 
Crockford.  It is not a formal construct, but rather a 
technique.
Privileged methods essentially have one foot in the door:
 Then can access private methods and values within the 
object
 They are also publicly accessible
“Privileged” Methods
  // Our User object with some tweaks
var User = function (name, age) {
  var year = (new Date()).getFullYear() – age;
  this.getYearBorn = function () {
    return year;
  };
};
  // Create a new User 
var me = new User( “Bob”, 28 );  
// Access privileged method to access private year value
alert( me.getYearBorn() == 1980 );
  // Fails because year is private
alert( me.year == null );
Grand Finale
Using Scope, Closures, Contexts, and what we’ve 
discussed about OOP, we can dynamically generate 
classes based on information supplied to the 
constructor.
Grand Finale
   // Our User object modified to accept an object of properties
function User (properties) {
  // Loop through properties and create getter and setter methods
  for ( var i in properties ) { function () {
    this[“get” + i] = function () {
       return properties[i];
    };
    this[“set” + i] = function (val) {
       properties[i] = val;
    };
  })(); }
}
   // Create a new user, automatically creating get and set methods
var me = new User( {
  name: “Bob”,
  age: 28
});
Grand Finale
  // …continued
// Note that name is private within properties
alert( me.name == null );
// Access privileged getname() method
alert( me.getname() == “Bob” );
// Use the dynamically generated setter 
// to change the user’s age
me.setage(21);
alert( me.getage() == 21 );
Ques@ons ?
 
References
Pro JavaScript Techniques, by John Resig
Douglas Crockford’s 
YUI Theater Presentations
• http://developer.yahoo.com/yui/theater 

Object-Oriented JavaScript: Constructors, Methods, and Context

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Object-Oriented JavaScript: Constructors, Methods, and Context

Uploaded by

Copyright:

Available Formats

Object‐Oriented

Private Privileged Public

You might also like