JS里的异步构造函数

众所周知,Js的构造函数是不能加上async/await来实现异步实例化的,一般当需要一个对象的属性是异步的结果时可以这样写:

//! 一个需要指定时间后返回的异步函数
function delay(timeout) {
return new Promise((resolve) => setTimeout(() => resolve("end"), timeout));
} class Test {
async init() {
this.end = await delay(1000);
}
}
(async function () {
const test = new Test(); //? 实例化
await test.init(); //? 初始化end属性
console.log(test.end);
})();

但是当我想要在实例化时就调用该属性时就还要调用一次init(),这未免太麻烦了,所以想要在实例化时就把该属性赋值,就像这样const test = await new Test()

这时找到了这篇文章,该作者提供了这样一段代码来实现了异步构造函数:

class MyClass {
constructor(timeout) {
this.completed = false const init = (async () => {
await delay(timeout)
this.completed = true delete this.then
return this
})() this.then = init.then.bind(init)
}
}
(async function(){
const myclass = await new MyClass(1000);
})()

在解释这段代码前就得说说PromiseLike了:一个有then方法,且该方法接收resolve,reject两个参数的对象,就像这样:

const PromiseLike = {
then(resolve) {
resolve("i am PromiseLike");
},
};
(async function () {
const something = await PromiseLike;
console.log(something); // i am PromiseLike
})();

即使PromiseLike不是一个函数,它也会被await调用对象里的then方法并resolve出结果

现在回到刚才那段代码,注意到它最后的一段了吗

this.then = init.then.bind(init)

这句话把一个异步函数initthen给了实例,所以在调用new Myclass 后得到的实例上有着一个then方法,这个then方法又会被前面的await解析,这时实质上解析的就是init这个异步函数的then而这个then返回的是该类的实例化删除then后的this

这样await new MyClass()会等到init的异步执行完毕才会返回值,这个返回值是init的resolve。

总结一下:该方法其实仍然是同步实例化出了对象,但是await会马上异步执行实例化里then,然后返回出then里删除了then方法的this,这样就做到了一句话进行实例化并初始化异步属性。

知道了这个原理后,最初的问题就解决了:

class Test {
constructor() {
const init = (async () => {
this.end = await delay(1000);
delete this.then;
return this;
})();
this.then = init.then.bind(init);
}
}
(async function () {
const test = await new Test();
console.log(test.end); // end
})();

该作者也提供了一个基类用来继承出异步构造函数,可以到原文去看看。

参考:异步构造函数 - 构造函数与Promise的结合

JS里的异步实例化的更多相关文章

  1. 理解 Node.js 里的 process.nextTick()

    有很多人对Node.js里process.nextTick()的用法感到不理解,下面我们就来看一下process.nextTick()到底是什么,该如何使用. Node.js是单线程的,除了系统IO之 ...

  2. js里的setTimeout和setInterval之后的页面是空白,阻塞浏览器的document对象,但是不阻塞script方法

    js里的setTimeout和setInterval是否进程阻塞? 阻塞浏览器的document对象,但是不阻塞script方法 当你在setTimeout中使用document.write时是不行的 ...

  3. Log4.Net 在Winfrom、MVC、ashx程序里的使用,ashx程序里使用异步

    最近做一个双11活动的,是一套相关的H5页面.本来以为难度不大,但是做下来几天还是遇到些问题.就总结一下吧,还是有收获的. 1.在H5页面中,有一个遮罩层,还是挺有意思的.直接用div+css控制遮罩 ...

  4. Log4.Net 在Winform、MVC、ashx程序里的使用,ashx程序里使用异步

    最近做一个双11活动的,是一套相关的H5页面.本来以为难度不大,但是做下来几天还是遇到些问题.就总结一下吧,还是有收获的. 1.在H5页面中,有一个遮罩层,还是挺有意思的.直接用div+css控制遮罩 ...

  5. 【本周面试题】第2周 - js单线程和异步相关问题

    硬性知识点考察: 为什么js是单线程的? 因为js设计最初是为了操作dom而生,如果是多线程的,当多个线程同时修改一个dom时就会产生冲突,所以设计成单线程,一次只能做一件事. 既然是单线程为什么要有 ...

  6. js多个异步请求

    一,两个(或多个)js异步并发执行,怎么在两个AJax异步操作之后执行一个新的操作 原题来自 ES6 方法 1.Promise 包装异步ajax操作,2.定义async 函数,3.用await等待pr ...

  7. 为什么JS是单线程?JS中的Event Loop(事件循环)?JS如何实现异步?setimeout?

    https://segmentfault.com/a/1190000012806637 https://www.jianshu.com/p/93d756db8c81 首先,请牢记2点: (1) JS是 ...

  8. uni-app如何解决在for循环里调用异步请求获取数据顺序混乱问题?

    总结/朱季谦 先前有一次做uni-app的js接口对接时,遇到过这样的情况,在for循环里,调用一个异步请求时,返回来的值顺序是乱的,因此,在以下的代码里,push到数组里的值,每次的顺序可能都是不一 ...

  9. PHP中的__toString方法(实现JS里的链式操作)

    _toString方法是在打印对象时自动调用的魔术方法,如果不声明会报以下错 Catchable fatal error: Object of class String could not be co ...

随机推荐

  1. powercli The SSL connection could not be established, see inner exception. 问题解决

    Connect-VIServer -Server 这里是"SSL连接不能建立......"这实际上意味着你没有一个有效的证书.如果你想连接到vCenter没有一个有效的证书,您必须 ...

  2. [bug] org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)

    问题 原因不明,按参考文章中的做法,加了空格,clean后解决 参考 http://www.qishunwang.net/news_show_7922.aspx https://www.cnblogs ...

  3. [bug] HMaster启动后几秒消失

    参考 https://blog.csdn.net/weixin_44896798/article/details/97800045 https://blog.csdn.net/liudi1993/ar ...

  4. [刷题] PTA 7-32 说反话-加强版

    题目描述: 给定一个英语句子,各个单词之间用空格分隔.要求编写程序,将所有单词倒序输出 输入示例: Hello World Here I Come 输出示例: Come I Here World He ...

  5. 从CentOS7默认安装的/home中转移空间到根目录/ - LVM操作简明教程

    一.基础概念 Cent0S 7默认启用LVM2(Logical Volume Manager),把机器的一块硬盘分为两个区sda1和sda2,其中分区sda1作为系统盘/boot挂载,少量空间:sda ...

  6. DOCKER学习_015:Docker网络补充

    1 Docker容器使用LINK方式互通 在前面的网络实验中,当同一主机的两个Docker容器,使用Bridge网桥互通时,我们必须使用docker inspect Dockerid查找出Docker ...

  7. PHP8开启PHPStorm + Xdebug3

    下载Xdebug 需要下载对应php版本xdebug 否则对加载xdebug失败 https://xdebug.org/download 我的是PHP版本 为php8.0.3-nts-x64 安装xd ...

  8. YOLOV4知识点分析(一)

    YOLOV4知识点分析(一) 简 介 yolov4论文:YOLOv4: Optimal Speed and Accuracy of Object Detection arxiv:https://arx ...

  9. Spring Cloud系列(六):配置中心

    在使用Spring Boot的时候,我们往往会在application.properties配置文件中写一些值,供应用使用,这样做的好处是可以在代码中引用这些值,当这些值需要作出修改的时候,可以直接修 ...

  10. Spring Cache缓存技术,Cacheable、CachePut、CacheEvict、Caching、CacheConfig注解的使用

    前置知识: 在Spring Cache缓存中有两大组件CacheManager和Cache.在整个缓存中可以有多个CacheManager,他们负责管理他们里边的Cache.一个CacheManage ...