{"id":2638,"date":"2022-01-13T15:46:20","date_gmt":"2022-01-13T07:46:20","guid":{"rendered":"https:\/\/blog.odliken.cn\/?p=2638"},"modified":"2023-02-05T13:15:01","modified_gmt":"2023-02-05T05:15:01","slug":"es6%e4%b9%8bpromise%e4%b8%8eclass%e7%b1%bb","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=2638","title":{"rendered":"ES6\u4e4bPromise\u4e0eClass\u7c7b"},"content":{"rendered":"

Promise<\/h1>\n

Promise \u662f\u4ec0\u4e48<\/h2>\n
      \/\/1.\u8ba4\u8bc6 Promise: \u662f\u5f02\u6b65\u64cd\u4f5c\u7684\u4e00\u79cd\u89e3\u51b3\u65b9\u6848\n      \/\/\u56de\u8c03\u51fd\u6570\n      document.addEventListener(\n        "click",\n        () => {\n          console.log("\u8fd9\u91cc\u662f\u5f02\u6b65\u7684");\n        },\n        false\n      );\n      console.log("\u8fd9\u91cc\u662f\u540c\u6b65\u7684");\n      \/\/2.\u4ec0\u4e48\u65f6\u5019\u4f7f\u7528 Promise : \u4e00\u822c\u7528\u6765\u89e3\u51b3\u5c42\u5c42\u5d4c\u5957\u7684\u56de\u8c03\u51fd\u6570(\u56de\u8c03\u5730\u72f1 callback hell)\u7684\u95ee\u9898\n      \/\/\u8fd0\u52a8 box \u79fb\u52a8\u53f3\u4e0b\u5de6\u4e0a\n      const move = (el, { x = 0, y = 0 } = {}, end = () => {}) => {\n        el.style.transform = `translate3d(${x}px,${y}px,0)`;\n        el.addEventListener(\n          "transitionend",\n          () => {\n            \/\/ console.log('end');\n            end();\n          },\n          false\n        );\n      };\n      const boxEl=document.getElementById('box');\n      document.addEventListener('click',()=>{\n        move(boxEl,{x:150},()=>{\n          move(boxEl,{x:150,y:150},()=>{\n            move(boxEl,{y:150},()=>{\n              move(boxEl,{x:0,y:0})\n            })\n          });\n        })\n      },false);<\/code><\/pre>\n
Promise \u7684\u57fa\u672c\u7528\u6cd5[\u91cd\u70b9]<\/h2>\n
      \/\/1.\u5b9e\u4f8b\u5316\u6784\u9020\u51fd\u6570\u751f\u6210\u5b9e\u4f8b\u5bf9\u8c61\n      \/\/Promise \u89e3\u51b3\u7684\u4e0d\u662f\u56de\u8c03\u51fd\u6570,\u800c\u662f\u56de\u8c03\u5730\u72f1\n      \/\/2.Promise \u7684\u72b6\u6001\n      const p = new Promise((resolve, reject) => {\n        \/\/[\u91cd\u8981]Promise \u6709 3 \u79cd\u72b6\u6001,\u4e00\u5f00\u59cb\u662f pending(\u672a\u5b8c\u6210),\u6267\u884c resolve,\u53d8\u6210 fulfilled(resolved),\u5df2\u6210\u529f\n        \/\/\u6267\u884c reject,\u53d8\u6210 rejected,\u5df2\u5931\u8d25\n        \/\/Promise \u7684\u72b6\u6001\u4e00\u65e6\u53d8\u5316,\u5c31\u4e0d\u4f1a\u518d\u6539\u53d8\u4e86\n        resolve();\/\/success\n      });\n      console.log(p);\n      \/\/3.then \u65b9\u6cd5\n      p.then(()=>{\n        console.log('success');\n      },()=>{\n        console.log('error');\n      })\n      \/\/4.resolve \u548c reject \u51fd\u6570\u7684\u53c2\u6570\n      const p1 = new Promise((resolve, reject) => {\n        \/\/ resolve({username:'alex'});\n        \/\/ reject('reason');\n        reject(new Error('reason'))\n      })\n      p1.then(\n        (data)=>{\n          console.log('success',data);\n        },(err)=>{\n        console.log('error',err);\n      }\n      )<\/code><\/pre>\n
then()[\u91cd\u70b9]<\/h2>\n
      \/\/1.\u4ec0\u4e48\u65f6\u5019\u6267\u884c\n      \/\/pending->fulfilled \u65f6,\u6267\u884c then \u7684\u7b2c\u4e00\u4e2a\u56de\u8c03\u51fd\u6570\n      \/\/pending->rejected \u65f6,\u6267\u884c then \u7684\u7b2c\u4e8c\u4e2a\u56de\u8c03\u51fd\u6570\n      \/\/2.\u6267\u884c\u540e\u7684\u8fd4\u56de\u503c\n      \/\/then \u65b9\u6cd5\u6267\u884c\u540e\u8fd4\u56de\u4e00\u4e2a\u65b0\u7684 Promise \u5bf9\u8c61\n      const p = new Promise((resolve, reject) => {\n        resolve();\n      })\n      const p2= p.then(\n        () => {},\/\/\u6210\u529f\n        () => {}\n      ).then()\n      console.log(p,p2,p===p2);\n      \/\/3.then \u65b9\u6cd5\u8fd4\u56de\u7684 Promise \u5bf9\u8c61\u7684\u72b6\u6001\u6539\u53d8\n      const p1 = new Promise((resolve, reject) => {\n        \/\/resolve();\/\/success success2\n        reject();\/\/error success2\n      })\n      p1.then(\/\/\u6267\u884c success \u8fd9\u4e2a\u56de\u8c03\n        () => {\n          \/\/console.log('success')\n        },\n        () => {\n          console.log('error')\n          \/\/\u5728 then \u7684\u56de\u8c03\u51fd\u6570\u4e2d,return \u540e\u9762\u7684\u4e1c\u897f,\u4f1a\u7528 Promise \u5305\u88c5\u4e00\u4e0b\n          return undefined;\n          \/\/\u7b49\u4ef7\u4e8e\n          \/\/ return new Promise(resolve=>{\n          \/\/   resolve( undefined)\n          \/\/ })\n          \/\/\u9ed8\u8ba4\u8fd4\u56de\u7684\u6c38\u8fdc\u90fd\u662f\u6210\u529f\u72b6\u6001\u7684 Promise \u5bf9\u8c61,\u5931\u8d25\u5219\u5199\u5b8c\u6574(resolve, reject)\u8c03\u7528 reject\n        }\n      ).then(\/\/\u4e0a\u8fb9\u90a3\u4e2a then \u7684\u8fd4\u56de\u503c\u51b3\u5b9a\u540e\u9762\u7684 then \u6267\u884c\u56de\u8c03\n        data => {\n          console.log('success2',data)\n        },\n        err => {\n          console.log('error2',err)\n        }\n      ).then(\n        data => {\n          console.log('success3',data)\n        },\n        err => {\n          console.log('error3',err)\n        }\n      )<\/code><\/pre>\n
then()-2<\/h2>\n
      \/\/4.\u4f7f\u7528 Promise \u89e3\u51b3\u56de\u8c03\u5730\u72f1\n      const boxEI = document.getElementById("box");\n      \/\/(1)\u7eb5\u5411\u53d1\u5c55\u7684,\u7531\u5916\u5f80\u5185\u4e00\u5c42\u5c42\u5d4c\u5957\u7684 [\u8be6\u7ec6\u4ee3\u7801\u89c1\u6807\u9898 Promise \u662f\u4ec0\u4e48]\n      const movePromise = (el, point) => {\n        return new Promise((resolve) => {\n          move(el, point, () => {\n            resolve();\n          });\n        });\n      };\n      \/\/(2)\u6a2a\u5411\u53d1\u5c55\u7684\n      document.addEventListener(\n        "click",\n        () => {\n          movePromise(boxEI, { x: 150 })\n            .then(() => {\n              return movePromise(boxEI, { x: 150, y: 150 });\n            })\n            .then(() => {\n              return movePromise(boxEI, { y: 150 });\n            })\n            .then(() => {\n              return movePromise(boxEI, { x: 0, y: 0 });\n            });\n        },\n        false\n      );<\/code><\/pre>\n
catch()[\u6807\u7ea2]<\/h2>\n
 <style>\n      * {\n        margin: 0;\n        padding: 0;\n      }\n      #box {\n        width: 300px;\n        height: 300px;\n        background-color: red;\n        transition: all 0.5s;\n      }\n    <\/style>\n  <\/head>\n  <body>\n    <div id="box"><\/div>\n    <script>\n      \/\/then(data=>{});\u7528\u7684\u591a\n      \/\/catch \u4e13\u95e8\u7528\u6765\u5904\u7406 rejected \u72b6\u6001,\u672c\u8d28\u4e0a\u662f then \u7684\u7279\u4f8b\n      \/\/2.\u57fa\u672c\u7528\u6cd5\n      new Promise((resolve, reject) => {\n        \/\/ resolve(123);\n        reject("reason");\n      })\n        .then((data) => {\n          console.log(data);\n        })\n        \/\/ .then(null,err=>{\n        \/\/     console.log(err);\n        \/\/ });\u7b49\u4ef7\u4e8e\u2193\n        .catch((err) => {\n          console.log(err);\n          \/\/return undefined;\n          throw new Error("reason");\n        })\n        .then((data) => {\n          console.log(data); \/\/undefined\n        })\n        .catch((err) => {\n          console.log(err);\n        });\n      \/\/catch()\u53ef\u4ee5\u6355\u83b7\u5b83\u524d\u9762\u7684\u9519\u8bef\n      \/\/\u4e00\u822c\u603b\u662f\u5efa\u8bae,Promise \u5bf9\u8c61\u540e\u9762\u8981\u8ddf catch \u65b9\u6cd5,\n      \/\/ \u8fd9\u6837\u53ef\u4ee5\u5904\u7406 Promise \u5185\u90e8\u53d1\u751f\u7684\u9519\u8bef<\/code><\/pre>\n
finally() \u4e86\u89e3,\u5de5\u4f5c\u4e0d\u5e38\u7528<\/h2>\n
      \/\/1.\u4ec0\u4e48\u65f6\u5019\u6267\u884c\n      \/\/\u5f53 Promise \u72b6\u6001\u53d1\u751f\u53d8\u5316\u65f6,\u4e0d\u8bba\u5982\u4f55\u53d8\u5316\u90fd\u4f1a\u6267\u884c,\u4e0d\u53d8\u5316\u4e0d\u6267\u884c\n      new Promise((resolve, reject) => {\n        \/\/ resolve(123);undefined\n        reject("reason"); \/\/undefined\n      })\n        .finally((data) => {\n          console.log(data);\n        })\n        .catch((err) => {});\n      \/\/2.\u672c\u8d28\n      \/\/finally()\u672c\u8d28\u4e0a\u662f then()\u7684\u7279\u4f8b\n      \/\/\u4e0a\u9762\u7b49\u540c\u4e8e\n      new Promise((resolve, reject) => {\n        \/\/ resolve(123);\/\/\u6210\u529f\n        reject("reason"); \/\/\u5931\u8d25\n      })\n        .then(\/\/\u672c\u8d28\u4e0a\u662f\u8fd9\u6837\n          (result) => {\n            return result;\n          },\n          (err) => {\n            return new Promise((resolve, reject) => {\n              reject(err);\n            });\n          }\n        ) \n        .then((data) => {\n          console.log(data);\n        })\n        .catch((err) => {\n          console.log(err);\n        });<\/code><\/pre>\n
Promise \u7684\u6784\u9020\u51fd\u6570\u65b9\u6cd5<\/h2>\n
Promise.resolve() \u548c Promise.reject()<\/h2>\n
      \/\/1.Promise.resolve(): \u662f\u6210\u529f\u72b6\u6001 Promise \u7684\u4e00\u79cd\u7b80\u5199\u5f62\u5f0f\n      new Promise((resolve) => resolve("foo"));\n      \/\/\u7b80\u5199: Promise.resolve('foo');\n      \/\/\u53c2\u6570\n      \/\/\u4e00\u822c\u53c2\u6570 \u91cd\u70b9\u5173\u6ce8\n      Promise.resolve("foo").then((data) => {\n        console.log(data); \/\/foo\n      });\n      \/*\u4e86\u89e3\u5c31\u884c,\u4e0d\u7528\u6df1\u7a76\n      \/\/\u7279\u6b8a\u53c2\u6570,Promise \u5bf9\u8c61\n      \/\/ \u5f53 Promise.resolve()\u63a5\u6536\u7684\u662f Promise \u5bf9\u8c61\u65f6,\u76f4\u63a5\u8fd4\u56de\u8fd9\u4e2a Promise \u5bf9\u8c61,\u4ec0\u4e48\u90fd\u4e0d\u505a\n      const p = new Promise((resolve) => {\n        setTimeout(resolve, 1000, "\u6211\u6267\u884c\u4e86");\n        \/\/\u76f8\u5f53\u4e8e\n        \/\/ setTimeout(()=>{\n        \/\/   resolve('\u6211\u6267\u884c\u4e86')\n        \/\/ },1000)\n      });\n      Promise.resolve(p).then((data) => {\n        console.log(data); \/\/\u6211\u6267\u884c\u4e86\n      });\n      \/\/\u7b49\u4ef7\u4e8e\n      p.then((data) => {\n        console.log(data);\n      });\n      console.log(Promise.resolve(p) === p1); \/\/true\n\n      \/\/\u5f53 resolve \u51fd\u6570\u63a5\u6536\u7684\u662f Promise \u5bf9\u8c61\u65f6,\u540e\u9762\u7684 then \u4f1a\u6839\u636e\u4f20\u9012\u7684 Promise \u5bf9\u8c61\u7684\u72b6\u6001\u53d8\u5316\u51b3\u5b9a\u6267\u884c\u54ea\u4e00\u4e2a\u56de\u8c03\n      new Promise((resolve) => resolve(p)).then((data) => {\n        console.log(p);\n      });\n\n      \/\/(2)\u5177\u6709 then \u65b9\u6cd5\u7684\u5bf9\u8c61,\u4f5c\u4e3a\u53c2\u6570\n      function func(obj) {\n        obj.then(1, 2);\n      }\n      func({\n        then(resolve, reject) {\n          console.log(a, b);\n        },\n      });\n      const thenable = {\n        then(resolve, reject) {\n          console.log("then");\n          resolve("data");\n        },\n      };\n      Promise.resolve(thenable).then(\n        (data) => console.log(data),\n        (err) => console.log(err)\n      );\n      console.log(Promise.resolve(thenable));\n      *\/\n\n      \/\/2.Promise.reject()\n      \/\/\u5931\u8d25\u72b6\u6001 Promise \u7684\u4e00\u79cd\u7b80\u5199\u5f62\u5f0f\n      Promise.reject("reason");\n      \/\/\u53c2\u6570 : \u4e0d\u7ba1\u4ec0\u4e48\u53c2\u6570,\u90fd\u4f1a\u539f\u5c01\u4e0d\u52a8\u5730\u5411\u540e\u4f20\u9012,\u4f5c\u4e3a\u540e\u7eed\u65b9\u6cd5\u7684\u53c2\u6570\n      const p = new Promise((resolve) => {\n        setTimeout(resolve, 1000, "\u6211\u6267\u884c\u4e86");\n      });\n      Promise.reject(p).catch((err) =>console.log(err));\n\n      new Promise((resolve,reject) => {\n        resolve(123)\n      }).then(data=>{\n        \/\/ return data\n        \/\/return Promise.resolve(data)\n        return Promise.reject('reason')\n      }).then(data=>{\n        console.log(data);\n      }).catch(err=>console.log(err))<\/code><\/pre>\n
Promise.all()[\u91cd\u70b9]<\/h2>\n
      \/\/1.\u6709\u4ec0\u4e48\u7528\n      \/\/Promise.all()\u5173\u6ce8\u591a\u4e2a Promise \u5bf9\u8c61\u7684\u72b6\u6001\u53d8\u5316\n      \/\/\u4f20\u5165\u591a\u4e2a Promise \u5b9e\u4f8b,\u5305\u88c5\u6210\u4e00\u4e2a\u65b0\u7684 Promise \u5b9e\u4f8b\u8fd4\u56de\n      \/\/2.\u57fa\u672c\u7528\u6cd5\n      const delay = (ms) => {\n        return new Promise((resolve) => {\n          setTimeout(resolve, ms);\n        });\n      };\n      const p1 = delay(1000).then(() => {\n        console.log("p1 \u5b8c\u6210\u4e86");\n        \/\/ return "p1";\n        return Promise.reject('reason')\/\/p1 \u5b8c\u6210\u4e86 reason p2 \u5b8c\u6210\u4e86\n      }); \n      const p2 = delay(1000).then(() => {\n        console.log("p2 \u5b8c\u6210\u4e86");\n        return "p2";\n      });\n      \/\/Promise.all()\u7684\u72b6\u6001\u53d8\u5316\u4e0e\u6240\u6709\u4f20\u5165\u7684 Promise \u5b9e\u4f8b\u5bf9\u8c61\u72b6\u6001\u6709\u5173\n      \/\/\u6240\u6709\u72b6\u6001\u90fd\u53d8\u6210 resolved,\u6700\u7ec8\u7684\u72b6\u6001\u624d\u4f1a\u53d8\u6210 resolved\n      \/\/\u53ea\u8981\u6709\u4e00\u4e2a\u53d8\u6210 rejected,\u6700\u7ec8\u7684\u72b6\u6001\u5c31\u53d8\u6210 rejected\n      const p = Promise.all([p1, p2]);\n      p.then(\n        (data) => {\n          console.log(data);\n        },\n        (err) => {\n          console.log(err);\n        }\n      );<\/code><\/pre>\n
Promise.race() \u548c Promise.allSettled()<\/h2>\n
     const delay = (ms) => {\n        return new Promise((resolve) => {\n          setTimeout(resolve, ms);\n        });\n      };\n      const p1 = delay(1000).then(() => {\n        console.log("p1 \u5b8c\u6210\u4e86");\n        return "p1";\n      });\n      const p2 = delay(2000).then(() => {\n        console.log("p2 \u5b8c\u6210\u4e86");\n        return "p2";\n      });\n      \/\/1.Promise.race()\n      \/\/Promise.race()\u7684\u72b6\u6001\u53d6\u51b3\u4e8e\u7b2c\u4e00\u4e2a\u5b8c\u6210\u7684 Promise \u5b9e\u4f8b\u5bf9\u8c61,\u5982\u679c\u7b2c\u4e00\u4e2a\u5b8c\u6210\u7684\u6210\u529f\u4e86,\u90a3\u6700\u7ec8\u7684\u5c31\u6210\u529f;\u5982\u679c\u7b2c\u4e00\u4e2a\u5b8c\u6210\u7684\u5931\u8d25\u4e86,\u90a3\u4e48\u6700\u7ec8\u7684\u5c31\u5931\u8d25\n      const racePromise = Promise.race([p1, p2]);\n      racePromise.then(\n        (data) => {\n          console.log(data);\n        },\n        (err) => {\n          console.log(err);\n        }\n      );\n      \/\/2.Promise.allSettled()\n      \/\/Promise.allSettled()\u7684\u72b6\u6001\u4e0e\u4f20\u5165\u7684 Promise \u72b6\u6001\u65e0\u5173,\u6c38\u8fdc\u90fd\u662f\u6210\u529f\u7684,\u5b83\u53ea\u4f1a\u5fe0\u5b9e\u7684\u8bb0\u5f55\u4e0b\u5404\u4e2a Promise \u7684\u8868\u73b0\n      const allSettledPromise = Promise.allSettled([p1, p2]);\n      allSettledPromise.then((data) => {\n        console.log("succ", data);\n      });<\/code><\/pre>\n
Promise \u7684\u6ce8\u610f\u4e8b\u9879<\/h2>\n
      \/\/1.resolve \u6216 reject \u51fd\u6570\u6267\u884c\u540e\u7684\u4ee3\u7801\n      \/\/\u63a8\u8350\u5728\u8c03\u7528 resolve \u6216 reject \u51fd\u6570\u7684\u65f6\u5019\u52a0\u4e0a return,\u4e0d\u518d\u6267\u884c\u5b83\u4eec\u540e\u9762\u7684\u4ee3\u7801\n      new Promise((resolve, reject) => {\n        return resolve(123);\n        \/\/return reject('reason');\n      });\n      \/\/2.Promise.all\/race\/allSettled \u7684\u53c2\u6570\u95ee\u9898\n      \/\/\u53c2\u6570\u5982\u679c\u4e0d\u662f Promise \u6570\u7ec4,\u4f1a\u5c06\u4e0d\u662f Promise \u7684\u6570\u7ec4\u5143\u7d20\u8f6c\u53d8\u6210 Promise \u5bf9\u8c61\n      Promise.all([1, 2, 3]).then((datas) => {\n        console.log(datas); \/\/(3) [1, 2, 3]\n      });\n      \/\/\u7b49\u4ef7\u4e8e\n      \/\/ Promise.all([\n      \/\/     Promise.resolve(1),\n      \/\/     Promise.resolve(2),\n      \/\/     Promise.resolve(3)\n      \/\/ ]).then(datas=>{\n      \/\/     console.log(datas);\n      \/\/ });\n      \/\/\u4e0d\u53ea\u662f\u6570\u7ec4,\u4efb\u4f55\u53ef\u904d\u5386\u7684\u90fd\u53ef\u4ee5\u4f5c\u4e3a\u53c2\u6570\n      \/\/\u6570\u7ec4,\u5b57\u7b26\u4e32,Set,Map,NodeList,arguments\n      Promise.all(new Set([1, 2, 3])).then((datas) => {\n        console.log(datas); \/\/(3) [1, 2, 3]\n      });\n      \/\/3.Promise.all\/race\/allSettled \u7684\u9519\u8bef\u5904\u7406\n      const delay = (ms) => {\n        return new Promise((resolve) => {\n          setTimeout(resolve, ms);\n        });\n      };\n      const p1 = delay(1000)\n        .then(() => {\n          console.log("p1 \u5b8c\u6210\u4e86");\n          return "p1"; \/\/\u6210\u529f\u72b6\u6001\n          \/\/ return Promise.reject("reason");\n        })\n        \/\/ .catch((err) => {\n        \/\/   console.log("p1", err);\n        \/\/ }); \/\/p1 reason\n      const p2 = delay(2000)\n        .then(() => {\n          console.log("p2 \u5b8c\u6210\u4e86");\n          return "p2"; \/\/\u6210\u529f\u72b6\u6001\n          \/\/ return Promise.reject('reason');\n        })\n        \/\/ .catch((err) => {\n        \/\/   console.log("p2", err);\n        \/\/ });\n      const allPromise = Promise.all([p1, p2]);\n      allPromise\n        .then((datas) => {\n          console.log(datas);\n        })\n        .catch((err) => {\n          console.log(err);\n        });\n      \/\/\u9519\u8bef\u65e2\u53ef\u4ee5\u5355\u72ec\u5904\u7406,\u4e5f\u53ef\u4ee5\u7edf\u4e00\u5904\u7406\n      \/\/\u4e00\u65e6\u88ab\u5904\u7406,\u5c31\u4e0d\u4f1a\u5728\u5176\u4ed6\u5730\u65b9\u518d\u5904\u7406\u4e00\u904d<\/code><\/pre>\n
Promise \u7684\u5e94\u7528[\u91cd\u70b9]<\/h2>\n
   <style>\n     #img {\n        width: 80%;\n        padding: 10%;\n      }\n    <\/style>\n  <\/head>\n  <body>\n    <img\n      src="https:\/\/images.alphacoders.com\/116\/1162246.jpg"\n      alt=""\n      id="img"\n    \/>\n    <script>\n      \/\/ \u5f02\u6b65\u52a0\u8f7d\u56fe\u7247\n      const loadImgAsync = (url) => {\n        return new Promise((resolve,reject)=>{\n          const img=new Image();\n          img.onload=()=>{\n            resolve(img)\n          }\n          img.onerror=()=>{\n            reject(new Error(`Could not load image at ${url}`))\n          }\n          img.src=url\n        })\n      }\n      const ImgDOM=document.getElementById('img')\n      loadImgAsync('https:\/\/images7.alphacoders.com\/116\/1162253.jpg').then(img=>{\n        console.log(img.src);\n        setTimeout(()=>{\n          ImgDOM.src=img.src\n        },2000)\n      }).catch(err=>{\n        console.log(err);\n      })\n    <\/script><\/code><\/pre>\n
Class \u7c7b<\/h1>\n
Class \u662f\u4ec0\u4e48<\/h2>\n
      \/\/1.\u8ba4\u8bc6 Class: \u4eba\u7c7b:\u7c7b\n      \/\/\u5177\u4f53\u7684\u4eba:\u5b9e\u4f8b,\u5bf9\u8c61\n      \/\/\u7c7b\u53ef\u4ee5\u770b\u505a\u662f\u5bf9\u8c61\u7684\u6a21\u677f,\u7528\u4e00\u4e2a\u7c7b\u53ef\u4ee5\u521b\u5efa\u51fa\u8bb8\u591a\u4e0d\u540c\u7684\u5bf9\u8c61\n      \/\/2.Class \u7684\u57fa\u672c\u7528\u6cd5: \u7c7b\u540d\u4e00\u822c\u9996\u5b57\u6bcd\u5927\u5199\n      \/\/ class Person() {} \u9519\u7684\n      \/\/ class Person {}; \u9519\u7684\n      class Person {\n        \/\/\u5b9e\u4f8b\u5316\u65f6\u6267\u884c\u6784\u9020\u65b9\u6cd5,\u6240\u4ee5\u5fc5\u987b\u6709\u6784\u9020\u65b9\u6cd5\n        constructor(name, age) {\n          \/\/\u5efa\u8bae\u8fd8\u662f\u5199\u51fa\u6765\n          console.log("\u5b9e\u4f8b\u5316\u65f6\u6267\u884c\u6784\u9020\u65b9\u6cd5");\n          this.name = name;\n          this.age = age;\n          \/\/ \u4e00\u822c\u5728\u6784\u9020\u65b9\u6cd5\u4e2d\u5b9a\u4e49\u5c5e\u6027,\u65b9\u6cd5\u4e0d\u5728\u6784\u9020\u65b9\u6cd5\u4e2d\u5b9a\u4e49\n          \/\/ this.speak = () => {};\n        }\n        \/\/\u5404\u5b9e\u4f8b\u5171\u4eab\u7684\u65b9\u6cd5[\u6240\u6709\u65b9\u6cd5\u5199\u5728\u8fd9\u5c31\u53ef\u4ee5\u4e86]\n        speak() {\n          console.log("speak");\n        }\n      }\n      const zs=new Person('ZS',18);\n      console.log(zs.name);\n      zs.speak();\/\/speak\n      console.log(zs.speak===ls.speak);\/\/true\n      \/\/3.Class \u4e0e\u6784\u9020\u51fd\u6570\n      console.log(typeof Person); \/\/function\n      console.log(Person.prototype.speak); \/\/\u0192 speak() {console.log('speak');}\n      \/\/(2)\u6784\u9020\u51fd\u6570\n      function Person(name, age) {\n          this.name = name;\n          this.age = age;\n      }\n      Person.prototype.speak=function (){};\/\/\u65b9\u6cd5<\/code><\/pre>\n
Class \u7684\u4e24\u79cd\u5b9a\u4e49\u5f62\u5f0f<\/h2>\n
     \/\/1.\u58f0\u660e\u5f62\u5f0f[\u91cd\u70b9\u5173\u6ce8]\n      class Person{\n          constructor() {\n          }\n          speak(){}\n      }\n      \/\/2.\u8868\u8fbe\u5f0f\u5f62\u5f0f[\u77e5\u9053\u4e86\u89e3\u5c31\u884c]\n      const Person=function (){};\n      const Person=class {\n          constructor() {\n              console.log('constructor');\n          }\n          speak(){}\n      };\n      new Person();\n      (function (){\n          console.log('func');\n      })();\n      \/\/\u7acb\u5373\u6267\u884c\u7684\u7c7b\n      new (class {\n        constructor() {\n          console.log("constructor");\n        }\n      })();<\/code><\/pre>\n
\u5b9e\u4f8b\u5c5e\u6027\u3001\u9759\u6001\u65b9\u6cd5\u548c\u9759\u6001\u5c5e\u6027<\/h2>\n
      \/\/1.\u5b9e\u4f8b\u5c5e\u6027[\u91cd\u70b9\u5173\u6ce8]\u4f1a\u7528\u4f1a\u5199\u5c31\u53ef\u4ee5\u4e86\n      \/\/\u65b9\u6cd5\u5c31\u662f\u503c\u4e3a\u51fd\u6570\u7684\u7279\u6b8a\u5c5e\u6027\n      class Person {\n        age = 0; \/\/\u9ed8\u8ba4\u503c\n        sex = "male";\n        getSex = function () {\n          return this.sex;\n        };\n        constructor(name, sex) {\n          this.name = name;\n          this.sex = sex;\n          \/\/ this.age=18;\u2191\n        }\n      }\n      const p1 = new Person("slf");\n      console.log(p1.name);\n      console.log(p1.age);\n      \/\/2.\u9759\u6001\u65b9\u6cd5[\u91cd\u70b9\u5173\u6ce8]\n      \/\/\u7c7b\u7684\u65b9\u6cd5\n      class Person {\n        constructor(name) {\n          this.name = name;\n        }\n        speak() {\n          console.log("speak");\n          console.log(this);\n        }\n        \/\/\u9759\u6001\u65b9\u6cd5\n        static speak() {\n          console.log("\u4eba\u7c7b\u53ef\u4ee5\u8bf4\u8bdd");\n          \/\/this \u6307\u5411\u7c7b\u672c\u8eab\n          console.log(this); \/\/Person\n        }\n      }\n      const p2 = new Person("ald");\n      p2.speak(); \/\/speak\n      Person.speak(); \/\/\u4eba\u7c7b\u53ef\u4ee5\u8bf4\u8bdd\n      \/\/3.\u9759\u6001\u5c5e\u6027 [\u7b80\u5355\u4e86\u89e3]\u77e5\u9053\u600e\u4e48\u56de\u4e8b\u5c31\u884c\u4e86\n      \/\/\u7c7b\u7684\u5c5e\u6027\n      class Person {\n        constructor(name) {\n          this.name = name;\n        }\n        \/\/\u4e0d\u80fd\u8fd9\u4e48\u5199,\u76ee\u524d\u53ea\u662f\u63d0\u6848,\u6709\u517c\u5bb9\u6027\u95ee\u9898\n        \/\/ static version='1.0';\n        static getVersion() {\n          return "1.0";\n        }\n      }\n      console.log(Person.getVersion());<\/code><\/pre>\n
\u79c1\u6709\u5c5e\u6027\u548c\u65b9\u6cd5<\/h2>\n
      \/\/1.\u4e3a\u4ec0\u4e48\u9700\u8981\u79c1\u6709\u5c5e\u6027\u548c\u65b9\u6cd5\n      \/\/\u4e00\u822c\u60c5\u51b5\u4e0b,\u7c7b\u7684\u5c5e\u6027\u548c\u65b9\u6cd5\u90fd\u662f\u516c\u5f00\u7684\n      \/\/\u516c\u6709\u7684\u5c5e\u6027\u548c\u65b9\u6cd5\u53ef\u4ee5\u88ab\u5916\u754c\u4fee\u6539,\u9020\u6210\u610f\u60f3\u4e0d\u5230\u7684\u9519\u8bef\n      class Person {\n          constructor(name) {\n              this.name = name;\n          }\n          speak() {\n              console.log('speak');\n          }\n          getName(){\n              return this.name;\n          }\n      }\n      const p1 = new Person('Alex');\n      console.log(p.name);\n      p.speak();\n      \/\/2.\u6a21\u62df\u79c1\u6709\u5c5e\u6027\u548c\u65b9\u6cd5\n      \/\/2.1 '_' [\u4e0b\u5212\u7ebf]\u5f00\u5934\u8868\u793a\u79c1\u6709\n      class Person {\n          constructor(name) {\n              this._name = name;\n          }\n          speak() {\n              console.log('speak');\n          }\n          getName(){\n              return this._name;\n          }\n      }\n      const p2=new Person('LDde');\n      console.log(p.getName());\/\/LDde\n      \/\/2.2 \u5c06\u79c1\u6709\u5c5e\u6027\u548c\u65b9\u6cd5\u79fb\u51fa\u7c7b,\u4f18\u70b9:\u5f7b\u5e95\u675c\u7edd\u4e86\u5916\u90e8\u8bbf\u95ee\u7684\u53ef\u80fd\u6027\n      (function () {\n        let name = "";\n        class Person {\n          constructor(username) {\n            \/\/this.name = name;\n            name = username;\n          }\n          speak() {\n            console.log("speak");\n          }\n          getName() {\n            return name;\n          }\n        }\n        window.Person = Person;\n      })();\n      (function () {\n        const p = new Person("alex");\n        console.log(p.getName());\n      })();<\/code><\/pre>\n
extends[\u91cd\u8981]<\/h2>\n
    \/\/1.\u5b50\u7c7b\u7ee7\u627f\u7236\u7c7b\n    class Person {\n      constructor(name, sex) {\n        this.name = name;\n        this.sex = sex;\n        this.say = function () {\n          console.log("say");\n        };\n      }\n      speak() {\n        console.log("speak");\n      }\n      static speak() {\n        console.log("static speak");\n      }\n    }\n    Person.version = "1.0";\n    class Programmer extends Person {\n      constructor(name, sex) {\n        super(name, sex); \/\/\u6307\u4ee3\u7236\u7c7b\u7684 constructor\n      }\n    }\n    const zss = new Programmer("zs", "\u7537");\n    zss.say(); \/\/say\n    zss.speak(); \/\/speak\n    Programmer.speak(); \/\/static speak\n    console.log(Programmer.version); \/\/1.0\n    \/\/2.\u6539\u5199\u7ee7\u627f\u7684\u5c5e\u6027\u6216\u65b9\u6cd5\n    class Programmer extends Person {\n      constructor(name, sex, feature) {\n        super(name, sex); \/\/this \u64cd\u4f5c\u4e0d\u80fd\u653e\u5728 super \u524d\u9762\n        this.feature = feature; \/\/\u4e0d\u80fd\u5728 super \u524d\u9762,\u662f\u7236\u7c7b\u6ca1\u6709\u7684\n      }\n      hi() {\n        console.log("hi");\n      }\n      \/\/\u540c\u540d\u8986\u76d6\n      speak() {\n        console.log("Programmer speak");\n      }\n      static speak() {\n        console.log("Programmer static speak");\n      }\n    }\n    Programmer.version = "2.0";<\/code><\/pre>\n
super[\u7b80\u5355\u4e86\u89e3]<\/h2>\n
 \/\/1.\u4f5c\u4e3a\u51fd\u6570\u8c03\u7528\n      \/\/\u4ee3\u8868\u7236\u7c7b\u7684\u6784\u9020\u65b9\u6cd5,\u53ea\u80fd\u7528\u5728\u5b50\u7c7b\u7684\u6784\u9020\u65b9\u6cd5\u4e2d,\u7528\u5728\u5176\u4ed6\u5730\u65b9\u5c31\u4f1a\u62a5\u9519\n      \/\/super \u867d\u7136\u4ee3\u8868\u4e86\u7236\u7c7b\u7684\u6784\u9020\u65b9\u6cd5,\u4f46\u662f\u5185\u90e8\u7684 this \u6307\u5411\u5b50\u7c7b\u7684\u5b9e\u4f8b\n      class Person {\n        constructor(name) {\n          this.name = name;\n          console.log(this); \/\/\u6307\u5411\u5b50\u7c7b\u7684\u5b9e\u4f8b\n        }\n      }\n\n      class Programmer extends Person {\n        constructor(name, sex) {\n          super(name, sex); \/\/\u76f8\u5f53\u4e8e\u8c03\u7528\u7236\u7c7b\u7684\u6784\u9020\u65b9\u6cd5\n        }\n      }\n      new Programmer();\n      \/\/2.\u4f5c\u4e3a\u5bf9\u8c61\u4f7f\u7528\n      \/\/2.1 \u5728\u6784\u9020\u65b9\u6cd5\u4e2d\u4f7f\u7528\u6216\u4e00\u822c\u65b9\u6cd5\u4e2d\u4f7f\u7528\n      \/\/super \u4ee3\u8868\u7236\u7c7b\u7684\u539f\u578b\u5bf9\u8c61 Person.prototype, \u6240\u4ee5\u5b9a\u4e49\u5728\u7236\u7c7b\u5b9e\u4f8b\u4e0a\u7684\u65b9\u6cd5\u6216\u5c5e\u6027(this.),\u662f\u65e0\u6cd5\u901a\u8fc7 super \u8c03\u7528\u7684\n      \/\/\u901a\u8fc7 super \u8c03\u7528\u7236\u7c7b\u7684\u65b9\u6cd5\u65f6,\u65b9\u6cd5\u5185\u90e8\u7684 this \u6307\u5411\u5f53\u524d\u7684\u5b50\u7c7b\u5b9e\u4f8b\n      class Person {\n        constructor(name) {\n          this.name = name;\n          console.log(this);\n        }\n        speak() {\n          console.log("speak");\n          \/\/ console.log(this);\n        }\n        static speak() {\n          console.log("Person speak");\n          console.log(this); \/\/\u6307\u5411\u5b50\u7c7b\n        }\n      }\n\n      class Programmer extends Person {\n        constructor(name, sex) {\n          super(name, sex); \/\/\u76f8\u5f53\u4e8e\u8c03\u7528\u7236\u7c7b\u7684\u6784\u9020\u65b9\u6cd5\n\n          \/\/ console.log(super.name);undefined\n          \/\/ super.speak(); \/\/speak\n        }\n        speak() {\n          super.speak();\n          console.log("Programmer speak");\n        }\n        \/\/2.2 \u5728\u9759\u6001\u65b9\u6cd5\u4e2d\u4f7f\u7528\n        \/\/\u6307\u5411\u7236\u7c7b,\u800c\u4e0d\u662f\u7236\u7c7b\u7684\u539f\u578b\u5bf9\u8c61\n        \/\/\u901a\u8fc7 super \u8c03\u7528\u7236\u7c7b\u7684\u65b9\u6cd5\u65f6,\u65b9\u6cd5\u5185\u90e8\u7684 this \u6307\u5411\u5f53\u524d\u7684\u5b50\u7c7b,\u800c\u4e0d\u662f\u5b50\u7c7b\u7684\u5b9e\u4f8b\n        static speak() {\n          super.speak();\n          console.log("Programmer speak");\n        }\n      }\n      \/\/ new Programmer();\n      Programmer.speak();\n      \/\/3.\u6ce8\u610f\u4e8b\u9879\n      \/\/\u4f7f\u7528 super \u7684\u65f6\u5019,\u5fc5\u987b\u663e\u5f0f\u6307\u5b9a\u662f\u4f5c\u4e3a\u51fd\u6570\u8fd8\u662f\u4f5c\u4e3a\u5bf9\u8c61\u4f7f\u7528,\u5426\u5219\u4f1a\u62a5\u9519\n      class Person {\n        constructor(name) {\n          this.name = name;\n        }\n        speak() {\n          console.log("speak");\n        }\n      }\n      class Programmer extends Person {\n        constructor(name, sex) {\n          super(name, sex);\n          console.log(super());\n          console.log(super.speak);\n        }\n      }<\/code><\/pre>\n
Class \u7684\u5e94\u7528 [\u952e\u76d8\u5de6\u53f3\u5207\u6362\u7684\u5e7b\u706f\u7247]<\/h2>\n
<link rel="stylesheet" href=".\/slider.css" \/>\n    <div class="slider-layout">\n      <div class="slider">\n        <div class="slider-content">\n          <div class="slider-item">\n            <a href="javascript:;"\n              ><img src=".\/imgs\/1.jpg" alt="1" class="slider-img"\n            \/><\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div><\/code><\/pre>\n
\/* css reset *\/\n* {\n  padding: 0;\n  margin: 0;\n}\na {\n  text-decoration: none;\n  outline: none;\n}\nimg {\n  vertical-align: top;\n}\n\n\/* layout *\/\n.slider-layout {\n  width: 80%;\n  height: 420px;\n  margin: 0 auto;\n}\n\n\/* slider *\/\n.slider,\n.slider-content,\n.slider-item,\n.slider-img {\n  width: 100%;\n  height: 100%;\n}\n.slider {\n  overflow: hidden;\n}\n.slider-item {\n  float: left;\n}\n.slider-animation {\n  transition-property: transform;\n  transition-duration: 0ms;\n}\n<\/code><\/pre>\n
  <script src=".\/base.js"><\/script>\n    <script>\n      console.log(BaseSlider);\n      class Slider extends BaseSlider {\n        constructor(el, options) {\n          super(el, options);\n\n          this._bindEvent();\n        }\n\n        _bindEvent() {\n          document.addEventListener("keyup", (ev) => {\n            \/\/ console.log(ev.keyCode);\n            if (ev.keyCode === 37) {\n              \/\/ \u2190\n              this.prev();\n            } else if (ev.keyCode === 39) {\n              \/\/ \u2192\n              this.next();\n            }\n          });\n        }\n      }\n      new Slider(document.querySelector(".slider"), {\n        initialIndex: 1,\n        animation: true,\n        speed: 1000,\n      });\n    <\/script><\/code><\/pre>\n
    \n
  • base.js<\/li>\n<\/ul>\n
    \/\/ \u9ed8\u8ba4\u53c2\u6570\nconst DEFAULTS = {\n    \/\/ \u521d\u59cb\u7d22\u5f15\n    initialIndex: 0,\n    \/\/ \u5207\u6362\u65f6\u662f\u5426\u6709\u52a8\u753b\n    animation: true,\n    \/\/ \u5207\u6362\u901f\u5ea6\uff0c\u5355\u4f4d ms\n    speed: 300\n};\n\/\/ base\nconst ELEMENT_NODE = 1;\nconst SLIDER_ANIMATION_CLASSNAME = 'slider-animation';\n\nclass BaseSlider {\n    constructor(el, options) {\n        console.log(options)\n        if (el.nodeType !== ELEMENT_NODE)\n            throw new Error('\u5b9e\u4f8b\u5316\u7684\u65f6\u5019\uff0c\u8bf7\u4f20\u5165 DOM \u5143\u7d20\uff01');\n\n        \/\/ \u5b9e\u9645\u53c2\u6570\n        this.options = {\n            ...DEFAULTS,\n            ...options\n        };\n\n        const slider = el;\n        const sliderContent = slider.querySelector('.slider-content');\n        const sliderItems = sliderContent.querySelectorAll('.slider-item');\n\n        \/\/ \u6dfb\u52a0\u5230 this \u4e0a\uff0c\u4e3a\u4e86\u5728\u65b9\u6cd5\u4e2d\u4f7f\u7528\n        this.slider = slider;\n        this.sliderContent = sliderContent;\n        this.sliderItems = sliderItems;\n\n        this.minIndex = 0;\n        this.maxIndex = sliderItems.length - 1;\n        this.currIndex = this.getCorrectedIndex(this.options.initialIndex);\n\n        \/\/ \u6bcf\u4e2a slider-item \u7684\u5bbd\u5ea6\uff08\u6bcf\u6b21\u79fb\u52a8\u7684\u8ddd\u79bb\uff09\n        this.itemWidth = sliderItems[0].offsetWidth;\n\n        this.init();\n    }\n\n    \/\/ \u83b7\u53d6\u4fee\u6b63\u540e\u7684\u7d22\u5f15\u503c\n    \/\/ \u968f\u5fc3\u6240\u6b32\uff0c\u4e0d\u903e\u77e9\n    getCorrectedIndex(index) {\n        if (index < this.minIndex) return this.maxIndex;\n        if (index > this.maxIndex) return this.minIndex;\n        return index;\n    }\n\n    \/\/ \u521d\u59cb\u5316\n    init() {\n        \/\/ \u4e3a\u6bcf\u4e2a slider-item \u8bbe\u7f6e\u5bbd\u5ea6\n        this.setItemsWidth();\n\n        \/\/ \u4e3a slider-content \u8bbe\u7f6e\u5bbd\u5ea6\n        this.setContentWidth();\n\n        \/\/ \u5207\u6362\u5230\u521d\u59cb\u7d22\u5f15 initialIndex\n        this.move(this.getDistance());\n\n        \/\/ \u5f00\u542f\u52a8\u753b\n        if (this.options.animation) {\n            this.openAnimation();\n        }\n    }\n\n    \/\/ \u4e3a\u6bcf\u4e2a slider-item \u8bbe\u7f6e\u5bbd\u5ea6\n    setItemsWidth() {\n        for (const item of this.sliderItems) {\n            item.style.width = `${this.itemWidth}px`;\n        }\n    }\n\n    \/\/ \u4e3a slider-content \u8bbe\u7f6e\u5bbd\u5ea6\n    setContentWidth() {\n        this.sliderContent.style.width = `${\n      this.itemWidth * this.sliderItems.length\n    }px`;\n    }\n\n    \/\/ \u4e0d\u5e26\u52a8\u753b\u7684\u79fb\u52a8\n    move(distance) {\n        this.sliderContent.style.transform = `translate3d(${distance}px, 0px, 0px)`;\n    }\n\n    \/\/ \u5e26\u52a8\u753b\u7684\u79fb\u52a8\n    moveWithAnimation(distance) {\n        this.setAnimationSpeed(this.options.speed);\n        this.move(distance);\n    }\n\n    \/\/ \u8bbe\u7f6e\u5207\u6362\u52a8\u753b\u901f\u5ea6\n    setAnimationSpeed(speed) {\n        this.sliderContent.style.transitionDuration = `${speed}ms`;\n    }\n\n    \/\/ \u83b7\u53d6\u8981\u79fb\u52a8\u7684\u8ddd\u79bb\n    getDistance(index = this.currIndex) {\n        return -this.itemWidth * index;\n    }\n\n    \/\/ \u5f00\u542f\u52a8\u753b\n    openAnimation() {\n        this.sliderContent.classList.add(SLIDER_ANIMATION_CLASSNAME);\n    }\n\n    \/\/ \u5173\u95ed\u52a8\u753b\n    closeAnimation() {\n        this.setAnimationSpeed(0);\n    }\n\n    \/\/ \u5207\u6362\u5230 index \u7d22\u5f15\u5bf9\u5e94\u7684\u5e7b\u706f\u7247\n    to(index) {\n        index = this.getCorrectedIndex(index);\n        if (this.currIndex === index) return;\n\n        this.currIndex = index;\n        const distance = this.getDistance();\n\n        if (this.options.animation) {\n            return this.moveWithAnimation(distance);\n        } else {\n            return this.move(distance);\n        }\n    }\n\n    \/\/ \u5207\u6362\u4e0a\u4e00\u5f20\n    prev() {\n        this.to(this.currIndex - 1);\n    }\n\n    \/\/ \u5207\u6362\u4e0b\u4e00\u5f20\n    next() {\n        this.to(this.currIndex + 1);\n    }\n\n    \/\/ \u83b7\u53d6\u5f53\u524d\u7d22\u5f15\n    getCurrIndex() {\n        return this.currIndex;\n    }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    Promise Promise \u662f\u4ec0\u4e48 \/\/1.\u8ba4\u8bc6 Promise: \u662f\u5f02\u6b65\u64cd\u4f5c\u7684\u4e00\u79cd\u89e3\u51b3\u65b9\u6848 \/\/\u56de\u8c03\u51fd\u6570 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-2638","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2638"}],"version-history":[{"count":27,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2638\/revisions"}],"predecessor-version":[{"id":3718,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2638\/revisions\/3718"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}