当前位置: 首页 > Web前端 > JavaScript

在js中使用Proxy实现单例模式

时间:2023-03-26 21:53:02 JavaScript

比较靠谱首先实现://singleton.jsexportdefaultfunctionsingleton(className){letinsreturnnewProxy(className,{construct(target,argArray){if(!ins){ins=newtarget(...argArray)}returnins}})}这里使用Proxy的construct配置属性来拦截构造函数的new操作。使用:Video.jsimportsingletonfrom'./singleton';classVideo{constructor(){console.log('create');}}constnewVideo=newsingleton(Video)export{newVideoasVideo}//index.jsimport{Video}from'./Video.js';constv1=newVideo()constv2=newVideo()console.log(v1===v2);//true为什么要这样写?因为:我们一般是这样实现单例模式的://singleton.jsexportdefaultfunctionsingleton(className){letins//这里返回一个新类returnclass{constuctor(...args){if(!ins){ins=newclassName(...args)}returnins}})}和上面的Proxy实现类似,但是有一个缺点,就是不能操作原类的原型对象,添加或者修改里面的属性://index.jsimport{Video}from'./Video.js';constv1=newVideo()v1.prototype.play=funcmotion(){console.log("play")}v1.play()//v1.play不是函数,因为我们用单例方法创建的实例不是原来Video类的实例,而是单例方法returns这里添加到新类原型的方法是Video的原型上的方法。使用Proxy方式实现可以有效避免这种情况。