Notes on JavaScript functions and objects

functions

static (or definition) context

• All functions have a property named prototype.¹ The value of prototype is an object² with a property named constructor.³ The value of constructor is the function itself.⁴
• All functions have a property called length which specifies the expected number of parameters as declared in function signature.⁵
• The value of constructor property of a function is the function Function⁶. That is because, the hidden super instance of a function is the value of the prototype property of the function Function.⁷

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.⁸
  
• 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.⁹

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.¹⁰ The value of constructor is the function Object.¹¹
• 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.

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]}'

Tricky huh? It was for me.