5种js设计模式-tutorial js-php.cn

本文主要和大家带来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");

Salin selepas log masuk

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");

Salin selepas log masuk

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" ——

Salin selepas log masuk

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

Salin selepas log masuk

在以上代码执行的整个过程中， 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); } }

Salin selepas log masuk

上述格式一定要写consructor 不然该函数constructor会指向 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

Salin selepas log masuk

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

Salin selepas log masuk

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();

Salin selepas log masuk

这段代码只会在初次调用构造函数时才会执行。此后，原型已经完成初始化，不需要再做什么修改了。不过要记住，这里对原型所做的修改，能够立即在所有实例中得到反映。
使用动态原型模式时，不能使用对象字面量重写原型。前面已经解释过了，如果在已经创建了实例的情况下重写原型，那么就会切断现有实例与新原型之间的联系。

Atas ialah kandungan terperinci 5种js设计模式. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!