木灵鱼儿
阅读:693
创建型模式:原型模式
简介
原型模式指的是:用一个已经创建的实例作为原型,通过复制该原型对象来创建一个和原型相同或者相似的新对象。
这个原型不同于js中的prototype,它指的是被克隆的对象。
在java中克隆可以通过Object父类中的clone方法实现,但是在前端中,是没有这种方式的,我们需要通过其他方法实现克隆。
克隆又分浅克隆和深克隆,因为引用类型的存在,浅克隆对引用类型只会克隆该类型的内存地址,而深克隆则会完全复制一份引用类型对象,达到完全克隆。
原型模式也是用于创建一个对象,而这个对象可能非常复杂,为了减少消耗的资源,更高效的生成对象。
反例
假设我们现在有这么一段代码:
const run = {
a: 1,
b: 2,
};
class A {
name: string;
age: number;
run: object;
constructor(name: string, age: number, run: object) {
this.name = name;
this.age = age;
this.run = run;
}
getName() {
return this.name;
}
getAge() {
return this.age;
}
getRun() {
return this.run;
}
}
const a = new A("小明", 16, run);
当我们希望能有一个实例a的克隆对象,用于做一些其他操作,而不影响原对象时,可能常常是这么去做:
const a = new A("小明", 16, run);
const b = new A("小明", 16, run);
重新new一个新的对象,但是这就会有一些问题:
- 我没有准确的拿到a的实例属性,它有可能在实例后,被其他人做了特殊操作,改动了属性,然而
new
是无法感知到的。 - 如果这个类操作非常复杂,重复的
new
会产生很大的性能消耗。
为了准确拿到a的实例属性,我们可以这么写:
const b = new A(a.getName(), a.getAge(), a.getRun());
这么写虽然可以拿到准确的属性,但是不太现实,第一代码量非常之大,第二a实例也不一定会有对应的get方法获取。
为了解决这些问题,我们可以通过原型模式,进行克隆拷贝。
浅克隆
我们将a
这个实例,作为我们的原型进行浅克隆。
//方法1
const b = Object.create(a, {});
//方法2
const c = Object.assign({}, a);
//方法3
const d = { ...a };
浅克隆的对象,它的属性如果是引用类型,那么其实都是同一个对象的引用,通过c.run.a = 3
的改动,会影响到所有的浅克隆对象的run属性。
这显然不是我们期待的,我们可能希望克隆的对象是一个完全独立,但是属性相似的对象。
深度克隆
实现深度克隆,最简单的就是JSON的序列化。
const b = JSON.parse(JSON.stringify(a));
a实例里面如果有RegExp、Error
对象,那么序列化后你将得到一个空的对象。
如果有function、undefined
对象,那么序列化后得到的是一个null
;
如果有NaN、Infinity、-Infinity、null
,那么序列化后得到也都是一个null
;
看这个例子:
const a = {
a: 1,
b: new RegExp("23", "ig"),
c: new Error("2131"),
d: function () {},
e: undefined,
f: NaN,
g: Infinity,
o: -Infinity,
p: null,
};
const b = JSON.stringify(a);
//得到: '{"a":1,"b":{},"c":{},"f":null,"g":null,"o":null,"p":null}'
所以需要注意下序列化并不是万能的。
为此就出现了手写深度克隆的方式:
function deepClone(obj) {
// 先把特殊情况全部过滤掉 null undefined date reg
if (obj == null) return obj; // null 和 undefined 都不用处理
if (obj instanceof Date) return new Date(obj);
if (obj instanceof RegExp) return new RegExp(obj);
if (typeof obj !== 'object') return obj; // 普通常量直接返回
// 不直接创建空对象的目的:克隆的结果和之前保持相同的所属类,
// 同时也兼容了数组的情况
let newObj = new obj.constructor;
for (const key in obj) {
if (obj.hasOwnProperty(key)) { // 不拷贝原型链上的属性
newObj[key] = deepClone(obj[key]); // 递归赋值
}
}
return newObj;
}
更多深度克隆的内容可以查看该文章:《Javascript经典面试之深拷贝VS浅拷贝》
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
行为模式:职责链模式
简介责任链模式:为了避免请求发送者与多个请求处理者耦合在一起,于是将所有请求的处理者通过前一对象记住其下一个对象的引用而连成一条链;当有请求发生时,可将请求沿着这条链传递,直到有对象处理它为止。举个例子,小明因为感冒需要请假,此时它的需要请3天,但是他的小组长只有1天的允许权限,小组长的领导项目经理有2天的权限,而能允许3天的只有老板,但是小明是新员工,所以它只能一步步的问,直到问到老板才成功请到了假期。但是如果小明的公司更大,那么它的审批流程就可能会更加复杂,如果人事流通了,说不定还得重新问一遍,有没有什么办法能方便一点呢?于是就有了职责链模式,它可以理解为一个申请表单,只要有领导在职...

行为模式:策略模式
简介策略模式: 该模式定义了一系列算法,并将每个算法封装起来,使它们可以相互替换,且算法的变化不会影响使用算法的客户。策略模式属于对象行为模式,它通过对算法进行封装,把使用算法的责任和算法的实现分割开来,并委派给不同的对象对这些算法进行管理。简单点来说就是,我现在有10个算法,可能会根据不同的状态使用不同的算法,一般的做法就是if else或者switch这种判断方式,这样的话就跟状态模式一样,后续新增的算法和状态判断又得套一层if判断,这样的话代码的可读性就下降,且维护起来比较麻烦。我们来看个代码例子:function calc(type: number, a: number, b: ...
行为模式:状态模式
简介状态模式:对有状态的对象,把复杂的“判断逻辑”提取到不同的状态对象中,允许状态对象在其内部状态发生改变时改变其行为。简单点来说,我们在平时开发的过程中,会遇到一个对象中会判断一个“状态”的不同,从而会使用不同的行为(函数之类的调用),常见的做法就是if else或者switch这种判断方式,当我们一个状态有多种形式时,可能会产生大量的if else语句,这就不好维护了,如果每次新增一种状态,就得改动一次该对象,显然不符合我们的开闭原则。而状态模式是将每种状态的处理都单独提取出来,然后通过源对象进行组合使用,状态对象会持有源对象,当状态A发生改变时,会调用持有的源对象的设置状态方法,将...

行为模式:解释器模式(太难了,不一定正确)
简介解释器模式:给分析对象定义一个语言,并定义该语言的文法表示,再设计一个解析器来解释语言中的句子。因为是自定义的语言,所以它的语法表示肯定是有一些相似的地方,比如必须使用空格分割这种要求,或者使用其他特殊的字符。在这个基础上我们才能进行下一步,而不是说随便写个句子就可以的。举个简单的例子:我们博客编辑文章语言是markdown,而文法就是md中的各种语法,比如## 我是2级标题;这个就表示h2标签,这个规则就是文法,我们需要创建一个解释器来解释语法,说白了就是我们需要将各种文法组成的句子转换成html标签。文法:用于描述语言的语法结构的形式规则解释器会将解释的语言生成一个抽象的语法树,...

行为模式:备忘录模式
简介备忘录模式:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态,以便以后当需要时能将该对象恢复到原先保存的状态。该模式又叫快照模式。其实就是一种设计历史记录的方式,在ps中,每次操作的记录都会进行一次记录,用户可以自己选择需要回退到哪条记录,而备忘录模式,是一种能记录一个对象的内部状态,可以通过方法获取到之前保存的内部状态数据,从而进行恢复。这里面最复杂的就是需要设计好需要记录的状态数据,然后通过谁去保存,谁去控制保存的数据,谁去主动进行创建备忘录数据和读取备忘录数据。所以他会有三个角色:备忘录角色:专门存储内部状态数据的类,这个类的实例被管理者管理,被发起者...

行为模式:中介者模式
简介中介者模式:定义一个中介对象来封装一系列对象之间的交互,使原有对象之间的耦合松散,且可以独立地改变它们之间的交互。中介者模式又叫调停模式,它是迪米特法则的典型应用。我们来举个例子:机场的飞机降落起飞,都是需要通过塔台进行调度的,如果没有塔台的调度,5架飞机之间需要相互通信确认,以免出现问题,但是如果这么做,一定会出现问题,我们可以看下他们此时的关系网络。每一架飞机都要和其他4架飞机进行沟通通讯,如果这个关系网放在代码上去实现,这是非常难看的,这代码神仙看了都得摇头。而中介者就是为了解决这种网状的关系,通过增加一个中介对象,大家都通过中介对象进行通信,从而将飞机1对4的情况转为1对1的...

行为模式:观察者模式
简介观察者模式:指多个对象间存在一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。这种模式有时又称作发布-订阅模式、模型-视图模式。而我们前端vue的响应式原理其实就是观察者模式的实现,只不过他是完全解耦的发布订阅者模式;和基础的观察者模式实现上会有不同,原理都是一样的。观察者模式是为了将重要的部分与辅助部分进行解耦,我们举个例子:在前端中,我们的滚动条距离就可以理解为一个重要部分,我们监听了scroll事件,并在回调函数中处理了一条特殊操作,比如根据滚动的距离操作header元素显隐。此时这个代码量很少,我们知道scroll事件是不建议监听太多的,...
行为模式:迭代器模式
简介迭代器模式:提供一个对象来顺序访问聚合对象中的一系列数据,而不暴露聚合对象的内部表示。简单来说就是再程序设计中,对于一些自定义的数据结构对象,比如链表啊,或者系统提供的数据结构对象,他们的遍历方法通常会写在数据结构的类中,也就是说数据和遍历的方法是写在同一个类里面。这种方式不利于程序的扩展,因为如果要改动遍历的方法,就必须改动源数据,这违背了开闭原则。既然遍历的方法不能写在数据类中,那么将遍历的方法让客户实现不就好了,但是同样也是不可取的,如果交由客户去写,第一是会暴露很多不必要的属性给客户,第二是增加了客户端的使用负担。而迭代器模式很好的解决了这个问题,在迭代器模式中有以下几个角色...
行为模式:访问者模式
简介访问者模式:将作用于某种数据结构中的各元素的操作分离出来封装成独立的类,使其在不改变数据结构的前提下可以添加作用于这些元素的新的操作,为数据结构中的每个元素提供多种访问方式。它将对数据的操作与数据结构进行分离,是行为类模式中最复杂的一种模式。有一点点抽象,前一句话的意思是指在写好一个类之后,这个类就基本上不需要改动了(只要需求不改),这其实就是为了解决类结构不变但操作处理逻辑易变的问题,把对数据的操作都封装到访问者类中,我们只需要调用不同的访问者,而无需改变改变结构类,实现了。简单来说就是将一些操作作为扩展分离出去, 这些扩展的功能可能现在没有,以后会有,我们无法知道以后的情况,于是...
行为模式:命令模式
简介命令模式是将一个请求封装为一个对象,使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通,这样方便将命令对象进行储存、传递、调用、增加与管理。举个简单的例子:我有一个饭店,共有五个厨师:A,B,C,D,E;每个厨师都会做不同的菜,但是我没有菜单,于是客人就必须知道我有几个厨师,他们分别会做什么菜,于是就会产生下面这些情况:客人1想吃青椒炒蛋,于是问了好几个厨师才知道C厨师会做,于是它通知C厨师做青椒炒蛋客人2想吃冒菜,于是他也问了好几个厨师,找到E厨师制作...更多你会发现客人与厨师耦合度非常之高,这显然不利于饭店的发展,然后我们想一下生活中的真实情况:每个饭店都...