阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Javascript generator 原理

      问题

      Javascript generator 原理

      答案

      Generator 是 ES6 中新增的语法,和 Promise ⼀样,都可以⽤来异步编程

      // 使⽤ * 表示这是⼀个 Generator 函数
      // 内部可以通过 yield 暂停代码
      // 通过调⽤ next 恢复执⾏
      function* test() {
          let a = 1 + 2;
          yield 2;
          yield 3;
      }
      let b = test();
      console.log(b.next()); // > { value: 2, done: false }
      console.log(b.next()); // > { value: 3, done: false }
      console.log(b.next()); // > { value: undefined, done: true }
      

      从以上代码可以发现,加上 * 的函数执⾏后拥有了 next 函数,也就是说函数执⾏后返回了⼀个对象。每次调⽤ next 函数可以继续执⾏被暂停的代码。以下是 Generator 函数的简单实现

      // cb 也就是编译过的 test 函数
      function generator(cb) {
          return (function() {
              var object = {
              next: 0,
              stop: function() {}
              };
              return {
                  next: function() {
                      var ret = cb(object);
                      if (ret === undefined) return { value: undefined, done: true };
                      return {
                          value: ret,
                          done: false
                      };
                  }
              };
          })();
      }
      // 如果你使⽤ babel 编译后可以发现 test 函数变成了这样
      function test() {
          var a;
          return generator(function(_context) {
              while (1) {
                  switch ((_context.prev = _context.next)) {
                      // 可以发现通过 yield 将代码分割成⼏块
                      // 每次执⾏ next 函数就执⾏⼀块代码
                      // 并且表明下次需要执⾏哪块代码
                      case 0:
                      a = 1 + 2;
                      _context.next = 4;
                      return 2;
                      case 4:
                      _context.next = 6;
                      return 3;
                      // 执⾏完毕
                      case 6:
                      case "end":
                      return _context.stop();
                  }
              }
          });
      }
      

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录