JavaScript设计模式初探

站长资源 2024/11/26 佚名

2 0 1

目的：设计模式众多，尝试记录下学到的不同设计模式的优劣，方便以后查阅。

前言：半年前看高程的时候看到设计模式这章，云里雾里，不是看不明白，而是不明白为啥要如此麻烦只为创建一个对象。直到最近完成了自己第一个小项目，才体会到当代码量多起来时没有适当的规范与限制是多么大的灾难。于是重新翻开高程，总结下几种我学到的简单设计模式的优劣。

正文：本文一共介绍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设计模式,js的设计模式

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“JavaScript设计模式初探”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

JavaScript设计模式初探

基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏

JavaScript类型系统之Object详解

评论“JavaScript设计模式初探”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接