JavaScript study notes (6)_javascript skills

1. Factory method
My own understanding: To create many instances of objects, these instances have the same attributes, but different attribute values. At this time, you need to create a factory function.
Factory function: Create and return objects of a specific type.
If an attribute in the factory function is a method, you can define the method of the object outside the factory function, and then point to the method through the attribute, so that you can avoid calling your own attribute method every time. In this way, each object All share the same function.
Example:

Copy code The code is as follows:

Summary: Factory function defines a class or object in this way, and it calls this factory function when it creates an instance.
2. Constructor method
The first step is to select the class name, which is the name of the constructor. The first letter of the BO name is capitalized. Look at the code below and find that it is similar to the factory function above.
Example:

Copy code The code is as follows:

//----- -Second: 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", "230,000 RMB");
Car1.ShowMoney();
}
//------------------------------------------------ ----------

Comparing the differences between the previous factory function method:
① There is no object created inside the constructor, but the this keyword is used.
② Use the new operator to call the constructor.
3. Prototype method
Using the prototype attribute of the object, you can regard it as the prototype that creates a new object, use an empty constructor to set the class name, and then all properties and methods are directly assigned the prototype attribute.
Problems with the prototype method:
First of all, this constructor has no parameters. When using the prototype method, you cannot initialize the value of the attribute by passing parameters to the constructor. You must change the default value of a property after the object is created.
Secondly, when the attribute points to an object rather than a function, the object is shared by multiple instances, and a change in one of them will cause changes in other objects.
Example:

Copy code The code is as follows:

//First define an empty Constructor
function Car() {
}
//Attributes and methods are directly assigned to the prototype attribute
Car.prototype.Color = "Red,";
Car.prototype.Money = " 200,000";
Car.prototype.Drivers = new Array("小三", "小四");
var Car1 = new Car();
Car1.Drivers.push("小五" ; 🎜>alert(Car1.Drivers);
var Car2 = new Car();
alert(Car2.Drivers); //In instance 2, the value in the object has changed! Output "小三,小四,小五"

4. Mixed constructor/prototype method Using constructor and prototype method in combination, you can use the constructor and prototype method together like other languages Create objects the same way.
The constructor defines all non-functional properties of the object, and the prototype defines the functional properties (methods) of the object.
Example:

Copy code The 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 to debug
function Admixture() {
var stu1 = new BOStudent("Zhang San", 20); //new the first BO
var stu2 = new BOStudent("Li Si", 22); //new the second BO
stu1.course.push("Physics"); //Add physics course item to object 1
alert(stu1.course);
alert(stu2.course);
}

The mixed constructor/prototype approach is the main approach adopted by ECMAScript. It has the characteristics of other approaches without their side effects.
5. Dynamic prototype method
In most object-oriented languages, when defining a class, attributes and methods are packaged together. In the above hybrid constructor/prototype method, attributes and methods are separated. Some people think that it is illogical to find attributes inside the constructor and methods outside, so the dynamic prototype method was born.
The difference is: the location of the method assigned to the object is different. The dynamic prototype method is inside the constructor, while the fourth method above is outside the constructor.
Example:

Copy code The code is as follows:

function BODynamicPrototype(name, age) {
this.Name = name;
this.Age = age;
this.Course = new Array("111", "222");
//_initialized flag determines whether it has been initialized , that is, whether any method has been assigned to the prototype, the method is only created and assigned once
if (typeof BODynamicPrototype._initialized == "undefined") {
BODynamicPrototype.prototype.ShowName = function() {
alert(this.Name);
};
BODynamicPrototype._initialized = true;
}
}

//Click the button to debug
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 physics course item to object 1
alert(stu1.course);
alert(stu2.course);
}

6. Mixed factory method
The purpose is to create a fake constructor that only returns a new instance of another object. This approach has the same problems as the classic approach in terms of internal management of object methods. Strongly Recommended: Avoid use unless absolutely necessary!