Home > Article > Web Front-end > 5 js design patterns
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");
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");
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" ——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); //trueDuring 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); } }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
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
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();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!