JavaScript Study Notes (6)

Source: Internet
Author: User

I. Factory method
Self-understanding: To create instances with many objects, these instances have the same attributes but different attribute values. In this case, you need to create a factory function ).
Factory function: Creates and returns objects of a specific type.
If an attribute in a factory function is a method, you can define the object method outside the factory function, and then point to this method through the attribute, so that you can avoid calling your own attribute method every time, in this way, each object shares the same function.
Example:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
// Method for defining objects outside the factory function
Function ShowNameFn (){
Alert (this. Name );
}
// Create an object in factory Mode
Function CreatBOFn (sName, iAge, bSex ){
Var BO = new Object ();
BO. Name = sName;
BO. Age = iAge;
BO. Sex = bSex;
BO. ShowName = ShowNameFn; // This attribute is actually a pointer to a function and is a method
Return BO;
}
// Button test call
Function FactoryCreateFn (){
Var oPerson1 = CreatBOFn ("James", 18, true); // The method used to create an instance is actually called directly.
OPerson1.ShowName ();
}
</Script>

Summary: factory functions define classes or objects in this way. They call this factory function when creating an instance.
Ii. constructor Mode
The first step is to select the class name, that is, the name of the constructor. The first letter of the BO name is uppercase. The code below shows that it is similar to the following factory function.
Example:
Copy codeThe Code is as follows:
// ------ Second type: constructor method --------------------------------
Function Car (color, money ){
This. Color = color;
This. Money = money;
This. ShowMoney = function (){
Alert (this. Money );
}
}
// Button call Test
Function NewCarFn (){
Var Car1 = new Car ("red", "0.23 million RMB ");
Car1.ShowMoney ();
}
//----------------------------------------------------------

Compare the differences between the previous factory function method:
① The constructor does not create an object, but uses the this keyword.
② Use the new operator to call the constructor.
Iii. Prototype
Using the prototype attribute of an object, you can view it as the prototype on which the object is created. You can use an empty constructor to set the class name. Then, all attributes and methods are directly assigned the prototype attribute.
Prototype problems:
First, this constructor has no parameters. When using the prototype method, you cannot pass the parameter initialization attribute value to the constructor. You must create an object before changing the default value of the property.
Second, when the attribute points to an object rather than a function, the object is shared by multiple instances. One change will cause changes to other objects.
Example:
Copy codeThe Code is as follows:
// Define an empty constructor first
Function Car (){
}
// Attributes and methods are directly assigned to the prototype attribute.
Car. prototype. Color = "red ,";
Car. prototype. Currency = "0.2 million ";
Car. prototype. Drivers = new Array ("Small three", "Small four ");
Var Car1 = new Car ();
Car1.Drivers. push ("5th"); // In instance 1, a value is added to the Drivers object (in fact, a "5th" is added to the prototype ", so when the second object is new, the read attribute Drivers also shows a 5th)
Alert (Car1.Drivers );
Var Car2 = new Car ();
Alert (Car2.Drivers); // In instance 2, the value in the object has changed! Output "Small three, small four, small five"

Iv. Mixed Constructors/prototype
Using constructor and prototype together, you can create objects in the same way as other languages.
The constructor defines all non-function attributes of an object. The prototype defines the function attributes (methods) of an object ).
Example:
Copy codeThe Code is as follows:
Function BOStudent (name, age ){
This. name = name;
This. age = age;
This. Course = new Array ("Chinese", "Mathematics ");
}
BOStudent. prototype. ShowName = function (){
Alert (this. Name );
};
// Click the button for debugging
Function Admixture (){
Var stu1 = new BOStudent ("Zhang San", 20); // new First BO
Var stu2 = new BOStudent ("Li Si", 22); // new second BO
Stu1. course. push ("physical"); // Add a physical course item to object 1
Alert (stu1. course );
Alert (stu2. course );
}

The hybrid constructor/prototype method is the main method adopted by ECMAScript. It has other features without their side effects.
V. Dynamic Prototype Method
In most object-oriented languages, attributes and methods are packaged when a class is defined. The preceding hybrid Constructors/prototype attributes and methods are separated. Some people think that finding properties inside the constructor is not logical, therefore, a dynamic prototype method is generated.
The difference is that the locations of Methods assigned to objects are different. The Dynamic Prototype Method is inside the constructor, and the fourth one is outside the constructor.
Example:
Copy codeThe Code is as follows:
Function BODynamicPrototype (name, age ){
This. name = name;
This. age = age;
This. Course = new Array ("111", "222 ");
// _ Initialized identifies whether initialization has been performed, that is, whether any method has been granted to the prototype. This method is created and assigned only once.
If (typeof BODynamicPrototype. _ initialized = "undefined "){
BODynamicPrototype. prototype. ShowName = function (){
Alert (this. Name );
};
BODynamicPrototype. _ initialized = true;
}
}

// Click the button for debugging
Function DynamicPrototype (){
Var stu1 = new BODynamicPrototype ("aaa", 20); // new First BO
Var stu2 = new BODynamicPrototype ("bbb", 22); // new second BO
Stu1. course. push ("333"); // Add a physical course item to object 1
Alert (stu1. course );
Alert (stu2. course );
}

6. Hybrid factory Mode
The purpose is to create a pseudo constructor and return only new instances of another object. This method has the same problems as the classic method in the internal management of object methods. It is strongly recommended that you do not use it unless you have!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.