JS design mode: Factory mode, constructor mode, prototype mode, mixed mode

First, JS object-oriented program

var O1 = new Object ();    O1.name = "Binbin";    O1.sex = "male"; O1.age = "n"; o1.msg = function () {Console.log ("Name:" +this.name+ "Gender:" +this.sex+ "Age:" +this.age);} var O2 = new Object    ();    O2.name = "Qian Qian";    O2.sex = "female"; O2.age = "O2.msg" = function () {Console.log ("Name:" +this.name+ "Gender:" +this.sex+ "Age:" +this.age);} The calling object follows the method o1.msg (); o2.msg ();//thinking: How to reuse code. To solve this, reference a design pattern: Factory mode. is to create an object inside the function, give the object properties and methods, and return the object.

second, the factory model

Factory mode is a well-known design pattern in the field of software engineering, and because a class cannot be created in ECMAScript, a function encapsulation is used to create an object with a specific interface. The implementation method is very simple, that is, to create an object within the function, give the object properties and methods, and then return the object. Function person (name,sex,age) {    var o = new object ();         o.name = name;         o.sex = sex;        o.age = age;     o.getName = function  ()  {         Console.log (this.name);     }    o.msg = function () {         console.log ("Name:" +this.name+ "   Gender:" +this.sex+ "   Age: "+this.age");     }    return o;} Var person1 = person ("Binbin", "Male", "n"),//var myarray=new array (); var person2 =  person ("Qian Qian", "female", "Nian");p erson1.msg ();p erson1.getname ();p erson2.msg ();//thinking: What is the difference between the object we create and the system object?? To solve this: we need a new function on the outside, which leads to JS another design pattern: constructor mode

third, the structural function mode

//This mode feature: when new calls a function, this is the object that is created, and the return value of the function is directly this, which is called implicit return Function person (Name,sex, Age) {    this.name = name;    this.sex = sex;     this.age = age;    this.getname = function   ()  {        console.log (this.name);     }    this.msg = function () {         Console.log ("Name:" +this.name+ "   Gender:" +this.sex+ "   Age:" +this.age);     }} Var person1 = new person ("Binbin 1", "Male", "Nian"), Var person2 = new person ("Qian Qian 1 "," female "," Erson1.msg ");p ();p erson1.getname ();p erson2.msg (); Console.log (person1.msg == person2.msg);// false//thinking: How to provide performance?? That is, let the common properties and methods exist in memory only one copy?? Workaround: Here is another pattern in JS design mode: Prototype mode. is to load the common properties and methods on the prototype (prototype).

Four, JS prototype mode

//prototype (prototype) to be written under the constructor. The prototype is equivalent to the class in CSS, and the normal methods and properties are equivalent to the style in the tag element. So the priority of the prototype is normal methods and properties. function person () {}person.prototype.name = "binbin"; Person.prototype.sex = "male"; Person.prototype.age = "10"; Person.prototype.msg = function () {Console.log ("Name:" +this.name+ "Gender:" +this.sex+ "Age:" +this.age);} var person1 = new Person ();p erson1.msg (), var person2 = new Person ();p erson2.name = "dangling";p erson2.msg ();//thinking: This kind of modification property is more troublesome??? Solve the problem method: Write the attribute in the constructor function, the method uses the prototype pattern to write, is called the JS mixed pattern

Five, the constructor + the prototype JS mixed mode (recommended)

function Person (name,sex,age) {this.name = name;    This.sex = sex; if (age) {this.age = age;//priority is higher than prototype}}person.prototype.age = 10; Person.prototype.getName = function () {console.log (this.name);} Person.prototype.msg = function () {Console.log ("Name:" +this.name+ "Gender:" +this.sex+ "Age:" +this.age);} var person1 = new Person ("Binbin 1", "Male", "n"), var person2 = new Person ("Qian Qian 1", "female");p erson1.msg ();p erson1.getname ();p erson2.msg (); Console.log (person1.msg = = person2.msg);//true

JS design mode: Factory mode, constructor mode, prototype mode, mixed mode