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

The apply Method

As explained in the previous page, JavaScript 1.3 includes two new methods for the Function object, call() and apply(). The apply() method is a variation on the call() method. The apply() method lets you pass the parameters from one method to the other in a different way than the call() method does it. The call() method requires the full list of parameters, as shown in the previous page:

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

The apply() method, on the other hand, lets you specify arguments on its second parameter:

exterior.apply(this, arguments);

What it means is that all of the caller's parameters are passed on to the callee. In the automobile assembly line from the previous page, the parameters of the caller (interior) are all the seven Volvo features:

intColor, seatCoverType, benchOption, extColor, doorCount, airWing, tireWidth

These parameters are passed to the callee which is the exterior() method. The parameters are passed according to their position in the list. The first caller parameter is passed to the first callee parameter, the second caller parameter is passed to the second callee parameter, and so on. Since our previous exterior() method handles only the exterior features, it is not capable of handling the seven parameters. But we can easily change it by modifying the method's parameter list to include all seven options. Here is the new exterior() method:

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

The whole script is very similar to the one presented in the previous page, except the apply's and exterior's parameters:

<HTML>
<HEAD>
<TITLE> single object constructors </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript1.3">
<!--
function exterior(intColor, seatCoverType, benchOption, extColor, doorCount,
  airWing, tireWidth ) {
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
  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 ) {
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
  this.intColor = intColor;
  this.seatCoverType = seatCoverType;
  this.bench = benchOption;
  exterior.apply(this, arguments);
}
volvo = new interior("blue", "leather", true, "black", 4, true, 15);
// -->
</SCRIPT>
</BODY>
</HTML>

Now, it is very easy to add a new station to our Volvo assembly line. Let's assume a new door station has been added, and the doorCount feature is assigned in a separate constructor method:

function doors(intColor, seatCoverType, benchOption, extColor, doorCount,
               airWing, tireWidth ) {
  this.doorCount = doorCount;
}

Of course, we have to remove this assignment from the exterior method. We have now three different stations to handle. It is only natural to call all the apply() methods from a single central automobile method:

function automobile(intColor, seatCoverType, benchOption, extColor, doorCount,
                    airWing, tireWidth ) {
  interior.apply(this, arguments);
  exterior.apply(this, arguments);
  doors.apply(this, arguments);
}

The whole script will look like this now:

<HTML>
<HEAD>
<TITLE> single object constructors </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript1.3">
<!--
function doors(intColor, seatCoverType, benchOption, extColor, doorCount,
  airWing, tireWidth ) {
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
  this.doorCount = doorCount;
}
function exterior(intColor, seatCoverType, benchOption, 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.apply(this, arguments);
  doors.apply(this, arguments);
}
function automobile(intColor, seatCoverType, benchOption, extColor, doorCount,
                    airWing, tireWidth ) {
  interior.apply(this, arguments);
  exterior.apply(this, arguments);
  doors.apply(this, arguments);
}
volvo = new automobile("blue", "leather", true, "black", 4, true, 15);
// -->
</SCRIPT>
</BODY>
</HTML>

The object-oriented structure of the script makes it easier to add more stations. Also notice that adding an automobile feature requires the extension of all parameter lists by one.

Created: September 28, 1998
Revised: October 1, 1998

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

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

The apply Method

Find a programming school near you