Everything in JavaScript is an object: string, array, value, function, etc. There is no concept in JS,
But we can use JS's grammatical characteristics to create objects with the idea of class.
Original method
Copy code code as follows:
<script type = "text/javascript">
var obj = new object ();
obj.name = "koji"; // Add attributes to objects
obj.age = 21;
obj.showname = Function () {// Add method to object
Alert (this.Name);
}
obj.showage = function () {
alert (this.age);
}
obj.showname (); // koji
obj.showage (); // 21
</script>
The above method generates an object through the new keyword, and then adds the properties and methods of the characteristics of the dynamic language according to the JS.
Create an object. Among them, this is an object that calls the method.
The problem in this way is that if you need to create an object multiple times, the code needs to be repeated multiple times, which is not conducive to the reuse of the code.
Factory method
Copy code code as follows:
<script type = "text/javascript">
function createObj () {
var obj = new object (); // Create objects
obj.name = "koji";
obj.age = 21;
obj.showname = function () {
Alert (this.Name);
}
obj.showage = function () {
alert (this.age);
}
Return obj; // Return to object
}
var obj1 = createObj ();
var obj2 = createObj ();
obj1.showname (); // koji
obj2.showage (); // 21
</script>
This method improves code reuse rate, and can also change the factory method and pass the parameter assignment.
Copy code code as follows:
<script type = "text/javascript">
Function CreateObj (name, Age) {// When constructing objects, the initialization parameter can be passed
var obj = new object (); // Create objects
obj.name = name;
obj.age = Age;
obj.showname = function () {
Alert (this.Name);
}
obj.showage = function () {
alert (this.age);
}
Return obj; // Return to object
}
var obj1 = createObj ("koji", 22);
var obj2 = createObj ("luo", 21);
obj1.showname (); // koji
obj1.showage (); // 22
obj2.showname (); // Luo
obj2.showage (); // 21
</script>
Although the above method can increase the renewal rate of the code, it has a great defect compared to the concept of the object -oriented class. noodle
The relative image emphasizes the property of the object, and the method of the object is shared. And the above factory method to create the object for each other
Objects create their own selfish methods. At the same time, the same method of creating the same logic for each object is a waste of memory. Improved as follows
Copy code code as follows:
<span style = "font-size: 14px;"> <script type = "text/javascript">
Function CreateObj (name, Age) {{
var obj = new object (); // Create objects
obj.name = name;
obj.age = Age;
obj.showname = showName;
obj.showage = showage;
Return obj; // Return to object
}
Function showName () {// Function is also an object
Alert (this.Name);
}
function show () {
alert (this.age);
}
var obj1 = createObj ("koji", 22);
var obj2 = createObj ("luo", 21);
obj1.showname (); // koji
obj1.showage (); // 22
obj2.showname (); // Luo
obj2.showage (); // 21
</script> </span>
The above -mentioned function objects are defined to solve the private problems of different object holding function objects. Now all the objects are
Hold the reference to the above two functions. But in this way, the function of the object has become independent and irrelevant to the object. This and
Specific methods for object -oriented specific methods do not meet the thoughts of specific categories.
Construction function method
Copy code code as follows:
<script type = "text/javascript">
// Define a constructor to generate the corresponding object. It can analogize the constructor in Java
Function Person (name, Age) {
// When calling New Person, before executing the first line of code, a person is a PERSON object and the object is in the memory
// The index assignment is given to this keyword. At this time, you can operate the newly generated object through this keyword.
This.Name = name; // This keywords must not be less. For the current object, that is, the name attribute assignment of the object referenced by the THIS keyword
//, it is actually equivalent to adding the name property to the current object, and then assign a value to its name attribute.
this.age = Age;
this.showname = function () {// Add method to the current object
Alert (this.Name);
}
this.showage = function () {
alert (this.age);
}
// Return the current object to the variable on the left of the assignment symbol (no need to use RETURN)
}
Var obj1 = New Person ("koji", 22); // generate a person object
var obj2 = New Person ("Luo", 21);
obj1.showname (); // koji
obj1.showage (); // 22
obj2.showname (); // Luo
obj2.showage (); // 21
</script>
The method of constructing a function is the same as the factory method, and it will create an exclusive function object for each object. Of course, you can also put these functions
The object is defined outside the constructor, so that the objects and methods are independent of each other.
Prototype method: The prototype property of the object used by this method
Copy code code as follows:
script type = "text/javascript">
Function person () {} // Define a air -confined function, and cannot pass the parameters
// Give all the methods of all attributes to the prototype attribute
Person.prototype.name = "koji"; // Add attributes
Person.prototype.age = 22;
Person.prototype.showname = Function () {// Add method
Alert (this.Name);
}
Person.prototype.showage = Function () {
alert (this.age);
}
var obj1 = new person (); // generate a person object
var obj2 = new person ();
obj1.showname (); // koji
obj1.showage (); // 22
obj2.showname (); // koji
obj2.showage (); // 22
</script>
When the Person object is generated, the attributes of the prototype are assigned to the new object. Then attributes and methods are shared.
The problem of this method is that the constructor cannot be passed on, and each newly generated object has the default value. Second, the method sharing does it not be shared
Any problem, but attribute sharing is a problem, when the attribute is the object that can change the state.
Copy code code as follows:
<script type = "text/javascript">
Function person () {} // Define a air -confined function, and cannot pass the parameters
Person.prototype.age = 22;
Person.prototype.array = New Array ("Koji", "Luo");
Person.prototype.showage = Function () {
alert (this.age);
}
Person.prototype.showarray = Function () {
Alert (this.array);
}
var obj1 = new person (); // generate a person object
var obj2 = new person ();
obj1.array.push ("kyo"); // Add an element to the array attribute of Obj1
obj1.showarray (); // koji, luo, kyo
obj2.showarray (); // koji, luo, kyo
</script>
When the above code adds elements to the attribute of OBJ1 to the attribute of OBJ1, the element of the arra attribute of OBJ2 also follows
The impact is that the array property of OBJ1 and Obj2 objects quotes the same Array object, so change this array
Object, the attribute of the Array object will naturally be affected naturally
Mixed constructor/prototype method
Use the constructor to define the attributes of the object, and use prototype to define objects, so that the attribute can be achieved
Private, and method sharing.
Copy code code as follows:
<script type = "text/javascript">
Function Person (name, Age) {
this.Name = name;
this.age = Age;
this.array = new array ("koji", "luo");
}
Person.prototype.showname = Function () {
Alert (this.Name);
}
Person.prototype.showarray = Function () {
Alert (this.array);
}
Var obj1 = New Person ("koji", 22); // generate a person object
var obj2 = New Person ("Luo", 21);
obj1.array.push ("kyo"); // Add an element to the array attribute of Obj1
obj1.showarray (); // koji, luo, kyo
obj1.showname (); // koji
obj2.showarray (); // koji, luo
obj2.showname (); // Luo
</script>
After attributes are private, changing their respective attributes will not affect other objects. At the same time, the method is also shared by each object. Semantically,
This meets the requirements of face -object programming.
Dynamic prototype
Copy code code as follows:
<script type = "text/javascript">
Function Person (name, Age) {
this.Name = name;
this.age = Age;
this.array = new array ("koji", "luo");
// If the _initialized in the Person object is UNDEFINED, it indicates that it has not yet added method to the prototype of Person
ifof person._initialized == "underfined")
{{
Person.prototype.showname = Function () {
Alert (this.Name);
}
Person.prototype.showarray = Function () {
Alert (this.array);
}
Person._initialized = true; // Set to true, no need to add methods to proprope
}
}
Var obj1 = New Person ("koji", 22); // generate a person object
var obj2 = New Person ("Luo", 21);
obj1.array.push ("kyo"); // Add an element to the array attribute of Obj1
obj1.showarray (); // koji, luo, kyo
obj1.showname (); // koji
obj2.showarray (); // koji, luo
obj2.showname (); // Luo
</script>
This method is similar to the constructor/prototype. Just put the method into the constructor, while at the same time
A attribute is added to the function person to ensure that the IF statement can only be successfully executed once
The most widely used in practical applications is the constructor/prototype method. The dynamic prototype method is also very popular, it has functions and structure
The function/prototype method is equivalent. Do not use the constructor or prototype method alone.