详解js中的几种常用设计模式


Posted in Javascript onJuly 16, 2020

工厂模式

function createPerson(name, age){
  var o = new Object();  // 创建一个对象
  o.name = name;
  o.age = age;
  o.sayName = function(){
   console.log(this.name)
  }
  return o;  // 返回这个对象
}
var person1 = createPerson('ccc', 18)
var person2 = createPerson('www', 18)

工厂函数的问题:
工厂模式虽然解决了创建多个相似对象的问题,但是没有解决对象识别问题(即怎样知道一个对象的类型)。如下

person1 instanceof createPerson  // --> false
person1 instanceof Object  // --> true

构造函数模式

function Person(name , age){
 this.name = name;
 this.age = age;
 this.sayName = function(){
 console.log(this.name)
 }
}

var person1 = new Person('ccc', 18)
var person2 = new Person('www', 18)
person1.sayName()  // --> 'ccc'

person1 和person2 分别保存着Person的一个不同的实例。这两个对象都有一个constructor(构造函数)属性指向Person。这正是构造函数模式胜过工厂模式的地方。如下:

console.log(person1 instanceof Person)  // --> true
console.log(person1 instanceof Object)  // --> true
console.log(person2 instanceof Person)  // --> true
console.log(person2 instanceof Object)  // --> true

构造函数模式与工厂模式的区别:

  1. 没有显式的创建对象
  2. 直接将属性和方法赋给了this对象
  3. 没有return 语句

要创建Person的新实例,必须使用new操作符。以这种方式调用构造函数实际上会经历一下4个步骤:

  1. 创建一个新对象
  2. 将构造函数的作用域赋给新对象(因此this就指向了这个新对象)
  3. 执行构造函数中的代码(为这个新对象添加属性)
  4. 返回新对象

构造函数的问题:

使用构造函数的重要问题,就是每个方法都要在每个实例上重新创建一遍。person1和person2中都有一个名为sayName()的方法,但那两个方法不是同一个Function实例。因为在ECMAscript中函数就是对象,因此每定义一个函数,也就是实例化了一个对象。从逻辑角度上讲,此时的构造函数也可以你这样定义:

function Person(name , age){
 this.name = name;
 this.age = age;
 this.sayName = new Function('console.log(this.name)')  // eslint: The Function constructor is eval. (no-new-func)
}

这会导致,创建的不同的实例上的同名函数是不相等的,比如:console.log(person1.sayName() === person2.sayName()) // -->false,然而创建两个完全相同的任务的Function实例是没有必要的。可以通过把函数定义转移到构造函数外部来解决这个问题。

function Person(name , age){
 this.name = name;
 this.age = age;
 this.sayName = sayName
}
function sayName(){
 console.log(this.name)
}
var person1 = new Person('ccc', 18)
var person2 = new Person('www', 18)

这样,由于sayName包含的是一个指向函数的指针,因此person1和person2对象就共享了在全局作用域中定义的同一个sayName()函数。这样做确实解决了两个函数做同一件事的问题,可是新问题又来了:在全局作用域中定义的函数实际上只能被某个对象调用,这让全局作用域有点名不副实。
带来的新问题:
如果对象需要定义很多方法,那么就要定义很多个全局函数,于是我们这个自定义的引用类型就丝毫没有封装性可言。

原型模式

关于原型,原型链内容不在此描述,只讨论原型设计模式
我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。即不必在构造函数中定义对象实例的信息,而是将这些信息直接添加到原型对象中。

function Person(){
}
Person.prototype.name = 'ccc'
Person.prototype.age = 18
Person.prototype.sayName = function(){
 console.log(this.name)
}
var person1 = new Person()
person1.sayName()  // --> ccc

var person2 = new Person()
person2.sayName()  // --> ccc

console.log(person1.sayName === person2.sayName)  // --> true

原型模式的问题:

它省略了为构造函数传递参数初始化参数的环节,结果所有的实例在默认情况下都将取得相同的属性值。另外,原型模式的最大问题是由其共享的本性所导致的。看如下问题:

function Person(){
}
Person.prototype = {
 constructor: Person,
 name: 'ccc',
 age: 18,
 friends:['www', 'aaa'],
 sayName: function () {
 console.log(this.name)
 }
}
var person1 = new Person()
var person2 = new Person()

person1.friends.push('bbb')

console.log(person1.friends)  // --> ["www", "aaa", "bbb"]
console.log(person2.friends)  // --> ["www", "aaa", "bbb"]
console.log(person1.friends === person2.friends)  // --> true

带来的新问题:

如果我们的初衷就是这样,所有的实例共用一个数组,那么这个结果就是想要的。可是,实例一般都是要有属于自己的全部属性的,这个问题正是我们很少看到有人单独使用原型模式的原因所在。

组合使用构造函数模式和原型模式

创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。这种方式还支持向构造函数传递参数。

function Person(name, age){
 this.name = name;
 this.age = age;
 this.friends = ['aaa', 'bbb']
}
Person.prototype = {
 constructor: Person,
 sayName: function(){
 console.log(this.name)
 }
}
var person1 = new Person('ccc', 18)
var person2 = new Person('www', 18)
person1.friends.push('ddd')

console.log(person1.friends)  // --> ["aaa", "bbb", "ddd"]
console.log(person2.friends)  // --> ["aaa", "bbb"]
console.log(person1.friends === person2.friends)  // --> false
console.log(person1.sayName === person2.sayName)  // --> true

这种构造函数与原型混成的模式,是目前ECMAscript中使用最广泛、认同度最高的一种创建自定义类型的方法。可以说,这是用来定义引用类型的一种默认方式。

动态原型模式

动态原型模式就是可以通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型。

function Person(name, age){
 // 属性
 this.name = name
 this.age = age
 // 方法
 if(typeof this.sayName !== 'function'){
 Person.prototype.sayName = function(){
  console.log(this.name)
 }
 }
}

var person1 = new Person('ccc', 18)
person1.sayName()  // --> ccc

这里只有在sayName()方法不存在的情况下,才会将它添加到原型中。这段代码只会在初次调用构造函数时才会执行。
注意:

  • 在这里对原型所做的修改,能够立即在所有实例中得到反映。
  • 使用动态原型模式时,不能使用对象字面量重写原型。如果在已经创建了实例的情况下重写原型,那么就会切断现有实例与新原型之间的联系。(参考原型与原型链中的内容)

其它模式

还有寄生构造函数模式和稳妥构造函数模式,可自行了解。以上所以知识内容来自《JavaScript高级程序设计》(第三版)。

以上就是详解js中的几种常用设计模式的详细内容,更多关于JS 设计模式的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js异步加载的三种解决方案
Mar 04 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 Javascript
JS数组的常用方法整理
Mar 31 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 #Javascript
详解js中的原型,原型对象,原型链
Jul 16 #Javascript
详解Webpack4多页应用打包方案
Jul 16 #Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 #Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 #Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 #Javascript
微信小程序实现列表的横向滑动方式
Jul 15 #Javascript
You might like
PHP insert语法详解
2008/06/07 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
Javascript实现字数统计
2015/07/03 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Python装饰器原理与用法分析
2018/04/30 Python
利用python在excel中画图的实现方法
2020/03/17 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
财务管理专业毕业生求职信范文
2013/09/21 职场文书
市场策划求职信
2014/08/07 职场文书
入股合作协议书
2014/10/12 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
地道战观后感500字
2015/06/04 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android