spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column26


The call Method

Developer News
ActiveState Debuts Open Source Business Suite
Salesforce Offers Visual App Builder
Codesion Steps Out From CVS's Shadow

JavaScript 1.3 includes two new methods for the Function object, call() and apply(). Normally, two different methods expect two different objects. this object in one method is different from this object in the other one. The call method allows you to share the same object between any number of methods. You do it by calling one method from the other, and passing the object as a parameter.This capability enables you to do a multi-method object construction. In JavaScript 1.2 you could construct an object only within a single method. JavaScript 1.3 extends object construction to any number of methods.

We use an automobile assembly line to demonstrate the usage of the call() method. Suppose we have two stations in this line, the Exterior and the Interior ones. Each station is responsible to assign different attributes of the assembled car. Here is the Interior Station method, assigning the interior color (a string), the seat cover type (a string), and the bench type (a boolean):

function interior(intColor, seatCoverType, benchOption) {
  this.intColor = intColor;
  this.seatCoverType = seatCoverType;
  this.bench = benchOption;
}

Here is the Exterior Station method, assigning the exterior color (a string), the door count (an integer), the air wing option (a boolean), and the tire width (a boolean):

function exterior(extColor, doorCount,  airWing, tireWidth) {
  this.extColor = extColor;
  this.doorCount = doorCount;
  this.airWing = airWing;
  if (tireWidth > 10)
    this.wideTire = true;
  else
    this.wideTire = false;
}

The two-line script constructs two different objects, volvoInterior and volvoExterior. Here is the full script including the methods above:

<HTML>
<HEAD>
<TITLE> two-object constructors </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
function exterior(extColor, doorCount,  airWing, tireWidth) {
  this.extColor = extColor;
  this.doorCount = doorCount;
  this.airWing = airWing;
  if (tireWidth > 10)
    this.wideTire = true;
  else
    this.wideTire = false;
}

function interior(intColor, seatCoverType, benchOption) {
  this.intColor = intColor;
  this.seatCoverType = seatCoverType;
  this.bench = benchOption;
}
volvoInterior = new interior("blue", "leather", true);
volvoExterior = new exterior("black", 4, true, 15);
// -->
</SCRIPT>
</BODY>
</HTML>

In JavaScript 1.3, you can combine the two objects and construct a single volvo object with all seven properties still assigned in two different methods. The new call method allows you to call the exterior() method from inside the interior() one. Of course, you have to pass all parameters to the interior() method, and then pass the exterior ones onto the exterior() method:

function interior(intColor, seatCoverType, benchOption, extColor, doorCount,  
                  airWing, tireWidth ) {
  this.intColor = intColor;
  this.seatCoverType = seatCoverType;
  this.bench = benchOption;
  exterior.call(this, extColor, doorCount,  airWing, tireWidth);
}

Notice the call to the call() method. The first parameter is this object, followed by the arguments expected by the exterior() method:

exterior.call(this, extColor, doorCount,  airWing, tireWidth);

The exterior() method remains untouched. Here is the single-line-body script, including the methods above:

<HTML>
<HEAD>
<TITLE> single object constructors </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript1.3">
<!--
function exterior(extColor, doorCount,  airWing, tireWidth) {
  this.extColor = extColor;
  this.doorCount = doorCount;
  this.airWing = airWing;
  if (tireWidth > 10)
    this.wideTire = true;
  else
    this.wideTire = false;
}

function interior(intColor, seatCoverType, benchOption, extColor, doorCount,  
                  airWing, tireWidth ) {
  this.intColor = intColor;
  this.seatCoverType = seatCoverType;
  this.bench = benchOption;
  exterior.call(this, extColor, doorCount,  airWing, tireWidth);
}

volvo = new interior("blue", "leather", true, "black", 4, true, 15);

// -->
</SCRIPT>
</BODY>
</HTML>

Notice the advantage of the call() method. It allows you to construct a single object (volvo in this example), via a multitude of methods, instead of a single one in JavaScript 1.2. In an object-oriented environment, it is very important to separate between unrelated entities. In the example above, it is important to keep the interior() method separate from the exterior() one, and having one object being built consecutively by two different methods is a real advantage.

http://www.internet.com


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Use Web Caching to Make Your Web Site Faster · Creating an Online Shopping Cart Mechanism in PHP · Log JavaScript Errors Using an AJAX-driven Web Service
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Configuring Granular Settings for a Database Level Audit · The Perils of a Web 2.0 Transition on Your Business Processes · Facebook Redesigns Site —Again — Nears 400M Mark


Created: September 28, 1998
Revised: September 28, 1998

URL: http://www.webreference.com/js/column26/call.html