Java Web Learning-js face object programming notes (Miscellaneous)

JS Object-Oriented Programming learning notes

Javascrpt does not contain Class (class)So some people call the classPrototype object. The two concepts play the same role in programming.

We only use JavaScript as a functional language, and only use it for some simple front-end data input verification and some simple page dynamic effects. In many excellent Ajax frameworks, such as extjs and jquery, the face Object Features of JavaScript are widely used. The ext technology and advanced features of JavaScript must be used, we must fully grasp the characteristics of facial objects.

 

Differences and relationships between classes (prototype objects) and objects:

(1) class is abstract, concept, representing a class of things;

(2) objects are specific and represent an object;

(3) An object is created using a class (prototype object) as a template.

Example:

<SCRIPT>

Functioncat () {// constructor defines a class

}

Varcat1 = new CAT (); // Here cat is a class, and cat1 is an object

Cat1.name = ""; // attributes of objects in JS can be dynamically added. There is no restriction on attributes of object instances.

Cat1.age = "3 ";

Cat1.color = "white ";

Window. Alert (cat1.name );

</SCRIPT>

 

Five ways to create an object:

1. Factory method-use new object to create an object and add attributes (as shown above );

2. Use constructors to define classes;

3. Use prototype;

4. constructor and prototype hybrid mode;

5. dynamic prototype.

 

Determines whether an object is of a certain type;

Example: If (A instanceof person ){

Window. Alert ("A is peason ");

}

If (A. constructor = person ){

Window. Alert ("A is peason ");

}

 

 

 

 

 

Differences between functions with/without VaR

VaR abc = 89; // global variable

Function Test (){

VaR abc = 900;

}

Test ();

Window. Alert (ABC)

The result is 89, abc = 900, and 900;

 

There are two methods to access object attributes:

(1) Common method: Object Name. attribute name

(2) Dynamic Access: object name ["attribute name"]

 

Functionperson (){

}

VaR A = new person ();

A. Age = 10;

A. Name = "James ";

VaR B =;

B. Name = "";

Window. Alert (B. Age + B. Name + A. Name );

Result: 10 Tom

 

 

This-necessary question:

After creating an object, you want the object to automatically own the attributes of the class:

Example 1: function person (){

}

Varp1 = new person ();

P1.name = "ABC ";

P1.age = 60;

Window. Alert (p1.name + "" + p1.age );

Varp2 = new person ();

Window. Alert (p2.name); output: ABC 60/undefined

 

Changed to: functionperson (){

This. Name = "ABC ";

This. Age = 60;

}

VaR p1 = new person ();

Window. Alert (p1.name + "" + p1.age); // P1 and P2 have their own space in the memory.

VaR P2 = new person ();

Window. Alert (p2.name + "" + p2.age); output: ABC 60/ABC 60

 

Example 2: function person (){

Varname = "ABC ";

Varage = 60;

This. Show = function (){

Window. Alert (name + "" + age); // This is a public method of the person class

}

Function show2 (){// This is a private method of the person class and can only be used in the person class

Window. Alert (name + "" + age );

}

}

Varp1 = new person ();

P1.show ();

P1.shoew2 (); // an error is reported.

 

 

You can use the method of the current window object as a function. For example, you can only write alert () without writing window. Alert ().

Which object instance calls the function of this, then this indicates which object instance

For example, VAR v = 90;

Function person (){

This. ABC = fnction (){

Window. Alert (this. V); // output hello

}

}

VaR P = new person ();

P. v = "hello ";

P. ABC (); // object P calls the function of this, so this represents the P object instance.

Window. Alert (this. V); // output 90. Because window calls the function of this, this indicates window object instance v = 90;

 

 

 

Object-member functions (methods)

For example, we hope that the object will not only have attributes, but also behavior (the behavior is reflected by functions in the program)

Example 1; function person (name, age ){

This. Name = Name;

This. Age = age;

This. Show = function (){

Document. Write ("name =" + this. Name );

}

This. Calculate = function (n ){

Varres = 0;

For (vari = 0; I <= N; I ++)

Res + = I;

Returnres;

}

}

Varp1 = new person ("Zhang San", 18 );

P1.show ();

Document. Write ("<br/>" + p1.calculate (11 ));

 

Example 2: Add a specified function to an object (add a function dynamically)

Functionperson (){

This. Name = "def ";

This. Age = 900;

}

VaR p1 = new person ();

P1.abc = functionshow1 (){// Add the specified function show1 () to the object ABC ();

Window. Alert ("hello" + this. Name );

}

P1.abc (); // indirect function show1

Or in Example 1:Varp1 = new person;

P1.abc = show;

P1.abc ();

 

Example 3:

Functiondog (){

}

VaR dog1 = newdog ();

Dog1.shout = founction (){

Window. Alert ("puppy ");

}

Dog1.shout ();

VaR dog2 = new dog (){

}

Dog2.shout (); // an error is reported here.

 

Functiondog (){

}

VaR dog1 = new dog ();

Dog.Prototype. Shout = function () {// share all object instances

Window. Alert ("puppy ");

}

Dog1.shout ();

VaR dog2 = new dog ()

Dog2.shout (); // here you can

Note: dog1 = dog2, the two addresses are equal (not equal if no prototype exists)

Example 4.1:

VaR I = 10;

Dog. Prototype. Add = function (a) {// Add a method to the class

Returnthis +;

}

Window. Alert (I. Add (10). Add (30); // 10 + 10 + 30 = 50

 

 

Directly create an object using an object:

Objects are the base classes of all JavaScript classes. They provide a simple way to create custom objects without the need for programmers to define constructors:

Example 1: functionperson (){}

VaR p1 = new person ();

P1.name = "Yb ";

Can be written as: var p1 = new object ();

P1.name = "Yb ";

 

Example 4.2: the constructor find (VAL) is used to determine whether there is an item Val in the array and return the subscript of the array. Otherwise,-1 is returned;

VaR arr = new array (3 );

Arr [0] = "ABC ";

Arr [1] = "def ";

Arr [2] = "Ghi ";

Array. Prototype. Find = function (VAL ){

For (vari = 0; I <this. length; I ++)

If (this [I] = Val ){

ReturnI;

}

Return-1;

}

Window. Alert (ARR. Find ("def "));

 

The object class has many attributes and functions: for example

Main attributes: constructor: object constructor; window. Alert (XX. constructor );

Prototype: Obtain the prototype object of the class. Static Property;

Main method: hasownproperty (property): whether it belongs to the attribute defined in this class;

Isprototypeof (object): whether it is the prototype of the specified class;

Propertylsenumerable (property): whether to enumerate attributes;

Tostring () returns the string corresponding to the object

Valueof () returns the original type value corresponding to the object

 

 

Variable parameters:

JS does not have function overloading similar to that in Java;

Example 1: functiontest (){

Window. Alert ();

}

Functiontest (a, B ){

Window. Alert (a + "" + B );

}

Test (23 );

The result is to directly identify the last function and get 23 undefined.

 

Example 2: function ABC (){

VaR S = 0;

For (vari = 0; I <Arguments. Length; I ++ ){

S + = arguments [I];

}

Return S;

}

Window. Alert (ABC (1, 2); // 3

Window. Alert (ABC (7,8, 9); // 24

 

 

When initializing an object's property value, you can also specify the function property:

Example: function calculate (X, Y, c ){}

Function person (name, age, fun ){

This. Name = Name;

This. Age = age;

This. myfun = fun;

}

VaR p1 = new person ("AA", "P", "Calculate ");

Window. Alert (p1.myfun (178, "+"); // The result is.

 

Another method of creating objects and instances (for more information );

For example, VAR dog = {Name: "", age: 5,

Fun1: function () {window. Alert ('hello, World ');}

Fun2: function () {window. Alert ('OK ');}

};

 

 

 

 

A Traversal method in JS: For (var key in object name)

For example, VAR dog =

{Name: 'White ', sayhello: function (a, B) {window. Alert ("result =" + (a + B ));}};

For (var key in dog ){

Window. Alert (DOG [Key]);

} Get: Xiaobai

Sayhello: function (a, B) {window. Alert ("result =" + (A + B ));}

 

 

Closure(Associated with the garbage collection mechanism)

Example: function (){

Vari = 0;

Window. Alert ("OK ");

Functionb (){

Window. Alert ("ok2 ");

Window. Alert (I ++ );

}

Returnb;

}

A (); // because of the garbage collection mechanism (gabagecycle), after function a is called, the space of I is recycled and function B () is not executed ();

A ();

Output: OK

 

If: var c = ();

C ();

C (); Output OK ok2 0 OK ok2 2 OK ok2 3