ES6 Promise和JQuery中Promise的区别？

Question

大家能解释一下，为啥用ES6 Promise和JQuery Promise输出的结果为啥不一样吗？

1.使用JQuery Promise

var log = console.log;

function MyPromise(fun){
  var deferred = $.Deferred();
  fun(deferred.resolve, deferred.reject);
  return deferred.promise();
}

setTimeout(function () {
    log(1);
});

new MyPromise(function(resolve, reject){
  log(2);
  resolve();
  log(3);
}).then(function(){
  log(4);
});

log(5);

输出结果如下：

2.使用ES6 Promise

var log = console.log;
setTimeout(function () {
    log(1);
});

new Promise(function (resolve) {
    log(2);
    resolve();
    log(3);
}).then(function () {
    log(4);
});

log(5);

输出结果如下：

为什么不一样呢？

3.上面两个Promise和下面这个又有什么不一样呢？

var log = console.log;

function MyPromise(fun){
  return {
      then: function(resolve, reject){
        fun(resolve, reject);
      }
  };
}

setTimeout(function () {
    log(1);
});

new MyPromise(function(resolve, reject){
  log(2);
  resolve();
  log(3);
}).then(function(){
  log(4);
});

log(5);

Answer 1

因为jquery的promise的回调不保证是异步的，而es6的保证是异步的，明显es6更合理，更可控

Answer 2

哈哈，看了JQuery的Deferred源码，写的很精炼。不耐着性子慢慢看，再debug一下，还不好彻底搞明白呢。

简单改造一下第三种方式，实现和JQuery Promise输出一样的结果。

var log = console.log;

function MyPromise(fun){
  return {
      then: function(resolve, reject){
        var state = 'pending';
        fun(function (){
            state = 'resolve';
        }, function (){
            state = 'reject';
        });

        switch(state){
            case 'resolve':
                resolve.apply(this, arguments);
                break;
            case 'reject':
                reject.apply(this, arguments);
                break;
        }
      }
  };
}

setTimeout(function () {
    log(1);
});

new MyPromise(function(resolve, reject){
  log(2);
  resolve();
  log(3);
}).then(function(){
  log(4);
});

log(5);

Answer 3

第三种情况是执行resolve()吧;resolve是传入的参数function(){log(4);}.

Answer 4

第二种建议去看看关于es6最新的宏任务（macrotask）和微任务(microtask)，应该会有答案，第三个代码写的太绕了，看了半天才看懂，这个就是普通的函数调用，实际then是你自己定义的函数，按你的定义一个有两个参数，但是你只传了一个参数进去，然后就是各个函数调用，没有回调和异步。