{"id":3259,"date":"2021-06-07T20:02:38","date_gmt":"2021-06-07T12:02:38","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=3259"},"modified":"2026-08-18T12:35:35","modified_gmt":"2026-08-18T04:35:35","slug":"javascript-%e5%8f%8d%e5%b0%84%e6%9c%ba%e5%88%b6%e5%8f%8a-reflect-%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=3259","title":{"rendered":"JavaScript \u53cd\u5c04\u673a\u5236\u53ca Reflect \u8be6\u89e3"},"content":{"rendered":"
\n

\u53cd\u5c04<\/strong>\u6307\u7f16\u8bd1\u671f\u8fd8\u4e0d\u77e5\u9053\u52a0\u8f7d\u54ea\u4e2a\u7c7b\uff0c\u5230\u8fd0\u884c\u65f6\u624d\u52a0\u8f7d\u3001\u6267\u884c\uff1b\u7a0b\u5e8f\u8fd0\u884c\u4e2d\u80fd\u62ff\u5230\u81ea\u8eab\u4fe1\u606f\u3002JS \u91cc apply<\/code> \u5c31\u662f\u4e00\u79cd\u53cd\u5c04\u7528\u6cd5\u3002<\/p>\n

ES6 \u7684 Reflect<\/code> \u628a\u5bf9\u5bf9\u8c61\u7684\u5e95\u5c42\u64cd\u4f5c\u6536\u6210\u4e00\u5957\u9759\u6001 API\uff0c\u5e76\u4f5c\u4e3a Proxy<\/code> \u62e6\u622a\u5668\u7684\u9ed8\u8ba4\u5b9e\u73b0\u3002\u5b83\u4e0d\u662f\u6784\u9020\u51fd\u6570\uff0c\u4e0d\u80fd new<\/code>\uff0c\u4e5f\u4e0d\u80fd\u5f53\u666e\u901a\u51fd\u6570\u8c03\u7528\u3002<\/p>\n

\u4e00\u3001\u4ec0\u4e48\u662f Reflect<\/h2>\n

Reflect \u662f\u5185\u5efa\u5bf9\u8c61\uff0c\u7528\u6765\u62e6\u622a JavaScript \u64cd\u4f5c\u3002\u6240\u6709\u5c5e\u6027\u548c\u65b9\u6cd5\u90fd\u662f\u9759\u6001\u7684\uff0c\u5185\u90e8\u5c01\u88c5\u4e86\u4e00\u7cfb\u5217\u5bf9\u8c61\u5e95\u5c42\u64cd\u4f5c\u3002<\/p>\n

\u82e5 Proxy \u6ca1\u5199 get\uff0c\u9ed8\u8ba4\u5c31\u662f Reflect.get\uff1a<\/p>\n

const proxy = new Proxy(obj, {\n  get(target, property) {\n    \/\/ \u5982\u679c\u6ca1\u6709\u5b9a\u4e49 get \u65b9\u6cd5\uff0c\u90a3\u4e48\u9ed8\u8ba4\u8fd4\u56de\u7684\u5c31\u662f Reflect \u7684 get \u65b9\u6cd5\n    return Reflect.get(target, property)\n  }\n})<\/code><\/pre>\n
\u4ee5\u524d\u6539\u5bf9\u8c61\u53ef\u4ee5\u7528 Object \u4e0a\u7684\u65b9\u6cd5\uff0c\u4e5f\u53ef\u4ee5\u7528 in\u3001delete \u8fd0\u7b97\u7b26\u3002Reflect \u628a\u64cd\u4f5c\u65b9\u5f0f\u7edf\u4e00\u6210\u51fd\u6570\u8c03\u7528\u3002API \u4e00\u89c8\uff1a<\/p>\n
\"20210607200328\"<\/a><\/p>\n
\u4e8c\u3001apply<\/h2>\n
Reflect.apply(target, thisArgument, argumentsList)<\/code><\/p>\n
    \n
  • \n
    target\uff1a\u76ee\u6807\u51fd\u6570\uff08\u5fc5\u9009\uff09<\/section>\n<\/li>\n
  • \n
    thisArgument\uff1a\u8c03\u7528\u65f6\u7ed1\u5b9a\u7684 this\uff08\u53ef\u9009\uff09<\/section>\n<\/li>\n
  • \n
    argumentsList\uff1a\u5b9e\u53c2\u5217\u8868\uff0c\u5e94\u662f\u7c7b\u6570\u7ec4\uff08\u53ef\u9009\uff09<\/section>\n<\/li>\n<\/ul>\n
    ES5<\/h3>\n
    \u5148\u6307\u5b9a\u65b9\u6cd5\uff0c\u518d apply\uff1a<\/p>\n
    Math.floor.apply(null, [1.72])  \/\/ 1<\/code><\/pre>\n
    ES6<\/h3>\n
    \u5148\u4ea4\u51fa apply\uff0c\u518d\u6307\u5b9a\u65b9\u6cd5\uff1a<\/p>\n
    Reflect.apply(Math.floor, null, [1.72])  \/\/ 1<\/code><\/pre>\n
    \u9759\u6001\u626b\u63cf\u65f6 Math.floor \u4e0d\u4f1a\u6267\u884c\uff0c\u8fd0\u884c\u65f6\u518d\u5f53\u53c2\u6570\u4f20\u8fdb\u53bb\u3002<\/p>\n
    \u5b9e\u9645\u5e94\u7528<\/h3>\n
    \/\/ ES5 \u7528\u6cd5\nlet price = 101.5\nif (price > 100) {\n  price = Math.floor.apply(null, [price])\n} else {\n  price = Math.ceil.apply(null, [price])\n}\n\nprice  \/\/ 101<\/code><\/pre>\n
    \/\/ ES6 \u7528\u6cd5\nlet price = 101.5\n\nReflect.apply(price > 100 ? Math.floor : Math.ceil, null, [price])  \/\/ 101<\/code><\/pre>\n
    \u4e09\u3001construct<\/h2>\n
    \u7528\u53cd\u5c04\u521b\u5efa\u5b9e\u4f8b\uff0c\u7c7b\u4f3c new target(…args)\u3002<\/p>\n
    Reflect.construct(target, argumentsList[, newTarget])<\/code><\/p>\n
      \n
    • \n
      target\uff1a\u88ab\u8fd0\u884c\u7684\u6784\u9020\u51fd\u6570\uff08\u5fc5\u9009\uff09<\/section>\n<\/li>\n
    • \n
      argumentsList\uff1a\u53c2\u6570\u6570\u7ec4\u6216\u4f2a\u6570\u7ec4\uff08\u53ef\u9009\uff09<\/section>\n<\/li>\n
    • \n
      newTarget\uff1a\u53c2\u8003 new.target\uff1b\u7701\u7565\u5219\u4e0e target \u76f8\u540c\uff08\u53ef\u9009\uff09<\/section>\n<\/li>\n<\/ul>\n
      let a = new Date()\n\na.getTime()  \/\/ 1632632744483<\/code><\/pre>\n
      let b = Reflect.construct(Date, [])\nb.getTime()  \/\/ 1632632744484<\/code><\/pre>\n
      \u56db\u3001defineProperty \/ deleteProperty<\/h2>\n
      Reflect.defineProperty<\/code> \u4e0e Object.defineProperty<\/code> \u51e0\u4e4e\u4e00\u6837\uff1aReflect.defineProperty(target, propertyKey, attributes)<\/code>\u3002<\/p>\n
      const student = {}\nconst r = Object.defineProperty(student, 'name', { value: 'Mike' })\n\nstudent  \/\/ {name: \"Mike\"}\nr  \/\/ {name: \"Mike\"}<\/code><\/pre>\n
      const student = {}\nconst r = Reflect.defineProperty(student, 'name', { value: 'Mike' })\n\nstudent  \/\/ {name: \"Mike\"}\nr  \/\/ true<\/code><\/pre>\n
      \u6548\u679c\u4e00\u6837\uff0c\u90fd\u80fd\u6539\u5bf9\u8c61\uff1b\u5dee\u522b\u5728\u8fd4\u56de\u503c\uff1aObject \u8fd4\u56de\u5bf9\u8c61\u672c\u8eab\uff0cReflect \u8fd4\u56de true\u3002W3C \u65b9\u5411\u662f\u9010\u6b65\u628a Object \u4e0a\u8fd9\u7c7b\u65b9\u6cd5\u8fc1\u5230 Reflect\u3002<\/p>\n
      Reflect.deleteProperty<\/code> \u5220\u9664\u5c5e\u6027\uff0c\u8fd4\u56de\u662f\u5426\u6210\u529f\uff0c\u548c\u975e\u4e25\u683c\u6a21\u5f0f delete<\/code> \u51e0\u4e4e\u76f8\u540c\u3002<\/p>\n
      const obj = { x: 1, y: 2 }\nconst a = delete obj.x\nobj  \/\/ {y: 2}\na  \/\/ true<\/code><\/pre>\n
      const obj = { x: 1, y: 2 }\nconst a = Reflect.deleteProperty(obj, 'x')\nobj  \/\/ {y: 2}\na  \/\/ true<\/code><\/pre>\n
      \u4e94\u3001get \/ getOwnPropertyDescriptor \/ getPrototypeOf<\/h2>\n
      Reflect.get<\/code> \u50cf\u8bfb target[propertyKey]<\/code>\uff0c\u4f46\u662f\u51fd\u6570\u5f62\u5f0f\u3002<\/p>\n
      const obj = { x: 1, y: 2 }\nobj.x  \/\/ 1\nobj['x']  \/\/ 1<\/code><\/pre>\n
      const obj = { x: 1, y: 2 }\nReflect.get(obj, 'x')  \/\/ 1\nReflect.get(['a', 'b', 'c'], 1)  \/\/ b<\/code><\/pre>\n
      Reflect.getOwnPropertyDescriptor<\/code> \u7c7b\u4f3c Object.getOwnPropertyDescriptor<\/code>\uff1a\u6709\u5219\u8fd4\u56de\u63cf\u8ff0\u7b26\uff0c\u65e0\u5219 undefined\u3002<\/p>\n
      const obj = { x: 1, y: 2 }\nObject.getOwnPropertyDescriptor(obj, 'x')\n\/\/ {value: 1, writable: true, enumerable: true, configurable: true}<\/code><\/pre>\n
      const obj = { x: 1, y: 2 }\nReflect.getOwnPropertyDescriptor(obj, 'x')\n\/\/ {value: 1, writable: true, enumerable: true, configurable: true}\nReflect.getOwnPropertyDescriptor({ x: 'hello' }, 'y')\n\/\/ undefined\nReflect.getOwnPropertyDescriptor([], 'length')\n\/\/ {value: 0, writable: true, enumerable: false, configurable: false}<\/code><\/pre>\n
      \u7b2c\u4e00\u4e2a\u53c2\u6570\u4e0d\u662f\u5bf9\u8c61\u65f6\uff1aReflect \u629b TypeError\uff1bObject \u4f1a\u5148\u5f3a\u5236\u8f6c\u6210\u5bf9\u8c61\u3002<\/p>\n
      Reflect.getOwnPropertyDescriptor(\"foo\", 0);\n\/\/ TypeError: \"foo\" is not a non-null object\nObject.getOwnPropertyDescriptor(\"foo\", 0);\n\/\/ { value: \"f\", writable: false, enumerable: true, configurable: false }<\/code><\/pre>\n
      Reflect.getPrototypeOf<\/code> \u4e0e Object.getPrototypeOf<\/code> \u4e00\u6837\uff0c\u8fd4\u56de [[Prototype]]\u3002<\/p>\n
      const d = new Date()\nObject.getPrototypeOf(d)\n\/\/ {constructor: \u0192, toString: \u0192, toDateString: \u0192, toTimeString: \u0192, toISOString: \u0192, \u2026}<\/code><\/pre>\n
      const d = new Date()\nReflect.getPrototypeOf(d)\n\/\/ {constructor: \u0192, toString: \u0192, toDateString: \u0192, toTimeString: \u0192, toISOString: \u0192, \u2026}<\/code><\/pre>\n
      \u539f\u6587\u5199\u6210\u4e86 New Date()<\/code>\uff0c\u6784\u9020\u51fd\u6570\u5e94\u5c0f\u5199 new<\/code>\u3002<\/p>\n
      \u516d\u3001has \/ isExtensible \/ ownKeys<\/h2>\n
      Reflect.has<\/code> \u5224\u65ad\u5c5e\u6027\u662f\u5426\u5b58\u5728\uff0c\u548c in<\/code> \u76f8\u540c\u3002<\/p>\n
      const obj = { x: 1, y: 2 }\nReflect.has(obj, 'x')  \/\/ true\nReflect.has(obj, 'z')  \/\/ false<\/code><\/pre>\n
      Reflect.isExtensible<\/code> \u4e0e Object.isExtensible<\/code> \u4e00\u6837\uff0c\u770b\u80fd\u4e0d\u80fd\u52a0\u65b0\u5c5e\u6027\u3002<\/p>\n
      const obj = { x: 1, y: 2 }\nReflect.isExtensible(obj)  \/\/ true\nObject.freeze(obj)  \/\/ \u51bb\u7ed3\uff1a\u4e0d\u80fd\u52a0\u5c5e\u6027\uff0c\u5df2\u6709\u5c5e\u6027\u4e5f\u4e0d\u53ef\u5199\nobj.z = 3\nReflect.isExtensible(obj)  \/\/ false\nobj  \/\/ {x: 1, y: 2}<\/code><\/pre>\n
      Reflect.ownKeys<\/code> \u8fd4\u56de\u81ea\u8eab\u5c5e\u6027\u952e\uff0c\u7b49\u4ef7\u4e8e Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))<\/code>\u3002<\/p>\n
      const obj = { x: 1, y: 2 }\nReflect.ownKeys(obj)  \/\/ [\"x\", \"y\"]\nReflect.ownKeys([])  \/\/ [\"length\"]\nReflect.ownKeys([1, 2])  \/\/ [\"0\", \"1\", \"length\"]<\/code><\/pre>\n
      \u4e03\u3001preventExtensions \/ set \/ setPrototypeOf<\/h2>\n
      Reflect.preventExtensions<\/code> \u963b\u6b62\u518d\u6dfb\u52a0\u65b0\u5c5e\u6027\uff0c\u548c Object.preventExtensions()<\/code> \u4e00\u81f4\u3002\u5b83\u4e0d\u7b49\u4e8e<\/strong> Object.freeze()<\/code>\uff1afreeze \u8fd8\u4f1a\u8ba9\u5df2\u6709\u5c5e\u6027\u4e0d\u53ef\u5199\u3001\u4e0d\u53ef\u914d\u7f6e\u3002<\/p>\n
      const obj = { x: 1, y: 2 }\nReflect.isExtensible(obj)  \/\/ true\nReflect.preventExtensions(obj)  \/\/ \u963b\u6b62\u65b0\u5c5e\u6027\u6dfb\u52a0\u5230\u5bf9\u8c61\nobj.z = 3\nReflect.isExtensible(obj)  \/\/ false\nobj  \/\/ {x: 1, y: 2}<\/code><\/pre>\n
      Reflect.set<\/code> \u4ee5\u51fd\u6570\u65b9\u5f0f\u8d4b\u503c\uff0c\u7c7b\u4f3c\u5c5e\u6027\u8bbf\u95ee\u5668\u3002<\/p>\n
      const obj = { x: 1, y: 2 }\nReflect.set(obj, 'z', 4)\nobj  \/\/ {x: 1, y: 2, z: 4}\nconst arr = ['apple', 'pear']\nReflect.set(arr, 1, 'banana')\narr  \/\/ [\"apple\", \"banana\"]<\/code><\/pre>\n
      Reflect.setPrototypeOf<\/code> \u6539 [[Prototype]]\u3002<\/p>\n
      const arr = ['apple', 'pear']\nReflect.getPrototypeOf(arr)\n\/\/ [constructor: \u0192, concat: \u0192, copyWithin: \u0192, fill: \u0192, find: \u0192, \u2026]\n\nReflect.setPrototypeOf(arr, String.prototype)\nReflect.getPrototypeOf(arr)\n\/\/ String {\"\", constructor: \u0192, anchor: \u0192, big: \u0192, blink: \u0192, \u2026}<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n\n\n
      \u65b9\u6cd5<\/th>\n\u5bf9\u5e94\u65e7\u5199\u6cd5<\/th>\n\u5dee\u522b<\/th>\n<\/tr>\n<\/thead>\n
      apply<\/code><\/td>\nfn.apply(this, args)<\/code><\/td>\n\u51fd\u6570\u5f53\u53c2\u6570\u4f20\u5165\uff0c\u8fd0\u884c\u65f6\u518d\u9009<\/td>\n<\/tr>\n
      construct<\/code><\/td>\nnew Ctor(...args)<\/code><\/td>\n\u53cd\u5c04\u521b\u5efa\u5b9e\u4f8b<\/td>\n<\/tr>\n
      defineProperty<\/code><\/td>\nObject.defineProperty<\/code><\/td>\n\u8fd4\u56de true\/false\uff0c\u4e0d\u662f\u5bf9\u8c61<\/td>\n<\/tr>\n
      deleteProperty<\/code><\/td>\ndelete obj.x<\/code><\/td>\n\u8fd4\u56de\u662f\u5426\u5220\u9664\u6210\u529f<\/td>\n<\/tr>\n
      get<\/code> \/ set<\/code><\/td>\n\u5c5e\u6027\u8bfb\u5199<\/td>\n\u51fd\u6570\u5f62\u5f0f\uff0c\u4fbf\u4e8e\u548c Proxy \u5bf9\u9f50<\/td>\n<\/tr>\n
      has<\/code><\/td>\nin<\/code><\/td>\n\u5224\u65ad\u5c5e\u6027\u5b58\u5728<\/td>\n<\/tr>\n
      preventExtensions<\/code><\/td>\nObject.preventExtensions<\/code><\/td>\n\u53ea\u7981\u6269\u5c55\uff0c\u4e0d\u662f freeze<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \u539f\u6587\uff1ahttps:\/\/www.cnblogs.com\/Leophen\/p\/14838608.html<\/p>\n
      \n
      \u4e00\u53e5\u8bdd\u603b\u7ed3\uff1aReflect \u628a\u5bf9\u8c61\u64cd\u4f5c\u6536\u6210\u9759\u6001\u51fd\u6570\uff0c\u65e2\u662f Proxy \u7684\u9ed8\u8ba4\u5b9e\u73b0\uff0c\u4e5f\u6bd4 Object \u65b9\u6cd5\u66f4\u7edf\u4e00\u3001\u5931\u8d25\u65f6\u66f4\u5e38\u8fd4\u56de\u5e03\u5c14\u6216\u629b TypeError\u3002<\/strong><\/p>\n<\/blockquote>\n<\/section>\n","protected":false},"excerpt":{"rendered":"
      \u53cd\u5c04\u6307\u7f16\u8bd1\u671f\u8fd8\u4e0d\u77e5\u9053\u52a0\u8f7d\u54ea\u4e2a\u7c7b\uff0c\u5230\u8fd0\u884c\u65f6\u624d\u52a0\u8f7d\u3001\u6267\u884c\uff1b\u7a0b\u5e8f\u8fd0\u884c\u4e2d\u80fd\u62ff\u5230\u81ea\u8eab\u4fe1\u606f\u3002JS \u91cc apply \u5c31\u662f\u4e00\u79cd […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[109],"tags":[150,35],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3259"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3259"}],"version-history":[{"count":3,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3259\/revisions"}],"predecessor-version":[{"id":3264,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3259\/revisions\/3264"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}