5 js design patterns-JS Tutorial-php.cn

5 js design patterns

零到壹度

Release： 2018-03-21 16:59:11

Original

2718 people have browsed it

This article mainly brings you 5 js design patterns. Friends in need can refer to them. I hope it can help everyone. Let’s take a look with the editor below.

1. Factory pattern

This is the factory pattern. Although the factory pattern solves many problems with similar objects, it does not have an ending object. Identify the problem

function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

Copy after login

2. Constructor pattern

Constructor pattern The sayName in each instance is different, so there is an introduction The prototype chain

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

Copy after login

hasOwnProperty() method can detect whether a property exists in the instance or in the prototype. true is the instance and false is the prototype

##3. Prototype mode

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
alert(person1.name); //"Greg"——来自实例
alert(person2.name); //"Nicholas"——来自原型
delete person1.name;
alert(person1.name); //"Nicholas" ——

Copy after login

The name of person1 is blocked by a new value. But whether accessing person1.name or person2.name can return the value normally

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true
person1.name = "Greg";
alert(person1.name); //"Greg" ——来自实例
alert(person1.hasOwnProperty("name")); //true
alert("name" in person1); //true
alert(person2.name); //"Nicholas" ——来自原型
alert(person2.hasOwnProperty("name")); //false
alert("name" in person2); //true
delete person1.name;
alert(person1.name); //"Nicholas" ——来自原型
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true

Copy after login

During the entire process of the above code execution, the name attribute is either directly accessed on the object , or access

through the prototype. Therefore, calling "name" in person1 always returns true regardless of whether the property exists on the instance or on the prototype.
Using the hasOwnProperty() method and the in operator at the same time, you can determine whether the property exists in the object or in the
prototype, as shown below
The name attribute first exists in the prototype, so hasPrototypeProperty() returns true
The property exists in the instance, so hasPrototypeProperty() returns false
If the prototype mode is written as

Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}
}

Copy after login

the above format must write consructor, otherwise the function constructor Will point to window

var friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //false
alert(friend.constructor == Object); //true

Copy after login

4. Pattern of combining constructor and prototype

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

Copy after login

5. Dynamic prototype mode

function Person(name, age, job){
//属性
this.name = name;
this.age = age;
this.job = job
// 方法
if (typeof this.sayName != "function"){
Person.prototype.sayName = function(){
alert(this.name);
};
}
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

Copy after login

This code will only be executed when the constructor is called for the first time. After this, the prototype has been initialized and no further modifications are needed. But keep in mind that changes made to the prototype here will be immediately reflected in all instances.

When using dynamic prototype mode, object literals cannot be used to override the prototype. As explained earlier, if you override a prototype when an instance has already been created, you will sever the connection between the existing instance and the new prototype.

The above is the detailed content of 5 js design patterns. For more information, please follow other related articles on the PHP Chinese website!