JavaScript 1.3 Overview, Part II: The call Method - Doc JavaScript

The call Method

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.

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

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

JavaScript 1.3 Overview, Part II: The call Method - Doc JavaScript

The call Method

Find a programming school near you