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.