Saturday Mar 29, 2008

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.

Monday Dec 03, 2007

Add Property module functionality in trunk

With this check in the Add Property module's functionality is available in trunk. Thanks to Jan Lahoda. The functionality is available through the Add Property popup menu in the Generate Code (Alt+Insert) popup menu in Java Editor.
 

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