Notes on JavaScript functions and objects

Notes on JavaScript functions and objects

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.5
    * The value of constructor property of a function is function Function6 that is because the hidden super instance of a function is the value of the prototype property of function Function.7

execution context

    * While a function executes there is a special variable arguments holds the actual arguments that were passed in when the function was invoked.
    * While a function executes there is a special variable arguments 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.
    * 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.

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.