Notes on JavaScript functions and objects

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 prototype object is the same as the value of the prototype 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 object.9

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.


Tricky huh? It was for me.

Comments:

Wow. U rock!

Posted by Kiran Aghor on April 01, 2008 at 06:46 AM PDT #

very nice drawn.

Posted by insane on April 01, 2008 at 01:50 PM PDT #

Thanks! A really useful write up.

Posted by Venky on May 31, 2008 at 11:06 PM PDT #

Post a Comment:
Comments are closed for this entry.
About

sandipchitale

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today