Over a million developers have joined DZone.

Notes on JavaScript functions and objects

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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

 

 1alert("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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}