Write your own JavaScript design patterns

JavaScript Design pattern

The factory pattern

The factory pattern, suitable for creating a large number of similar objects, defines the steps for creating objects in a function. Each time the function is called with an argument, a new object is generated within the function and returned

Constructor pattern

Although the factory pattern can create a large number of similar objects, it cannot solve the object recognition problem

// Constructor mode constructs the function of the object
function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function () {
        console.log(this);
        console.log(this.name);
    };
    //return this; There is no need for the return system to complete automatically
}
// Use the new keyword
// create a new object
// 2. Point the new object's _proto_ to the constructor's prototype object
// 2. Assign the constructor's scope to the new object this to the new object
// 3. Execute the code in the constructor (assign attributes and methods to this object)
// 4. Return the new object. The system completes automatically
var person1 = new Person("Millet".20."Software Engineer");
var person2 = new Person("Greg".23."Teacher");
console.log("person.constructor == Person");
console.log(person1.constructor == Person);//true
console.log("person instanceof Person");
console.log(person1 instanceof Person);//true
console.log("person instanceof Object");
console.log(person1 instanceof Object);//true
Copy the code

That is, person1 cannot be identified as an instanceof Person by instanceof,

The prototype pattern

Summary:

Create a function with an empty executor, and then add shared properties and shared methods to the function’s prototype object

function Fruits() {
}

Fruits.prototype = {
    constructor: Fruits,// Point back again after covering
    name: "Banana".color: "Yellow".sayColor() {
        console.log(this.color);
    },
    sayAdress() {
        console.log("Hainan"); }}let banana = new Fruits("Banana"."Yellow");
banana.sayAdress();
banana.sayColor();
Copy the code

Prototype models have no private properties and methods and are not very useful, so they are often used in conjunction with constructor patterns. Private properties and methods are placed in constructors, and common properties and functions are placed in stereotypes

let desc = Object.getOwnPropertyDescriptor(Fruits.prototype, "constructor");
console.log(desc);
Copy the code

Before refactoring the constructor property attribute Enumerable defaults to false

The constructor property Enumerable default is set to False before refactoring the stereotype object using the stereotype pattern

Get the prototype object

console.log(Person.prototype);
console.log(person1.__proto__);
console.log(Object.getPrototypeOf(person1));// Return the prototype object
console.log(Person.prototype == person1.__proto__);//true
Copy the code

Add properties/methods to the prototype object

Person.prototype.adress = "Guangzhou";
person1.__proto__.sayAdress = function () {
    console.log(this.adress);
}
person2.sayAdress();/ / guangzhou
Copy the code

Deletes properties or methods of the stereotype object

// Delete attributes/methods
delete Person.prototype.adress;
person2.sayAdress();//undefined
Copy the code

Mechanism for finding properties and methods

The instance Object –>__proto__ refers to the prototype Object –>Object –>undefined

person1.hobby = "play the guitar";
person1.__proto__.hobby = "Roller-skating";
Object.prototype.hobby = "go fishing";
console.log(person1.hobby);//play the guitar

delete person1.hobby;
console.log(person1.hobby);//Roller-skating

delete person1.__proto__.hobby;
console.log(person1.hobby);//go fishing

delete Object.prototype.hobby;
console.log(person1.hobby);//undefined
Copy the code

If the attribute is not found in the Person1 instance object, it is searched up the prototype chain until it is found, otherwise null returns undefined

Determines whether the property is on the object

HasOwnProperty (” property “) //true/false

Determines whether the property is on the object or its prototype chain

“Property” in object //true/false

Combine the constructor pattern and the stereotype pattern

Private properties and methods are placed in constructors, and common properties and functions are placed in stereotypes

// Add a lot of methods
function Fruits(name, color) {
    this.name = name;
    this.color = color;
}
console.log(Fruits.prototype);
let fruitsProto = Fruits.prototype
let desc = Object.getOwnPropertyDescriptor(Fruits.prototype, "constructor");
console.log(desc);
Fruits.prototype = {
    constructor: Fruits,
    sayColor() {
        console.log("color");
    },
    sayAdress() {
        console.log("Hainan"); }}let banana = new Fruits("Banana"."Yellow");
banana.sayAdress();
banana.sayColor();
Copy the code

The dynamic model

Add public properties or public methods to the prototype object dynamically in the constructor

function Person(name, age) {
    this.name = name;
    this.age = age;
    if(typeof this.sayName ! ="function") {
        Person.prototype.sayName = function() {
            console.log(this.name);
        }
    }
}

let person1 = new Person("Millet".19);
person1.sayName();
Copy the code

This pattern cannot refactor prototype objects, otherwise dynamically added properties or methods will be lost

Parasitic constructor pattern

function Host() {
    let parasite = {};
    parasite.name = "COVID - 19";
    parasite.copy = function() {
        console.log("Reproduction");
    }
    return parasite;
}

let covid_19 = new Host();
covid_19.copy();

console.log(covid_19);
Copy the code

The prototype Object of the parasitic constructor pattern points to the prototype Object of Object

Secure constructor pattern

Safe objects: instance methods do not reference this; The constructor is not called using the new operator

function Person(name,age) {
    let obj = {};
    obj.sayName = function() {
        console.log(name+"Age"+age+"Age");
    }
    return obj;
}

let person1 = Person("Millet".20);
person1.sayName();
Copy the code

Returns an object whose method execution context is the scope created by the constructor execution