Generator

熟悉ES6语法的同学们肯定对Generator(生成器)函数不陌生,这是一个化异步为同步的利器。

栗子:

function* abc() {
let count = 0;
while(true) {
let msg = yield ++count;
console.log(msg);
}
} let iter = abc();
console.log(iter.next().value);
// 1
console.log(iter.next('abc').value);
// 'abc'
// 2

首先,我们先简单回顾一下JS的运行规则:

  1. JS是单线程的,只有一个主线程
  2. 函数内的代码从上到下顺序执行,遇到被调用的函数先进入被调用函数执行,待完成后继续执行
  3. 遇到异步事件,浏览器另开一个线程,主线程继续执行,待结果返回后,执行回调函数

那么,Generator函数是如何进行异步化为同步操作的呢?

实质上很简单,* 和 yield 是一个标识符,在浏览器进行软编译的时候,遇到这两个符号,自动进行了代码转换:

// 异步函数
function asy() {
$.ajax({
url: 'test.txt',
dataType: 'text',
success() {
console.log("我是异步代码");
}
})
} function* gener() {
let asy = yield asy();
yield console.log("我是同步代码");
}
let it = gener().next();
it.then(function() {
it.next();
})
// 我是异步代码
// 我是同步代码
// 浏览器编译之后
function gener() {
// let asy = yield asy(); 替换为
$.ajax({
url: 'test.txt',
dataType: 'text',
success() {
console.log("我是异步代码");
// next 之后执行以下
console.log("我是同步代码");
}
})
// yield console.log("我是同步代码");
}

整个过程类似于,浏览器遇到标识符 * 之后,就明白这个函数是生成器函数,一旦遇到 yield 标识符,就会将以后的函数放入此异步函数之内,待异步返回结果后再进行执行。

更深一步,从内存上来讲:

普通函数在被调用时,JS 引擎会创建一个栈帧,在里面准备好局部变量、函数参数、临时值、代码执行的位置(也就是说这个函数的第一行对应到代码区里的第几行机器码),在当前栈帧里设置好返回位置,然后将新帧压入栈顶。待函数执行结束后,这个栈帧将被弹出栈然后销毁,返回值会被传给上一个栈帧。

当执行到 yield 语句时,Generator 的栈帧同样会被弹出栈外,但Generator在这里耍了个花招——它在堆里保存了栈帧的引用(或拷贝)!这样当 it.next 方法被调用时,JS引擎便不会重新创建一个栈帧,而是把堆里的栈帧直接入栈。因为栈帧里保存了函数执行所需的全部上下文以及当前执行的位置,所以当这一切都被恢复如初之时,就好像程序从原本暂停的地方继续向前执行了。

而因为每次 yield 和 it.next 都对应一次出栈和入栈,所以可以直接利用已有的栈机制,实现值的传出和传入。

至此,Generator 的魔力已经揭开。

Promise

Promise的用法大家应该都很熟悉:

let pr = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("成功执行啦");
}, 2000)
})
pr.then(function(data) {
console.log(data); // 成功执行啦
})

那么 Promise 是如何实现异步加载的呢?

Promise 并没有大家想的那么神秘,其本质就是一个状态机。

想要实现一个土生土长的 Promise 其实很简单,状态机,我们需要几个参数:

  • __success_res 用来存储成功时的参数
  • __error_res 用来存储失败时的参数
  • __status 用来存储状态
  • __watchList 用来存储执行队列

下面就手动实现一个 Promise

class Promise1 {
constructor(fn) {
// 执行队列
this.__watchList = [];
// 成功结果
this.__success_res = null;
// 失败结果
this.__error_res = null;
// 状态
this.__status = "";
fn((...args) => {
// 保存成功数据
this.__success_res = args;
// 状态改为成功
this.__status = "success";
// 若为异步则回头执行then成功方法
this.__watchList.forEach(element => {
element.fn1(...args);
});
}, (...args) => {
// 保存失败数据
this.__error_res = args;
// 状态改为失败
this.__status = "error";
// 若为异步则回头执行then失败方法
this.__watchList.forEach(element => {
element.fn2(...args);
});
});
} // then 函数
then(fn1, fn2) {
if (this.__status === "success") {
fn1(...this.__success_res);
} else if (this.__status === "error") {
fn2(...this.__error_res);
} else {
this.__watchList.push({
fn1,
fn2
})
}
}
}

这样就简单实现了 Promise 的功能,在使用上和JS的 Promise 并无其他区别,若想实现 Promise.all 方法,则只需要进行小小的迭代:

Promise1.all = function(arr) {
// 存放结果集
let result = [];
return Promise1(function(resolve, reject) {
let i = 0;
// 进行迭代执行
function next() {
arr[i].then(function(res) {
// 存放每个方法的返回值
result.push(res);
i++;
// 若全部执行完
if (i === result.length) {
// 执行then回调
resolve(result);
} else {
// 继续迭代
next();
}
}, reject)
}
})
}

至此,Generator 和 Promise 都已解析完成。

浅谈Generator和Promise原理及实现的更多相关文章

  1. 浅谈ES6原生Promise

    浅谈ES6原生Promise 转载 作者:samchowgo 链接:https://segmentfault.com/a/1190000006708151 ES6标准出炉之前,一个幽灵,回调的幽灵,游 ...

  2. TODO:浅谈pm2基本工作原理

    TODO:浅谈pm2基本工作原理 要谈Node.js pm2的工作原理,需要先来了解撒旦(Satan)和上帝(God)的关系. 撒旦(Satan),主要指<圣经>中的堕天使(也称堕天使撒旦 ...

  3. 浅谈SpringBoot核心注解原理

    SpringBoot核心注解原理 今天跟大家来探讨下SpringBoot的核心注解@SpringBootApplication以及run方法,理解下springBoot为什么不需要XML,达到零配置 ...

  4. 浅谈springboot自动配置原理

    前言 springboot自动配置关键在于@SpringBootApplication注解,启动类之所以作为项目启动的入口,也是因为该注解,下面浅谈下这个注解的作用和实现原理 @SpringBootA ...

  5. 浅谈 session 会话的原理

    先谈 cookie 网络传输基于的Http协议,是无状态的协议,即每次连接断开后再去连接,服务器是无法判断此次连接的客户端是谁. 如果每次数据传输都需要进行连接和断开,那造成的开销是很巨大的. 为了解 ...

  6. 浅谈Javascript中Promise对象的实现

    https://segmentfault.com/a/1190000000684654 What? Promise是CommonJS的规范之一,拥有resolve.reject.done.fail.t ...

  7. 浅谈jQuery的promise

    jquery中的Promise,也就是我们所知道的Deferred对象. 举例1: var data=""; function runAsync(){ var def = $.De ...

  8. 浅谈JavaScript DDOS 攻击原理与防御

    前言 DDoS(又名"分布式拒绝服务")攻击历史由来已久,但却被黑客广泛应用.我们可以这样定义典型的DDoS攻击:攻击者指使大量主机向服务器发送数据,直到超出处理能力进而无暇处理正 ...

  9. 浅谈HashMap 的底层原理

    本文整理自漫画:什么是HashMap? -小灰的文章 .已获得作者授权. HashMap 是一个用于存储Key-Value 键值对的集合,每一个键值对也叫做Entry.这些个Entry 分散存储在一个 ...

随机推荐

  1. Partition Refinement

    今天613问我怎么做DFA最小化..呃..这个我怎么可能会做呢.. 于是我就去学习了一点姿势,先把我Partition Refinement Data Structure的代码发上来好了.. 我挺菜的 ...

  2. html table 表格

    前面的话 在CSS出现之前,table元素常常用来布局.这种做法在HTML4之后不再推荐使用.而现在有些矫枉过正,使用table展示数据都可能会被说不规范.本文将详细介绍HTML表格table tab ...

  3. Java EE 学习(1):什么是Java EE

    转载: http://www.jb51.net/article/13059.htm 经常听朋友说什么J2EE,终于知道点什么是J2EE了,汗一个,上网搜了下这个说的比较详细了,J2EE,Java2平台 ...

  4. ofbiz数据库表结构设计(3)- 订单ORDER

    对于订单来说,主要的表就是ORDER_HEADER和ORDER_ITEM.ORDER_HEADER就是所谓的订单头,一条记录代表一条订单. ORDER_PAYMENT_PREFERENCE是订单的支付 ...

  5. 【HDOJ5532】Almost Sorted Array(签到)

    题意:给定一个n个数的数列,问删掉一个数之后剩余部分是否可以单调不增或单调不减 n<=1e5,a[i]<=1e5 思路:预处理一下前后缀是否合法 #include<cstdio> ...

  6. android的布局-----RelativeLayout(相对布局)

    学习导图 注:父容器定位的属性值只能是Boolean ,兄弟组件定位的属性值只能是ID 典型案例(梅花) <?xml version="1.0" encoding=" ...

  7. hdu 2136(质数筛选+整数分解)

    Largest prime factor Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  8. 【转载】SQL Server 2008 R2 使用的端口解析

    转载博客:http://www.cnblogs.com/studyzy/archive/2009/11/30/1614139.html SQL Server在安装到服务器上后,出于服务器安全的需要,所 ...

  9. (二)Python selenium

    chromedriver版本    支持的Chrome版本 v2.29                     v56-58v2.28                     v55-57v2.27  ...

  10. Facebook为什么使用PHP编程语言?

    当日本计算机科学家松本行弘决定创造一种名叫 Ruby (这种技术支撑了 Twitter.Hulu以及其他许多现代 Web 流行网站) 的程序语言时,他是从 1966 年一部名为 Babel-17 的科 ...