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

Tips, tricks and tools for creating your own data-driven app, 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

 

 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.

Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}