Object factory functions and constructor in javascript design patterns _ basic knowledge-js tutorial

This article mainly introduces the detailed description of the object factory functions and constructor In the javascript design mode, using the object literal or dynamically adding new members to the empty object, is the most easy-to-use object creation method. In addition to these two common object creation methods, JavaScript also provides other methods to create objects, for more information about the object factory function and constructor In the javascript design mode, see the following.

This topic is the easiest way to create objects by using the object literal volume or dynamically adding new members to an empty object. However, in addition to the two common object creation methods, JavaScript also provides other methods to create objects. 1). We can compile a function by using the factory function to create an object. This function is used to create an object.

Overview

Using the object literal or adding a new member to an empty object dynamically is the easiest way to create an object.
However, in addition to the two common object creation methods, JavaScript also provides other methods to create objects.
1). Use the factory function to create an object

We can compile a function. The function is to create an object, which can be called an "Object factory method ".

The Code is as follows:

// Factory Functions
Function createPerson (name, age, job ){
Var o = new Object ();
O. name = name;
O. age = age;
O. job = job;
O. sayName = function (){
Console.info (this. name );
};
Return o;} // use the factory function to create an object
Var person1 = createPerson ('zhang san', 29, 'Software engineer ');
Var person2 = createPerson ('lily', 40, 'docker ');

2) define the object constructor

A) the first letter of the object constructor is capitalized.
B) Use the this keyword internally to add members to an object.
C). Use the new Keyword to call the object constructor.

The Code is as follows:

// Define the object "Constructor" function
Function Person (name, age, job ){
This. name = name;
This. age = age;
This. job = job;
This. sayName = function (){

Console.info (this. name );
};
} // Use new to call the object constructor to create an object
Var p1 = new Person ('zhang san', 29, 'Software engineer ');

Var p2 = new Person ('Li si', 40, 'docker ');

The "Constructor" called in Normal Mode"

A constructor is actually a function. The difference is that a "new" keyword must be added when calling it. Without this keyword, the call to it is considered a normal function call.

The Code is as follows:

// As the constructor called by a common function, the attributes added through this are,
// Becomes the property and method of the window object.
Console.info (window. name); // Zhang San
Lele.info (window. age); // 29
Lele.info (window. job); // Software Engineer

The object constructor looks like this:

The Code is as follows:

Function Person (name ){
This. name = name;
This. say = function (){
Return "I am" + this. name;
};
}

This is actually the case (schematic ):

The Code is as follows:

Function Person (name ){
// Var this = {};
This. name = name;
This. say = function (){
Return "I am" + this. name;
};
// Return this;
}

Jobs completed by constructors

1. Create a new object
2. Let this of the constructor reference this newly created object.
3. Execute the code in the constructor, which usually completes adding attributes to the new object.
4. Return the reference of the newly created object to the outside world.
Differences between object constructors and object factory methods

1. There is no explicit object creation code in the object constructor
2. The attributes and methods of the new object are added through this reference.
3. No return statement in the object constructor
Generally, the initial character of an object constructor is set to uppercase to distinguish it from a common function.
Constructor attribute of the object

A) create an Object using the Object factory function. The constructor attribute of each Object references Object ()

The Code is as follows:

Var person = createPerson ('zhang san', 29, 'Software engineer ');
// Create an object using the factory method,

Its constructor attribute references the Object () function.
Console.info (person1.constructor === Object );

// True

B) use an object constructor to create an object. The constructor attribute of each object references this constructor.

The Code is as follows:

Var p = new Person ('zhang san', 29, 'Software engineer ');
// Use an object constructor to create an object,
// Constructor attribute of each object. Reference this constructor.
Console.info (p. constructor = Person );
// True how to avoid "Forgetting" new? You can use arguments. callee to solve this problem.
// Understand the role of arguments. callee
Function TestArgumentsCallee ()
{
Console.info (this );
Console.info (this instanceof TestArgumentsCallee );
Console.info (this instanceof arguments. callee );
};
TestArgumentsCallee (); // window

// False
// False
New TestArgumentsCallee ();
// TestArgumentsCallee
// True

// True

Therefore, you can directly use arguments. callee

The Code is as follows:

// Avoid forgetting new
Function MyObject (value)
{
If (! (This instanceof arguments. callee ))

{
// If the caller forgets to add new, add new and call it again.

Return new MyObject (value );
}
This. prop = value;
}
// Test
Var obj1. = new MyObject (100 );
Console.info (obj1.prop); // 100
Var obj2 = MySQL object (200 );
Console.info (obj2.prop); // 200

The above is a detailed description of the object factory function and constructor In the javascript design mode. I hope you will like it.