JavaScript factory pattern, prototype pattern, constructor pattern

1. What is a pattern? A pattern is a reusable solution, while an anti-pattern is a bad solution to a certain problem.

Common examples of js anti-patterns

① Pass strings to setTimeout and setInterval instead of functions, which will trigger the internal use of eval().
② Define a large number of variables in the global context to pollute the global namespace
③ Modify the prototype of the Object class
④ Use js in inline form. The js code embedded in the HTML file cannot be included in external unit tests in tools.

⑤Abuse document.write. If document.write is executed after the page is loaded, it will rewrite the page we are on. If you can use document.creatElement instead, try not to use document.write.

2. Categories of design patterns

(1).Factory pattern (simple and complex)

In short, it is encapsulated code, a simple factory The pattern is easy to understand. Its function is to use object-oriented methods to encapsulate some objects and encapsulate some repetitive codes that take up a lot of space. The implementation method is very simple, that is, create an object within the function, assign attributes and methods to the object, and then return the object. This method is to solve the problem of a large number of duplications of instantiated objects.

	function creatper(name,age){  
		var per=new Object(); //原料
		//加工
		per.name=name;
		per.age=age;  
		per.sayHi=function(){
		  	console.log(per.name+'已经有'+per.age+"岁");  
		}
		return per; //出厂
	}
	var test1=creatper('lili',22);
	var test2 =creatper('mike',25);//第二个实例
	test1.sayHi();
	test2.sayHi();
	console.log(test1.name);

It can be seen that using the factory mode, this per function can be called repeatedly to generate objects with different attribute values. This is just like a factory, mass production, the raw materials, processing, and delivery are all very clear. But you will find that the factory pattern cannot identify the type of objects, because they are all objects, unlike Date, Array, etc.

When to use factory pattern?
Factory mode is mainly used in the following scenarios:
①When objects or components involve high complexity
②When it is necessary to easily generate different instances of objects according to different environments

③When dealing with many small objects or components that share the same properties

(2).Constructor (Constructor) mode

Constructor (constructor method) can be used in ECMAScript to create specific Object. This mode can just solve the problem that the above factory mode cannot identify object instances.

	function Student(name,age,classa){//构造函数模式
        this.name = name;
        this.age = age;
        this.classa = classa;
        this.run = function () {
            console.log(this.name+ this.age+ "岁上"+this.classa +"！");
        }
    }
    var Benz = new Student('Lili',22,'初三');
    var BMW = new Student("Mike",25,"初一");
    console.log(Benz instanceof Student); //很清晰的识别他从属于Student
    Benz.run();
    BMW.run();

It can be seen from the code that except for the different function names in the factory mode, a. The constructor method does not explicitly create the object (new Object()), b. Directly set the attributes and methods are assigned to this object, c. There is no return statement. Able to identify objects (this is where the constructor pattern is better than the factory pattern). Note: Constructor method specifications: 1. The function name and the instantiation constructor name are the same and capitalized 2. To create an object through the constructor, you must use the new operator.

Since objects can be created through constructors, where does this object come from and where is new Object() executed? The execution process is as follows:
1. When the constructor is used, and new constructor(), then new Object() is executed in the background;
2. Give the scope of the constructor to the new object, (i.e. The object created by new Object()), and this in the function body represents the object created by new Object().
3. Execute the code in the constructor;

4. Return the new object (return directly in the background).

(3). Prototype pattern

JS stipulates that every created function has a prototype (prototype) attribute. This attribute is a pointer, pointing to an object, and the purpose of this object It contains properties and methods shared by all instances of a specific type. Using a prototype object allows all instance objects to contain these properties and methods.

	function Per(){}
	Per.prototype.name='小米';
	Per.prototype.age=22;
	Per.prototype.course=['php','javascript','java','C#'];
	Per.prototype.say=function(){
		console.log(this.name+"有"+this.age+"岁，学习了"+this.course+"等课程。");
	}
	var per1=new Per();
	var per2=new Per();
	per1.name='小林';
	per1.course.push('Html5');
	per1.say();
	per2.say();
	per2.course.pop();

Regarding the shortcomings of the prototype mode, I think it is also obvious. It omits the constructor to pass initialization parameters. As a result, all instances obtain the same attribute values ​​​​by default. Although you can make changes later, it is not convenient at all. This is not the biggest problem. The biggest problem with the prototype pattern is caused by the nature of sharing. Due to sharing, one instance modifies the reference, and the other one also changes the reference. The properties have been changed. Therefore, prototype mode is generally not used alone.

(4). Constructor with prototype = Prototype pattern + Constructor pattern

	function Per(name,age,course){
		this.name=name;
		this.age=age;
		this.course=course;
	}
	Per.prototype.say=function(){
		console.log(this.name+"有"+this.age+"岁，学习了"+this.course+"等课程。");
	}
	var per1=new Per('Make',22,['C#','java','PHP','Javascript']);
	var per2=new Per('小高',21,['oracle','mysql','nodejs','html5']);
	per1.say();//Make有22岁，学习了C#,java,PHP,Javascript等课程。
	per2.say();//小高有21岁，学习了oracle,mysql,nodejs,html5等课程。
	per1.course.pop();
	per1.say();//Make有22岁，学习了C#,java,PHP等课程。
	per2.say();//小高有21岁，学习了oracle,mysql,nodejs,html5等课程。

Analysis from the above: The constructor is used to define the attributes of the instance, and the prototype pattern is used to Define methods and some shared properties. Each instance will have its own attributes, but at the same time share methods, saving memory to the maximum extent. In addition, this mode also supports passing initial parameters. The most widely used.

Related recommendations:

Detailed Explanation of the Prototype Pattern of JS Design Pattern

Detailed Explanation of the Command Pattern of JS Design Pattern

Detailed Explanation of the Proxy Pattern of JS Design Patterns

The above is the detailed content of JavaScript factory pattern, prototype pattern, constructor pattern. For more information, please follow other related articles on the PHP Chinese website!