1.JavaScript factory mode

The main function of factory pattern is to create objects and reduce code redundancy

Application scenario: when you want to mass produce objects of the same kind; For example, you want to generate 40 students in a class. Each student has characteristics such as name, age and so on. At this time, you create a "factory", throw the information into the factory, and the factory will create a person for you, which is very convenient.

You can create objects by:

• Create objects literally

// Literal creation object
var obj1={
    name:'zhangsan',
    age:18
}

• new Object() creates an object

// new Object() creates an object
var obj2=new Object();

• Create objects in factory mode

// Create objects using factory mode
// 1. Create a function factory function
function createPerson(name,age,gender){
    // 2. Create a template instance using the constructor
    var person=new Object();
    // 3. Assign values to template instances
    person.name=name;
    person.age=age;
    person.gender=gender;
    person.sayName=function(){
        console.log(this.name);
    }
    // 4. Return an instance object
    return person;
}

// Create an instance using a factory function
var p1=createPerson('zhangsan',18,'male')
var p2=createPerson('lisi',19,'female')
console.log(p1);
console.log(p2);
p1.sayName()
p2.sayName()

Advantages and disadvantages of factory mode

* * advantages: * * as long as we insert parameters into the factory function, the factory function will come out as early as the production of products

* * disadvantages: * * the essence of this method is to encapsulate the process of creating an object, but the essence has not changed. When we create a student, we can't know its specific data type, but only know that it is an object. Often, in actual development, we need to determine whether the object is an instance of Person or Dog

In this case, you can use the custom constructor pattern

2. Constructor mode

ECMAScript's constructor is a function that can create objects

2.1 custom constructor

// Create a custom constructor
// 1. Use function to create a custom constructor function expression
function Person(name,age,gender) {
    // 2. Directly use this to perform an assignment
    this.name =name;
    this.age=age;
    this.gender=gender;
    this.sayName=function(){
        console.log(this.name);
    }
    
}
// 3. Create an instance using the new operator
var p1 =new Person('zhangsan',18,'male')
var p2 =new Person('lisi',19,'female')

person1.sayName(); // zhangsan
person2.sayName(); // lisi

The internal code of Person() here is basically the same as that of createPerson() in the factory function above, except for the following differences:

• The object was not created explicitly

• Properties and methods are assigned directly to this

• No return

  Note: the distinction between constructors and ordinary functions in ECMAScript is that constructor names start with uppercase letters and ordinary function names start with lowercase letters

2.2 creating a Person instance

To create an instance of Person, use the new operator

var p1 =new Person('zhangsan',18,'male')
var p2 =new Person('lisi',19,'female')

(1) Create a new object in memory

(2) The [[Prototype]] attribute inside the new object is assigned to the Prototype attribute of the constructor

(3) This inside the constructor is assigned to the new object (that is, this points to the new object)

(4) Execute the code block inside the constructor (add attributes to the new object)

(5) If the constructor returns a non empty object, it returns the object; otherwise, it returns the new object just created

p1 and p2 above respectively store different instances of Person. All objects will inherit a constructor property from its prototype, and the constructor property of the object points to Person

console.log(p1.constructor === Person); // true 
console.log(p1.constructor === Object); // false 
console.log(p2.constructor === Person); // true

2.3instanceof

The constructor attribute is used to identify the object type, but the instanceof operator can more reliably determine the object type

The instanceof operator is used to detect whether the prototype attribute of the constructor appears on the original chain of an instance object, or to judge whether an object is an instance of an object

console.log(p1 instanceof Object);//true
console.log(p1 instanceof Person);//true

All custom objects inherit from Object. In contrast to factory mode, defining a custom constructor ensures that the instance is identified as a specific type, not factory mode

2.4 using function expressions to customize constructors

A constructor can be represented by a function expression assigned to a variable

// Create a custom constructor
// 1. Assign a value to a variable to create a custom constructor function expression
var Person=function (name,age,gender) {
    // 2. Directly use this to perform an assignment
    this.name =name;
    this.age=age;
    this.gender=gender;
    this.sayName=function(){
        console.log(this.name);
    }
    
}
// 3. Create an instance using the new operator
var p1 =new Person('zhangsan',18,'male')
var p2 =new Person('lisi',19,'female')

person1.sayName(); // zhangsan
person2.sayName(); // lisi

If you do not want to pass parameters during instantiation, the parentheses after the constructor can be added or not. As long as there is a new operator, you can call the corresponding constructor

2.5 constructors are also functions

The only difference between constructors and ordinary functions is that they are called in different ways:

Any function that uses the new operator is a constructor, and a function that does not use the new operator is an ordinary function

function Person(name,age,gender) {
    
    this.name =name;
    this.age=age;
    this.gender=gender;
    this.sayName=function(){
        console.log(this.name);
    }
    
}
// Used as a constructor
var p1 =new Person();
// Use as a normal function
Person('lisi',19,'female');//Add to global variable browser = > window; node => global
// console.log(global);
global.sayName();
var p2 =new Person();
// In the scope of another object
var o = new Object();
Person.call(o, "wangwu", 25, "male");
o.sayName(); // wangwu

This case shows a typical constructor call, that is, create a new object using the new operator. Then there is the call mode of ordinary functions.

At this time, the Person() is not called with the new operator, and the properties and methods will be added to the Global object. Remember here that when a function is called without explicitly setting the value of this (that is, there is no method call as an object, or no call()/apply() call is used), this always points to the Global object (the window object in the browser). Therefore, after the above call, there is a sayName() method on the Global object, and calling it will return "lisi".

The final call is to call the function through call() (or apply()) and specify a specific object as the scope. The call here specifies object o as the value of this inside Person(), so all properties and sayName() methods will be added to object o after the function code is executed.