2c:null 2d:["$","title",null,{"children":"Subclassing JavaScript Promise retaining native behaviors | rix | Observable"}] 32:T665,However it's not very clear what exactly `resolvePromise`, `performPromiseThen`, `suspend` and `resume` do from the article. So I'd like to take it further to explain them. ```js function foo(v) { // resumable function foo(v) { const implicit_promise = new Promise // implicit_promise = createPromise(); ((resolvePromise, _throw) => { // // 1. wrap v in a promise const promise = new Promise(resolvePromise => // promise = createPromise(); resolvePromise(/* promise, */ v)); // resolvePromise(promise, v); // // 2. attach handlers for resuming foo const throwaway = /* createPromise(); */ // throwaway = createPromise(); promise.then( // performPromiseThen(promise, res => _resume(/* «foo», */ res), // res => resume(«foo», res), err => _throw(/* «foo», */ err), // err => throw(«foo», err), /* throwaway */) ; // throwaway); function _resume(/* «foo», */ res) { // // 3.a suspend foo ... w = /* resolved */ res; // w = suspend(«foo», ...); resolvePromise(/* implicit_promise, */ w); // resolvePromise(implicit_promise, w); } }); // // 3.b ... and return implicit_promise return implicit_promise; // suspend(..., implicit_promise); } // } ```33:T581,So we can update our interpretation into something like this: ```js function foo(v) { // resumable function foo(v) { const implicit_promise = new Promise // implicit_promise = createPromise(); ((resolvePromise, _throw) => { // // 1. wrap v in a promise only when needed const promise = promiseResolve(v); // promise = promiseResolve(v); // // 2. attach handlers for resuming foo const throwaway = /* createPromise(); */ // throwaway = createPromise(); promise.then( // performPromiseThen(promise, res => _resume(/* «foo», */ res), // res => resume(«foo», res), err => _throw(/* «foo», */ err), // err => throw(«foo», err), /* throwaway */) ; // throwaway); function _resume(/* «foo», */ res) { // // 3.a suspend foo ... w = /* resolved */ res; // w = suspend(«foo», ...); resolvePromise(/* implicit_promise, */ w); // resolvePromise(implicit_promise, w); } }); // // 3.b ... and return implicit_promise return implicit_promise; // suspend(..., implicit_promise); } ```34:T49c,There is a special operation `PromiseResolve` being used to replace the previous two operations of creating then resolving a promise. [This operation is defined as following in ECMAScript spec.](https://tc39.es/ecma262/#sec-promise-resolve) > #### 27.2.4.7.1 `PromiseResolve ( C, x )` > The abstract operation `PromiseResolve` takes arguments `C` (a constructor) and `x` (an ECMAScript language value) and returns either a normal completion containing an ECMAScript language value or a throw completion. It returns a new promise resolved with `x`. It performs the following steps when called: > 1. If `IsPromise(x)` is true, then > 1. Let `xConstructor` be ? `Get(x, "constructor")`. > 2. If `SameValue(xConstructor, C)` is true, return `x`. > 2. Let `promiseCapability` be ? `NewPromiseCapability(C)`. > 3. Perform ? `Call(promiseCapability.[[Resolve]], undefined, « x »)`. > 4. Return `promiseCapability.[[Promise]]`. Essentially we can express it like this: ```js function PromiseResolve(C, x) { if (IsPromise(x)) { const xConstructor = x.constructor; if (xConstructor === C) { return x; } } return new Promise(resolve => resolve(x)); } ```35:T79c,There are couple things at play here. First is the `C` argument. When `PromiseResolve` is being executed [when evaluating `await v`, `C` is always the native `Promise` class](https://tc39.es/ecma262/#await). Therefore, in order to make `await v` to use `v` directly as a Promise, **`v.constructor === Promise` must be true**. Secondly, and probably the most annoying thing about subclassing Promise is the `IsPromise(x)` check. You might tend to think it's just `x instanceof Promise` but it's not the case. In fact even if `x instanceof Promise` is true, `IsPromise(x)` can still be false in some cases. In fact I don't think it's even possible to express `IsPromise(x)` using plain JavaScript. [It's defined as following.](https://tc39.es/ecma262/#sec-ispromise) > 27.2.1.6 `IsPromise ( x )` > The abstract operation `IsPromise` takes argument `x` (an ECMAScript language value) and returns a `Boolean`. It checks for the promise brand on an object. It performs the following steps when called: > 1. If `x` is not an `Object`, return `false`. > 2. If `x` does not have a `[[PromiseState]]` internal slot, return `false`. > 3. Return `true`. The most significant check is on the **`[[PromiseState]]` internal slot**. This is not a value visible inside JavaScript, but only to the VM internals. The only way to populate this slot on an object is by constructing an object using the native `Promise` constructor. And the only ways to do that is either calling `new Promise()` directly, or creating native Promises by other built-ins, or extending Promise like `class MyPromise extends Promise` and call `new MyPromise()`. You cannot call `Promise.call(obj, ...)` because Promise being a class constructor cannot be called directly without `new`. There is a way to observe if `IsPromise(x)` has returned true on some value `x` in plain JavaScript, by exploiting the definition of [Promise.prototype.then](https://tc39.es/ecma262/#sec-ispromise). 36:T435,There's a lot going on. We also see a lot of errors indicating non-conforming behaviors compared to native Promise. First of all, this subclassing method "works" - `await promise` and `promise.then()` are functional. It's even passing the `IsPromise(promise)` check. However, it failed to be given passthrough treatment with `PromiseResolve(promise)`, meaning an extra wrapping Promise would be created at runtime if you do `await promise`. This may not seem costly at first, but if you use this subclass extensively in your project as a drop-in replacement for the native Promise, the cost could add up. Notice that the promise returned by `promise.then()` is also not be able to passthrough `PromiseResolve()`. The reason being `promise.constructor === MyPromise`, instead of equaling `Promise`, this is why it failed the check in `PromiseResolve()`. Then, when `Promise.prototype.then()` is called with `promise` being `this`, `promise.constructor` is again being used to construct the new Promise, and that again being an instance of `MyPromise` with the same inefficiency.37:T430,{ var __extends = (this && this.__extends) || (function () { var extendStatics = function (d, b) { extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; return extendStatics(d, b); }; return function (d, b) { if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); function creator() { // This is what ES6 class extending got transpiled to ES5 with tsc __extends(MyPromise, Promise); function MyPromise(executor) { Promise.call(this, executor); }; return MyPromise; } return await testPromise(creator, true); }38:Tf29,async function testPromise(creator, usePromiseConstructorSignature = false, isNativePromiseClass = false) { const result = html`

`; result.appendChild(md`\`\`\`js\n${creator}\n\`\`\``); function T(desc) { const t = html`

`; let error; function commit() { t.appendChild(html`

 ${desc}`);
      if (error != null) {
        t.appendChild(html`${error}`);
      }
      result.appendChild(t);
    }
    function append(more) {
      desc += more;
      return more;
    }
    return {
      try(fn) {
        try {
          return fn(append);
        } catch(e) {
          error = e;
          throw e;
        } finally {
          commit();
        }
      },
      async tryAwait(fn) {
        try {
          return await fn(append);
        } catch(e) {
          error = e;
          throw e;
        } finally {
          commit();
        }
      },
      assertTrue(fn) {
        try {
          if (!fn(append)) {
            error = new Error('Assert failed: expects true!');
          }
        } catch(e) {
          error = e;
          throw e;
        } finally {
          commit();
        }
      },
      assertFalse(fn) {
        try {
          if (fn(append)) {
            error = new Error('Assert failed: expects false!');
          }
        } catch(e) {
          error = e;
          throw e;
        } finally {
          commit();
        }
      }
    };
  }

  try {
    let then;
    let error;
    let promise;
    const className = isNativePromiseClass ? 'Promise' : 'MyPromise';

    const MyPromise = T('MyPromise = creator()').try(() => creator());
    
    if (usePromiseConstructorSignature) {
      promise = T(`promise = new ${className}(resolve => resolve(42))`).try(() => new MyPromise(resolve => resolve(42)));
    } else {
      promise = T(`promise = new ${className}(\'foo\', resolve => resolve(42))`).try(() => new MyPromise('foo', resolve => resolve(42)));
    }
  
    T(`IsPromise(promise): `).assertTrue(append => append(IsPromise(promise)));
    T(`Can passthrough PromiseResolve(promise): `).assertTrue(append => append(CanPassthroughPromiseResolve(promise)));

    if (!isNativePromiseClass) {
      T(`promise.foo()`).try(() => promise.foo());
    }
  
    try {
      then = T(`then = promise.then()`).try(() => promise.then(() => {}));
    } catch(e) {
      error = e;
    }

    try {
      await T(`await promise`).tryAwait(() => promise);
    } catch(e) {
      error = e;
    }
    
    if (error != null) {
      return result;
    }
  
    T(`promise instanceof Promise: `).try(append => append(promise instanceof Promise));

    if (!isNativePromiseClass) {
      T(`promise instanceof ${className}: `).try(append => append(promise instanceof MyPromise));
    }
  
    T(`promise.constructor === Promise: `).assertTrue(append => append(promise.constructor === Promise));

    if (!isNativePromiseClass) {
      T(`promise.constructor === ${className}: `).assertFalse(append => append(promise.constructor === MyPromise));
    }
  
    T(`IsPromise(then): `).assertTrue(append => append(IsPromise(then)));
    T(`Can passthrough PromiseResolve(then): `).assertTrue(append => append(CanPassthroughPromiseResolve(then)));
  
    T(`then instanceof Promise: `).try(append => append(then instanceof Promise));

    if (!isNativePromiseClass) {
      T(`then instanceof ${className}: `).try(append => append(then instanceof MyPromise));
    }
  
    T(`then.constructor === Promise: `).assertTrue(append => append(then.constructor === Promise));

    if (!isNativePromiseClass) {
      T(`then.constructor === ${className}: `).assertFalse(append => append(then.constructor === MyPromise));
    }

  } finally {
    return result;
  }
}39:[]
30:{"id":"d68aa0e1e17d182d","slug":"subclassing-promise","title":"Subclassing JavaScript Promise retaining native behaviors","thumbnail":"36c478c1000e6f2775e1356a646f7df4242b624f98e582e26b16b2b4c9917912","access_level":"public","create_time":"$D2023-05-31T17:55:53.720Z","update_time":"$D2023-06-01T16:47:23.030Z","view_time":null,"first_public_time":"$D2023-05-31T17:55:53.720Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"72e51317eb10aec3","login":"rix","name":"rix","avatar_url":"https://avatars-next.observableusercontent.com/20058f5572c00c2807c8c0a31d6dc913ee57ddabc4e75869a4666632e88b7fa3","tier":"starter_2024","bio":""},"version":551,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddedbb681d4376e1","login":"rix","name":"rix","avatar_url":"https://avatars-next.observableusercontent.com/20058f5572c00c2807c8c0a31d6dc913ee57ddabc4e75869a4666632e88b7fa3","tier":null,"bio":""}],"members":[{"type":"individual","id":"ddedbb681d4376e1","login":"rix","name":"rix","avatar_url":"https://avatars-next.observableusercontent.com/20058f5572c00c2807c8c0a31d6dc913ee57ddabc4e75869a4666632e88b7fa3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Subclassing JavaScript Promise retaining native behaviors","cells":[{"id":0,"value":"# Subclassing JavaScript Promise retaining native behaviors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"V8 official document has an [explanation of the implementation of `await`](https://v8.dev/blog/fast-async#await-under-the-hood) inside the V8 engine.\n\n\n  ![](https://v8.dev/_img/fast-async/await-under-the-hood.svg)\n  How `await` works **before** ES2017.
\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"In ES2017, the `await` operator got an optimization that checks the value it awaits for. If it's already a Promise, then passthrough it directly. Only wrap the value inside a new Promise when needed.\n\n\n  ![](https://v8.dev/_img/fast-async/await-code-comparison.svg)\n  How `await` works **since** ES2017.
\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":307,"value":"function IsPromise(x) {\n  const hasConstructor = Object.prototype.hasOwnProperty.call(x, 'constructor');\n  const savedConstructor = x.constructor;\n  x.constructor = undefined;\n  try {\n    Promise.prototype.then.call(x, () => {});\n    return true;\n  } catch(e) {\n    return false;\n  } finally {\n    if (hasConstructor) {\n      x.constructor = savedConstructor;\n    } else {\n      delete x.constructor;\n    }\n  }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"IsPromise(Promise.resolve(42))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"IsPromise(new Promise(resolve => resolve(42)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"{\n  class MyPromise extends Promise {\n    constructor(executor) {\n      super(executor);\n    }\n  }\n  return IsPromise(new MyPromise(resolve => resolve(42)));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"Using this `IsPromise(x)` check, we can write a function to check if a value would be passthrough when being awaited, i.e. `await x`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":339,"value":"function CanPassthroughPromiseResolve(x) {\n  if (IsPromise(x)) {\n    const xConstructor = x.constructor;\n    if (xConstructor === Promise) {\n      return true;\n    }\n  }\n  return false;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"CanPassthroughPromiseResolve(Promise.resolve(42))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"CanPassthroughPromiseResolve(new Promise(resolve => resolve(42)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"{\n  class MyPromise extends Promise {\n    constructor(executor) {\n      super(executor);\n    }\n  }\n  return CanPassthroughPromiseResolve(new MyPromise(resolve => resolve(42)));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"Wait, something is not right. How come an instance of a Promise subclass can't passthrough `PromiseResolve`?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":263,"value":"## Subclassing Promise\n\nSubclassing built-ins classes in JavaScript can have unexpected behaviors. This is because built-ins have special native semantics only applicable to that particular class. There are [discussions on this topic](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends#subclassing_built-ins) by various community members. And there are even [proposals to restrict certain types of subclassing methods](https://github.com/tc39/proposal-rm-builtin-subclassing).\n\nFor this investigation, I'd like to look into subclassing Promise in particular. I want to know what is the best way to subclass Promise so it can retain most of the behaviors of a native Promise. But in order to do this, we need to write a conformance testing suite for Promise subclasses. So I did just that, and for a baseline, let me show you how the native Promise class behaves with this suite of tests.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":457,"value":"{\n  function creator() {\n    return Promise;\n  }\n  return await testPromise(creator, true, true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"### Subclassing Promise with ES6 class extends\nNow let's try with the most obvious way of subclassing Promise using ES6 class extends syntax, and perform the conformance checks to see how close it resembles native Promise behaviors.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":326,"value":"{\n  function creator() {\n    class MyPromise extends Promise {\n      constructor(executor) {\n        super(executor);\n      }\n      foo() {}\n    }\n    return MyPromise;\n  }\n  return await testPromise(creator, true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":429,"value":"However, this method would not even function if your `MyPromise` constructor doesn't share a compatible signature with the native Promise constructor. For example, if the executor function is not the first parameter:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"{\n  function creator() {\n    class MyPromise extends Promise {\n      constructor(foo, executor) {\n        super(executor);\n      }\n      foo() {}\n    }\n    return MyPromise;\n  }\n  return await testPromise(creator);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"This time not even `promise.then()` or `await promise` are working. As we mentioned above, these function would try to create the returned Promise using `promise.constructor`. And in this case, `MyPromise` is that constructor and it has an incompatible signature than Promise, so the built-in functions failed to use it to create new Promises.\n\nLuckly we can fix both of these problems by overriding `MyPromise.prototype.constructor`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":260,"value":"{\n  function creator() {\n    class MyPromise extends Promise {\n      constructor(foo, executor) {\n        super(executor);\n      }\n      foo() {}\n    }\n    MyPromise.prototype.constructor = Promise;\n    return MyPromise;\n  }\n  debugger;\n  return await testPromise(creator);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"Now all the conformance checks have passed. And you can use any constructor signature. One thing to notice though is while `new MyPromise` returns a `MyPromise` instance, the promise returned from `promise.then()` is back to a native `Promise`. This means whatever extended functionalities you implemented in `MyPromise` class are only available to the promise object you created directly with `new MyPromise`, but not on those derived from it through chaining.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"### Subclassing Promise for ES5\n\nThis is all going well but notice we are using the ES6 class extends syntax. The story is much more complex when you need to support ES5-only platforms.\n\nIf you transpile the ES6 Promise subclass we wrote above into ES5 target, you might get something like this.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"Wait what? It even failed at `new MyPromise`? Yes. It turns out transpilers like `tsc` would translate `super(executor)` into `Promise.call(this, executor)`. This translation would be correct if we were extending some callable Function, but Promise being a class constructor is not directly callable without `new`.\n\nEven on older platforms without ES6 class support but do have Promise and being a callable function, like Node.js v0.12, this can still fail with a different error:\n\n```\nvar promise = new MyPromise(function(resolve){resolve(42)});\nTypeError: # is not a promise\n```\n\nWe can also try with overriding `Promise.prototype` to force our subclass prototype be on top of the proto chain, but this is not forward compatible with ES6 platforms because `Promise` being a class, its `prototype` is read-only.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":215,"value":"{\n  function creator() {\n    function MyPromise(executor) {\n      const savedPrototype = Promise.prototype;\n      Promise.prototype = Object.create(Promise.prototype, MyPromise.prototype);\n      const promise = new Promise(executor);\n      Promise.prototype = savedPrototype;\n      return promise;\n    };\n    MyPromise.prototype.constructor = Promise;\n    return MyPromise;\n  }\n  return await testPromise(creator, true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"It's worth noting that this however kind of works on ES5-only platforms because `Promise` there is not a class. But it would break again if your `MyPromise` uses incompatible constructor signature to `Promise`. Even overriding `MyPromise.prototype.constructor` doesn't help with this case and I don't know why.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":490,"value":"In anyway, it seems we don't have much choice but to start with a Promise object created with `new Promise` and build from there. The following works but it's [**VERY COSTLY** for performance because we are swaping `__proto__`.](https://mathiasbynens.be/notes/prototypes)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"{\n  function creator() {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    function MyPromise(foo, executor) {\n      const promise = new Promise(executor);\n      extendStatics(promise, MyPromise.prototype);\n      return promise;\n    };\n    MyPromise.prototype = Object.create(Promise.prototype);\n    MyPromise.prototype.foo = function() {};\n    return MyPromise;\n  }\n  return await testPromise(creator);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"So probably it's better off to just assign our extended functionalities without messing with the proto chain. But I haven't done a benchmark to verify the performance differences.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":517,"value":"{\n  function creator() {\n    function MyPromise(foo, executor) {\n      const promise = new Promise(executor);\n      promise.foo = function() {};\n      return promise;\n    };\n    return MyPromise;\n  }\n  return await testPromise(creator);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"## Summary\n\nThis is my attempt in finding the correct method in subclassing Promise. Turned out with ES6 class extends syntax we can achieve the most desired result. However if ES5-only support is required, we might be end up with a split implementation than ES6, and sacrificing a lot of performance to retain similar behaviors. If you know another way to do it better please let me know.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":514,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":534,"value":"{\n  class MyPromise extends Promise {\n    constructor(executor) {\n      super(executor);\n    }\n    foo() {}\n  }\n  MyPromise.prototype.constructor = Promise;\n  async function foo(x) {\n    await bar(x);\n  }\n  \n  async function bar(x) {\n    await x;\n    throw new Error(\"Let's have a look...\");\n  }\n\n  try {\n    await foo(new MyPromise(resolve => resolve(42)));\n  } catch(e) {\n    return e.stack;\n  }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"{\n  class MyPromise extends Promise {\n    constructor(executor) {\n      super(executor);\n    }\n    foo() {}\n  }\n  async function foo(x) {\n    await bar(x);\n  }\n  \n  async function bar(x) {\n    await x;\n    throw new Error(\"Let's have a look...\");\n  }\n\n  try {\n    await foo(new MyPromise(resolve => resolve(42)));\n  } catch(e) {\n    return e.stack;\n  }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"\n{\n  class Thenable {\n    constructor(value) {\n      this.value = value;\n    }\n    then(onFulfill) {onFulfill(this.value)}\n  }\n  \n  function foo(x) {\n    return bar(x).then(y => undefined);\n  }\n  \n  async function bar(x) {\n    await x;\n    throw new Error(\"Let's have a look...\");\n  }\n\n  try {\n    await foo(new Thenable(42));\n  } catch(e) {\n    return e.stack;\n  }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}}
31:"$30:body"