[Front-end knowledge] JavaScript - design pattern (factory pattern, constructor pattern, prototype pattern)

[Front-end knowledge] JavaScript - design pattern (factory pattern, constructor pattern, prototype pattern)

1. Factory mode

Factory pattern is a well-known design pattern widely used in the field of software engineering to abstract the process of creating a specific object.

Advantages: can solve the problem of creating multiple similar objects

Cons: Doesn't address object identity issues (i.e. what type of newly created object)

Example:

function createPerson(name, age, job) {
    
     
    // 创建对象，将值赋值给该对象后，返回
    let o = new Object(); 
    o.name = name; 
    o.age = age; 
    o.job = job; 
    o.sayName = function() {
    
     
        console.log(this.name); 
    }; 
    // 返回对象
    return o; 
} 
let person1 = createPerson("Nicholas", 29, "Software Engineer"); 
let person2 = createPerson("Greg", 27, "Doctor");

2. Constructor mode

Compared with the factory mode, the constructor mode does not explicitly create objects, and its properties and methods are directly assigned to this without return.

Pros: Defining a custom constructor ensures that an instance is identified as a specific type

Disadvantage: the method defined will be created on each instance

Example:

// 区别1: 函数名大写，为了与普通函数区分
function Person(name, age, job){
    
     
    // 区别2: 与工厂模式不同，传入的参数赋值给this
    this.name = name; 
    this.age = age; 
    this.job = job; 
    this.sayName = function() {
    
     
        console.log(this.name); 
    }; 
    //  区别3: 无需返回对象
} 
// 区别4: 通过new操作符，创建Person实例
let person1 = new Person("Nicholas", 29, "Software Engineer"); 
let person2 = new Person("Greg", 27, "Doctor"); 
person1.sayName(); // Nicholas 
person2.sayName(); // Greg

Note: Use the new operator to call the execution process of the constructor:

step	process
1	Create a new object in memory.
2	The internal [[Prototype]] property of this new object is assigned to the constructor's prototype property.
3	The this inside the constructor is assigned the new object (ie this points to the new object).
4	Execute the code inside the constructor (add properties to the new object).
5	If the constructor returns a non-null object, return that object; otherwise, return the new object just created.

3. Prototype mode

Each function creates a prototype property, which is an object containing the properties and methods that should be shared by instances of a particular reference type.

Advantages: properties and methods defined on it can be shared by object instances

Disadvantage: All instances will get the same property value by default

Example:

function Person() {
    
    } 
Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 
Person.prototype.sayName = function() {
    
     
    console.log(this.name); 
}; 
let person1 = new Person(); 
person1.sayName(); // "Nicholas" 
let person2 = new Person(); 
person2.sayName(); // "Nicholas" 
console.log(person1.sayName == person2.sayName); // true