Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Notes on JavaScript functions and objects

DZone's Guide to

Notes on JavaScript functions and objects

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

JavaScript is a powerful object oriented and functional language. It supports the prototypical inheritance as opposed to the class based inheritance as supported by C++ and Java. Thus there are no classes in the C++ or Java sense - only functions. The prototypical inheritance is implemented using the "prototype" property of so-called constructor functions. All this is sometimes difficult to understand. In this note I will explain in a succinct fashion the nature of functions and objects in JavaScript and visually show how it all fits together.

Functions


static (or definition) context

  • All functions have a property named prototype.1 The value of prototype is an object2 with a property named constructor.3 The value of constructor is the function itself.4
  • All functions have a property called length which specifies the expected number of parameters as declared in function signature.5
  • The value of constructor property of a function is the function Function6. That is because, the hidden super instance of a function is the value of the prototype property of the function Function.7


execution context

  • While a function executes there is a special variable arguments that holds the actual arguments that were passed in when the function was invoked.
  • While a function executes there is a special variable arguments which is of type Arguments which is an array-like object with a property length which gives the number of actual parameters passed in during invocation.
  • The formal parameter names are really aliases of arguments object's indexed properties indexed by the ordinal number of the formal parameter.
  • While a  function executes there is a special variable arguments.callee holds a reference to the function object itself. Thus  arguments.callee.length gives us the number of expected parameters.
For example:

function f(p1, p2) {

// p1 is alias of arguments[0]
// p2 is alias of arguments[1]
// you can access rest of the parameters using arguments[3] thru arguments[n]
// if f was invoked like this f(10, 20, 30, 40):
// the value of p1 and arguments[0] is 10
// the value of p2 and arguments[1] is 20
// the value of arguments[2] is 30
// the value of arguments[3] is 40
// the value of arguments.length is 4 i.e. four parameters were passed in
// the value f.length is 2 - two parameters p1 and p2 declared in function declaration
// the value arguments.callee is the function f itself. This works for anonymous functions also.
// This allows writing recursive functions even in case of anonymous functions.
}

Function function


static (or definition) context

  • Function being a function has a property named prototype. The value of prototype is an anonymous function function(){} with a property named constructor. The value of constructor is the function Function.
  • The value of constructor property of function Function is function Function. That is because the hidden super instance of a function is the value of the prototype property of function Function.


objects such as {} or new Object()

  • The constructor of an object such as {} or new Object{} of course is function Object.8
  • All objects inherit properties from a hidden super instance - the prototype object. The prototypeprototype property of function which was used to create the object using the new operator. Note: objects do not have a property named prototype.
  • The inherited properties behave in a copy-on-set manner.
  • All objects inherit a property named constructor from their hidden super instance - the prototype.9 object


Object function


static (or definition) context

  • Object being a function has a property named prototype. The value of prototype is an anonymous object {} with a property named constructor.10 The value of constructor is the function Object.11
  • The value of constructor property of function Object is function Function. That is because the hidden super instance of a function is the value of the prototype property of function Function.

Let us say we have code like this:

function Rectangle(width, height) { 
this.width = width;
this.height = height;
}

var twoByFourRectangle = new Rectabgle(2, 4);

 

           +--------------------------------------+                                                                                  

inherits | +---------constructor property ----+ | +----------------------------------+

from | | | | inherits | |

| v | v from v |

function Function --- prototype property---> function(){} <----- function Object --- prototype property---> {constructor: Object}

^ ^

inherits | +---------------------------------------+ |

from | | | | inherits

| v | | from(?)

function Rectangle --- prototype property ----> {constructor: Rectangle}--+
^

inherits |
from |
|

object twoByFourRectangle --- width property ----> 2
+--- height property --> 4

 

 1 alert("prototype" in Rectangle);  => 'true' 
 2  alert(Rectangle.prototype);  => '[object Object]'
 3  alert("constructor" in Rectangle.prototype);  => 'true'
 4  alert(Rectangle.prototype.constructor);  => '[function Rectangle]'
 5   alert(Rectangle.length);  => '2'
 6  alert(Rectangle.constructor)  => 'function Function() {[native code]}'
 7  alert(Rectangle.constructor.prototype)  => 'function(){}'
 8  alert({}.constructor);  => 'function Object() {[native code]}'
 9  alert("constructor" in {});   => 'true'
 10  alert(Object.prototype);  => '[object Object]'
 11  alert(Object.prototype.constructor);  => 'function Object() {[native code]}'

TIP: You can evaluate expressions like the above in the Firefox's Tools:Error Console's Evaluate text field.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}