JavaScript is a powerful object oriented and functional language. It supports the prototypical inheritance as opposed to the class based inheritance as supported by C++ and Java.
Read The Full Tutorial.
JavaScript is a powerful object oriented and functional language. It supports the prototypical inheritance as opposed to the class based inheritance as supported by C++ and Java. Thus there are no classes in the C++ or Java sense - only functions. The prototypical inheritance is implemented using the "prototype" property of so-called constructor functions. All this is sometimes difficult to understand. In this note I will explain in a succinct fashion the nature of functions and objects in JavaScript and visually show how it all fits together.
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:
view plaincopy to clipboardprint?
1. function f(p1, p2) {
2.
3. // p1 is alias of arguments[0]
4. // p2 is alias of arguments[1]
5. // you can access rest of the parameters using arguments[3] thru arguments[n]
6. // if f was invoked like this f(10, 20, 30, 40):
7. // the value of p1 and arguments[0] is 10
8. // the value of p2 and arguments[1] is 20
9. // the value of arguments[2] is 30
10. // the value of arguments[3] is 40
11. // the value of arguments.length is 4 i.e. four parameters were passed in
12. // the value f.length is 2 - two parameters p1 and p2 declared in function declaration
13. // the value arguments.callee is the function f itself. This works for anonymous functions also.
14. // This allows writing recursive functions even in case of anonymous functions.
15. }
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 prototypeprototype 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.9 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.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:
view plaincopy to clipboardprint?
1. function Rectangle(width, height) {
2. this.width = width;
3. this.height = height;
4. }
5.
6. var twoByFourRectangle = new Rectabgle(2, 4);
function Rectangle(width, height) {
this.width = width;
this.height = height;
}
var twoByFourRectangle = new Rectabgle(2, 4);
view plaincopy to clipboardprint?
1. +--------------------------------------+
2.
3. inherits | +---------constructor property ----+ | +----------------------------------+
4.
5. from | | | | inherits | |
6.
7. | v | v from v |
8.
9. function Function --- prototype property---> function(){} <----- function Object --- prototype property---> {constructor: Object}
10.
11. ^ ^
12.
13. inherits | +---------------------------------------+ |
14.
15. from | | | | inherits
16.
17. | v | | from(?)
18.
19. function Rectangle --- prototype property ----> {constructor: Rectangle}--+
20. ^
21.
22. inherits |
23. from |
24. |
25.
26. object twoByFourRectangle --- width property ----> 2
27. +--- height property --> 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]}'
source: css.dzone
|
Ajax Projects
