Javscript object-oriented learning notes (1)

1. Basic constructor and property

<! -- Script>
/// Note the following points in this example:
// 1. The parameter passed in by Schedule must be of the array type. If it is only a Lecture instance, the Length is undefined.
// 2. In this example, the display () method is copied in the book. No parentheses are written. If no parentheses are written, the source code of the function display is displayed.

// Lecture class Constructor
// Use name and teacher
Function Lecture (name, teacher ){

// Save the parameter as a local attribute
This. name = name;
This. teacher = teacher;
}

// Method of the Lecture class, used to generate a string that displays the Lecture Information
Lecture. prototype. display = function (){

Return this. teacher + "is teachering" + this. name;
};

// The constructor of the Schedule class. The course array is used as the parameter.
Function Schedule (lecture ){

This. lectures = lecture;

}

// Construct a string to indicate the course schedule
Schedule. prototype. display = function (){

Var str = '';

If (this. lectures. length = undefined ){

Return this. lectures. display ();
}

// Traverse each course and create a string containing their information

 

For (var I = 0; I <this. lectures. length; I ++ ){
Str + = this. lectures [I]. display () + "";

}

Return str;

};

// Var lecture = new Lecture ("Xiao Long", "");
//// Alert (lecture. display ());

// Var schedule = new Schedule (lecture );
// Alert (schedule. display ());

Var lecture = new Lecture ("Xiao Long", "Mr. Tome ");

Var schedule = new Schedule (lecture );
Alert (schedule. display ());

</Script -->

**************************************** ***********************************

2. event handling

 

<! -- Script>

 

Window. onload = function (){
Var li = document. getElementsByTagName ("li ");
For (var I = 0; I <li. length; I ++ ){

Var temp = li [I];

Temp. style. border = "1px solid red ";

/// The following js error is reported: The parentNode of temp is empty.
Temp. onclick = function (temp ){

Temp. parentNode. removeChild (temp );

};

/// The following section will only be executed once during execution. I can click which li will delete the last li
Temp. onclick = function (temp ){

Temp. parentNode. removeChild (temp );

};

 

}

/// Delete a DOM, but you still don't understand how the click Event in jquery is created. In this way, you can edit the table.
SetTimeout (function (){

Var delDom = document. getElementById ("div1 ");
DelDom. parentNode. removeChild (delDom );
},10000 );

 

};

</Script -->

<! -- Script>

Window. onload = function (){

Var li = document. getElementsByTagName ("li ");
For (var I = 0; I <li. length; I ++ ){

Li [I]. onmouseenter = function (){

This. style. backgroundColor = 'black ';
};

Li [I]. onmouseleave = function (){

This. style. backgroundColor = 'white ';

};

// The onmouseenter and leave priorities must be higher. I dont know.

// The backgroundColor must be case sensitive.
Li [I]. onmouseover = function (){
This. style. backgroundColor = 'blue ';

};

Li [I]. onmouseout = function (){
This. style. backgroundColor = 'red ';

};

 

// Onclick correction. here this is the event initiator. Conjecture.

Li [I]. onclick = function (){

This. parentNode. removeChild (this );
};

<Script -->

**************************************** ******************

3. Reference Type

<! -- Script>

/// Reference type

Var arrNumbers = new Array ("one", "two", "three ");

Var arrNumbersRef = arrNumbers;

ArrNumbersRef. push ("four ");

Var NumberClass = function (arrNumbers ){

This. Numbers = arrNumbers;

};

NumberClass. prototype. display = function (){

For (var I = 0; I <this. Numbers. length; I ++ ){

Alert (this. Numbers [I]);

}

};

Var NumberInstance = new NumberClass (arrNumbers );

NumberInstance. display ();

//// // The split line is the same as that of C #. The string is of a special reference type.

Var str1 = "one ";

Var str2 = str1;

Str1 + = ", two ";

Alert (str1 = str2 );

</Script -->

4. Function overloading and type check

<! -- Script>

// Function overload and type check

// Parameters determined by arguments.

Function sendMessage (msg, obj ){

If (arguments. length = 2 ){

Obj. handleMsg (obj. name, msg );

}

Else {return false ;}

}

SendMessage ("Hello, World ");

// The object is represented by a Json class group. I don't know. I want to play cards. I don't want to write it.

SendMessage ("Hello, World", {handleMsg: function (name, message ){

Alert (name + "Send message" + message );

}, Name: "Xiao Wang"

});

</Script -->

************* ********

5. type check and a small example convert to an array

<Script>

/// Convert any object into an array

Function makeArray (){

Var arr = [];

For (var I = 0; I <arguments. length; I ++ ){

Arr. push (arguments [I]);

}

Return arr;

}

Var strArray = makeArray ("John ");

Alert (strArray. length );

// Type determination under the split line

Function message (){

This. display = function (){

// After instantiation, the msg here is not undefined and is null; if this attribute is not added, it is undefined.

// This is proved by practice. If the msg in this class is null after it is instantiated, undefined. C # Is null when it is not added.

// Or

// If (typeof this. msg = 'undefined ')

// The book says that the constructor below can be used, but the prompt is blank when I use it .. I don't know. write down it first. generally, you can use typeof or a value to determine it.

If (this. msg. constructor! = String ){

// If (this. msg = undefined ){

Alert ("correct ");

Return true;

}

Alert (this. msg );

Return false;

};

}

Var msg = new message ();

Msg. msg = "hello ";

Msg. display ();

Var msg2 = new message ();

Msg2.display ();

</Script>

***********************************

6. The Javascript privileged method is equivalent to the dynamic generation of this method.

<! -- Script>

Function User (properties ){
For (var I in properties ){
(Function (which ){

Var p = I;
Which ["get" + p] = function (){
Return properties [p];

};

Which ["set" + p] = function (val ){

Properties [p] = val;
};

}) (This );

}

}

// Pass the value
Var user = new User ({name: "bob", age: "44 "});

// The user. name is empty and is a private variable.
Alert (user. name = null );
<Script -->

 

<! -- Script>

Function Person (name ){

This. name = name;
}

Person. prototype. getName = function (){
Return this. name;
};

Function User (name, password ){
This. name = name;
This. password = password;

}

User. prototype = new Person ();

User. prototype. getPassword = function (){
Return this. password;

};

// A simple helper function allows you to bind a new function to the prototype of the object.
Function. prototype. method = function (name, func ){
This. prototype [name] = func;
Return this;

};

// A very complex function that allows you to easily inherit functions from other objects
// You can still call the functions of the parent object.
Function. method ("inherits", function (parent ){
// Record the level of the parent level
Var depth = 0;

Var proto = this. prototype = new parent ();

// Create a new special function named 'uber'
// When calling it, it will execute the function that is overwritten during the inheritance.
This. method ('uber ', function uber (name ){});

 

});

</Script -->