JavaScript设计模式初探
目的：设计模式众多，尝试记录下学到的不同设计模式的优劣，方便以后查阅。
前言：半年前看高程的时候看到设计模式这章，云里雾里，不是看不明白，而是不明白为啥要如此麻烦只为创建一个对象。直到最近完成了自己第一个小项目，才体会到当代码量多起来时没有适当的规范与限制是多么大的灾难。于是重新翻开高程，总结下几种我学到的简单设计模式的优劣。
正文：本文一共介绍7种设计模式以及他们的应用场景、优劣。
1.工厂模式
直接用函数来封装对象，将对象作为返回值。
function person (name,age) {
var obj=new Object();
obj.name=name;
obj.age=age;
obj.sayName=function () {
alert(this.name);
};
return obj;
}
var me=person("Su",25);
缺点：对象识别的问题，所有创建出的对象都是Object的实例，不好区分。
2.构造函数模式
function Person (name,age) {
this.name=name;
this.age=age;
this.sayName=function () {
alert(this.name);
};
}
var me=new Person("Su",25);
优点：运用构造函数模式可以将实例标示为一种特定的类型。
缺点：创建的对象的方法都是私有的，如果只是想产生公用的方法，会造成不必要的性能浪费。
3.原型模式
利用原型链继承
function Person () {}
Person.prototype.name="Su";
Person.prototype.sayName=function () {
alert(this.name);}
var me =new Person();
缺点：所有属性和方法被实例共享。当属性、方法中包含引用类型的值时，修改一个实例的属性、方法会影响所有其他实例。
4.原型+构造函数模式
私有属性、方法用构造函数产生，公有属性、方法用原型来继承。融合两种方法的优点。
function Person (name,age) {
this.name=name;
this.age=age;
}
Person.prototype={
constructor:Person,
sayName:function () {
alert(this.name);
}
}
var me=new Person("Su",25);
缺点：注意引用类型值的原型继承。
ps：上图代码重写了Person构造函数的原型对象，将原型对象指针指向了一个对象，所以constructor属性此时指向Object而不是Person，所以要显式的将其设置成Person。
5.动态原型模式
本质上还是构造函数，只在指定方法不存在时在原型对象中添加他。
function Person (name,age) {
this.name=name;
this.age=age;
if (typeof this.sayName!="function") {
Person.prototype.sayName=function () {
alert(this.name);
}
}
}
var me =new Person("Su",25);
缺点：不能使用对象字面量重写原型对象。因为这会使实例的指针指向新的原型对象。也就是说上图中原型对象中添加的sayName方法会失效。
6.寄生构造函数模式
调用时使用new操作符，除此以外我看不出和工厂模式有什么区别。望高人指点。
function person (name,age) {
var obj=new Object();
obj.name=name;
obj.age=age;
obj.sayName=function () {
alert(this.name);
};
return obj;
}
var me=new person("Su",25); //这里使用new操作符
7.稳妥构造函数模式
没有公共属性，禁用this，仅暴露必须的API用于数据调用。适用于对安全有需求的领域。
function Person (name) {
var o=new Object();
o.sayName=function () {
alert(name);
}
return o;
}
var me=Person("Su");
如上代码，只能通过sayName方法才能访问到内部的name属性。
本文给大家介绍了七种设计模式，分别介绍了他们的优缺点，希望对学习js设计模式相关知识有所帮助。
相关文章
这篇文章主要为大家详细介绍了js仿微信抢红包功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
最近由于公司需要研究了一下微信小程序的开发,特此记录一下小程序获取授权的流程,便于自己理解,下面这篇文章主要给大家介绍了关于如何通过大白话理解微信小程序获取授权的相关资料,需要的朋友可以参考下2022-12-12
JavaScript中判断为整数的多种方式及保留两位小数的方法
这篇文章主要介绍了JavaScript中判断为整数的多种方式,以及保留两位小数的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了JS+CSS3实现超炫的散列画廊特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了JavaScript实现随机替换图片的方法,涉及javascript中Math.random方法的灵活运用,需要的朋友可以参考下2015-04-04
智力测试题经常遇到类似的逻辑题，给几个容量不等的杯子，让你倒出多少的水，感兴趣的朋友可以参考下哈希望可以帮助到你2013-03-03
这篇文章主要为大家详细介绍了js实现内置计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
JS截取字符串 subStr()、substring()、slice() 方法示例详解
这篇文章主要介绍了JS截取字符串 subStr()、substring()、slice() 方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
事实上，前端很少涉及对二进制数据的处理，但即便如此，我们偶尔总能在角落里看见它们的身影。 今天我们就来聊一聊前端的二进制家族：Blob、ArrayBuffer和Buffer2021-05-05
这篇文章主要介绍了javascript执行上下文、变量对象,结合实例形式分析了javascript执行上下文、变量对象相关概念、原理、用法与操作注意事项,需要的朋友可以参考下2020-04-04
最新评论