JavaScript Object-oriented support (1)

javascript| objects

================================================================================
Qomolangma Openproject v0.9

Category: Rich Web Client
Key words: JS oop,js framwork, Rich Web client,ria,web Component,
Dom,dthml,css,javascript,jscript

Project launch: Aimingoo (aim@263.net)
Project team: Aimingoo, Leon (pfzhou@gmail.com)
Contributors: Jingyu (zjy@cnpack.org)
================================================================================

Eight, JavaScript object-oriented support
~~~~~~~~~~~~~~~~~~
Few people have systematically analyzed the object-oriented nature of JavaScript. I hope that the next word will let you know
The least known aspect of a language.

1. Types in JavaScript
--------
Although JavaScript is an object-based language, objects (object) are not the first type in JavaScript. Js
is a language that functions as the first type. In this way, not only because the functions in JS have a letter in the high-level language
The various characteristics of the number, but also because in JS, object is also implemented by the function. --On this point, you can
The "Structure and destructor" section of the following article shows a further explanation.

JS is a weak type, his built-in type is simple and clear:
---------------------------------------------------------
Undefined: Not defined
Number: Numbers
Boolean: Boolean value
String: Strings
Function: Functions
Object: Objects

1). Undefined type
========================
In IE5 and the following versions, any action on undefined other than direct assignment and typeof () will cause
Abnormal. If you need to know whether a variable is undefined, you can only use the typeof () method:
<script>
var V;
if (typeof (v) = = ' undefined ') {
// ...
}
</script>

However, in IE5.5 and above versions, undefined is an implemented system reserved word. So you can use undefined to
Comparisons and operations. A simpler way to detect whether a value is undefined is to:
<script>
var V;
if (v = = undefined) {
// ...
}
</script>

So in order for the core code to be (partially) compatible with IE5 and earlier versions, a line of code in the Romo core unit is used to
"Declare" a undefined value:
//---------------------------------------------------------
Code from Qomolangma, in Jsenhance.js
//---------------------------------------------------------
var undefined = void null;

The one line of code that needs to be explained is the application of the void statement. Void indicates that the following statement is executed, and
Ignore return value ". Therefore, after void, any "single" statement that can be executed can occur. And the result of the execution is
Undefined Of course, if you want, you can also "define undefined" with one of the following code.
//---------------------------------------------------------
1. A more complex method that uses an anonymous null function to perform a return
//---------------------------------------------------------
var undefined = function () {} ();

//---------------------------------------------------------
2. A more concise, but not easy to understand approach to code
//---------------------------------------------------------
var undefined = void 0;

Void can also be used like a function, so void (0) is also legal. Sometimes, some complex statements can be
Use the keyword form of void, and you must use a function form of void. For example:
//---------------------------------------------------------
Must use complex expressions in void () Form
//---------------------------------------------------------
void (I=1); Or the following statement:
void (I=1, i++);

2). Number Type
========================
JavaScript always handles floating-point numbers, so it doesn't have a constant like the Maxint in Delphi, but it has this
Sample two definitions of constant values:
Number.MAX_VALUE: Returns the maximum number of words that JScript can express. approximately equal to 1.79E+308.
Number.min_value: Returns the number of JScript closest to 0. approximately equal to 2.22E-308.

Because there is no integral type, so in some operations about CSS and Dom properties, if you expect the value to be an integer 2,
You might get a string of "2.0"--or something like this. In this case, you may need to use
The parseint () method to the Global object (Gobal).

There are two other properties in the Global object (Gobal) that are related to the operation of the number type:
Nan: The result of an arithmetic expression is not a number, then a Nan value is returned.
Infinity: A larger number than the Max_value.

If a value is Nan, then he can detect it through the isNaN () method of the Global object (Gobal). Two Nan however
Values are not mutually equal. The following example:
//---------------------------------------------------------
Operation and detection of Nan
//---------------------------------------------------------
Var
V1 = ten * ' A ';
V2 = ten * ' A ';
Document.writeln (isNaN (v1));
Document.writeln (isNaN (v2));
Document.writeln (v1 = = v2);

The Infinity of Global Objects (Gobal) represents a larger value than the maximum number (Number.MAX_VALUE). In JS,
Its value in mathematical operations is the same as that of positive infinity. In some practical skills, it can also be used to make a
Boundary detection for sequence of arrays.

INFINITY is defined as positive_infinity in the Number object. In addition, negative infinity is also determined in number
Yi:
Number.POSITIVE_INFINITY: A value larger than the maximum positive number (Number.MAX_VALUE). Positive infinity.
Number.negative_infinity: A value that is smaller than the minimum negative number (-number.max_value). Negative infinity.

Unlike Nan, two Infinity (or-infinity) are mutually equal. The following example:
//---------------------------------------------------------
Operation and detection of infinity
//---------------------------------------------------------
Var
V1 = Number.MAX_VALUE * 2;
V2 = Number.MAX_VALUE * 3;
Document.writeln (v1);
Document.writeln (v2);
Document.writeln (v1 = = v2);

Other methods associated with the number type in global are:
Isfinite (): Returns False if the value is nan/positive infinity/negative infinity, otherwise returns true.
Parsefloat (): Takes a floating-point number from a string (the prefix part). Returns nan if unsuccessful.

3). Boolean type
========================
Slightly

4). String type
========================
The string type in JavaScript is inherently nothing special, but JavaScript is designed to accommodate
"Browser-implemented hypertext environment", so it has some strange methods. For example:
Link (): Puts a hyperlink label with the href attribute <A> the text at both ends of the string object.
Big (): Put a pair of <big> labels on both ends of the text in a string object.
The following methods are similar to this:
Anchor ()
Blink ()
Bold ()
Fixed ()
FontColor ()
FontSize ()
Italics ()
Small ()
Strike ()
Sub ()
SUP ()

In addition, the main complexity of string comes from the ubiquitous ToString () in JavaScript
Method. This is also a very important way for JavaScript to provide a browser environment. For example, we
Declare an object, but use Document.writeln () to output it, what will be displayed in IE?

The following example illustrates this problem:
//---------------------------------------------------------
Application of toString ()
//---------------------------------------------------------
Var
s = new Object ();

s.v1 = ' Hi, ';
S.v2 = ' test! ';
Document.writeln (s);
Document.writeln (S.tostring ());

s.tostring = function () {
return s.v1 + s.v2;
}
Document.writeln (s);

In this example, we see that when an object is not declared (overwritten) by its own ToString () side
method, the Java Script is invoked when it is used as a string type (for example, when it is Writeln).
The Environment default ToString (). Conversely, you can redefine JavaScript to understand this object
The method.

Many JavaScript frameworks take advantage of this feature when implementing the "template" mechanism. For example
They use this to define a FontElement object:
//---------------------------------------------------------
Simple principle of using ToString () to implement template mechanism
//---------------------------------------------------------
function FontElement (InnerHTML) {
This.face = ' song body ';
This.color = ' red ';
More ...

var ctx = InnerHTML;
this.tostring = function () {
Return ' <font face= ' + this.face + ' "color=" ' + This.color + ' "> '
+ CTX
+ ' </FONT> ';
}
}

var obj = new FontElement (' This is a test. ');

Notice how the following line of code is written
Document.writeln (obj);

5). function type
========================
JavaScript functions have many features that, in addition to the object-oriented part (which is described later), are
A number of unique features have been applied widely.

First, each function in JavaScript can hold a arguments object in the calling process. This one
The object is created by the script interpretation environment, and you have no other way to create a arguments object of your own.

Arguments can be viewed as an array: It has a length property and can be passed through the arguments[n]
To access each parameter. However, it is most important that the callee attribute can be used to get the execution
A reference to a function object.

The next question becomes interesting: The function object has a caller property that points to the current
A reference to a function's parent function object.

--we've seen that we can iterate through the Callee/caller in JavaScript, through the execution
Call stack for the period. Since arguments is actually a property of a function, we are actually
The parameters of each function that can traverse the call stack on the execution period. The following code is a simple example:

//---------------------------------------------------------
Traversal of the call stack
//---------------------------------------------------------
function Foo1 (v1, v2) {
Foo2 (v1 * 100);
}

function Foo2 (v1) {
Foo3 (v1 * 200);
}

function Foo3 (v1) {
var foo = Arguments.callee;
while (foo && (foo!= window)) {
Document.writeln (' Call parameter:<br> ', '---------------<br> ');

var args = foo.arguments, argn = args.length;
for (var i=0; i<argn; i++) {
Document.writeln (' args[', I, ']: ', args[i], ' <br> ');
}
Document.writeln (' <br> ');

Previous level
foo = Foo.caller;
}
}

Run Tests
Foo1 (1, 2);

2. JavaScript Object-oriented support
--------
In the previous example, the type declaration and instance creation of type object were already mentioned.
In JavaScript, we need to declare our object type through a function:
//---------------------------------------------------------
Form code for type declarations of objects in JavaScript
(In future Documents, "object names" are usually replaced with MyObject)
//---------------------------------------------------------
function object name (parameter table) {
this. property = initial value;

this. Method = function (method parameter table) {
Method implementation Code
}
}

We can then create an instance of this object type by using this code:
//---------------------------------------------------------
Create a formal code for an instance
(In future documents, "instance variable names" are usually substituted with obj)
//---------------------------------------------------------
var instance variable name = new object name (parameter table);

Let's look at some concrete implementations and strange features of "objects" in JavaScript.

1. Functions in JavaScript in the object-oriented mechanism of the five-weight identity
------
Object name--such as MyObject ()--this function acts as the following language roles:
(1) Ordinary function
(2) Type declaration
(3) The implementation of the type
(4) class reference
(5) The constructor of the object

Some programmers (such as Delphi programmers) are accustomed to separating type declarations from implementations. For example in Delphi
, the interface section is used to declare a type or variable, and the implementation section is used for writing types
Implementation code, or some function, code flow for execution.

But in JavaScript, the declaration of a type is mixed with the implementation. The type of an object (class)
Declared by a function, this.xxxx indicates the properties or methods that the object can have.

This function is also a "class reference." In JavaScript, if you need to identify an object
Specific type, you need to hold a "class reference". --and, of course, the name of the function
Word. Instanceof operator is used to identify the type of an instance, let's take a look at its application:
//---------------------------------------------------------
Type recognition of objects in JavaScript
Syntax: object instance instanceof class reference
//---------------------------------------------------------
function MyObject () {
This.data = ' test data ';
}

Here MyObject () is used as a constructor
var obj = new MyObject ();
var arr = new Array ();

Here MyObject is used as a class reference
Document.writeln (obj instanceof MyObject);
Document.writeln (arr instanceof MyObject);

================
(To be continued)
================
What's Next:

2. JavaScript Object-oriented support
--------

2). The realization of reflection mechanism in JavaScript
3. This and with the use of the keyword
4). Operation using in keyword
5. Operations using the INSTANCEOF keyword
6. Other keywords related to object-oriented

3. Structure and Deconstruction

4. Instance and instance references

5. Prototype problem

6. Context of function

7. Object type checking problem