php 5种设计模式,5种js设计模式

本文主要和大家带来5种js设计模式,需要的朋友可以参考下，希望能帮助到大家。下面跟随小编一起来看一下吧。

1. 工厂模式

这个是工厂模式 工厂模式虽然解决了很多相似对象的问题 但是没有结局对象的识别问题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.构造函数模式

构造函数模式 每一实例中的 sayName 是不同的 所以有引进了原型链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() 方法可以检测一个属性是存在于实例中，还是存在于原型中。 true 为实例的 false 为原型里的

3.原型模式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" ——

person1 的 name 被一个新值给屏蔽了。但无论访问 person1.name 还是访问person2.name 都能够正常地返回值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

在以上代码执行的整个过程中， name 属性要么是直接在对象上访问到的，要么是通过原型访问到

的。因此，调用 "name" in person1 始终都返回 true ，无论该属性存在于实例中还是存在于原型中。

同时使用 hasOwnProperty() 方法和 in 操作符，就可以确定该属性到底是存在于对象中，还是存在于

原型中，如下所示

name 属性先是存在于原型中，因此 hasPrototypeProperty() 返回 true

该属性就存在于实例中了，因此 hasPrototypeProperty() 返回 false

原型模式 如果写成Person.prototype = {

constructor: Person,

name : "Nicholas",

age : 29,

job : "Software Engineer",

friends : ["Shelby", "Court"],

sayName : function () {

alert(this.name);

}

}

上述格式一定要写consructor 不然该函数constructor会指向 windowvar friend = new Person();

alert(friend instanceof Object); //true

alert(friend instanceof Person); //true

alert(friend.constructor == Person); //false

alert(friend.constructor == Object); //true

4.组合使用构造函数和原型的模式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.动态原型模式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();

这段代码只会在初次调用构造函数时才会执行。此后，原型已经完成初始化，不需要再做什么修改了。不过要记住，这里对原型所做的修改，能够立即在所有实例中得到反映。

使用动态原型模式时，不能使用对象字面量重写原型。前面已经解释过了，如果在已经创建了实例的情况下重写原型，那么就会切断现有实例与新原型之间的联系。