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. opencv——图像直方图与反向投影

    引言 在图像处理中,对于直方图这个概念,肯定不会陌生.但是其原理真的可以信手拈来吗? 本文篇幅有点长,在此列个目录,大家可以跳着看: 分析图像直方图的概念,以及opencv函数calcHist()对于 ...

  2. java基础——简易计算器的实现

    计算器: import java.util.Scanner;​public class CalculateDemo {    public static void main(String[] args ...

  3. $(cd "$(dirname "$0")",pwd) 解析

    xx.sh 文件内容如下: #!/bin/bash BIN_FOLDER=$(cd "$(dirname "$0")";pwd) echo $BIN_FOLDE ...

  4. xl release 安装

    前提,该版本需要jdk-1.8以上(包括1.8),内存大于等于2G,磁盘最小空间2G,操作系统windows或者unix-family xl release是一个端到端的管道编排工具. 下载XL-re ...

  5. 056.Python前端Django模型ORM多表基本操作

    一 准备工作 1.1 新建一个项目 root@darren-virtual-machine:~# cd /root/PycharmProjects/ root@darren-virtual-machi ...

  6. Scala 中 object、class 与 trait 的区别

    Scala 中 object.class 与 trait 的区别 引言 当你刚入门 Scala,肯定会迫不及待想要编写自己的第一个 Scala 程序.如果你已经在交互模式下敲过 Scala 代码,想必 ...

  7. STM32 KEIL 下的 printf 函数

    1 //加入以下代码,支持printf函数,而不需要选择use MicroLIB 2 #if 1 3 #pragma import(__use_no_semihosting) 4 //标准库需要的支持 ...

  8. 10.9 ping:测试主机之间网络的连通性

    ping命令 可用于测试主机之间网络的连通性.执行ping命令会使用ICMP传输协议,发出要求回应的信息,若远端主机的网络功能没有问题,就会回应该信息,因而可得知该主机运作正常.     ping命令 ...

  9. [Django高级之批量插入数据、分页器组件]

    [Django高级之批量插入数据.分页器组件] 批量插入数据 模板层models.py from django.db import models class Books(models.Model): ...

  10. linux文件内容列传行_行转列

    ================ 文件内容列传行_行转列  ================ 一.列转行 1.编辑测试文件 vi log.txt 16:23:00 8.2% 1773620k 16:2 ...