[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fproxy":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fproxy":3146,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fproxy":3172},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":14,"pinned":15,"draft":15,"body":16,"seo":3142,"stem":3143,"id":3144,"extension":3145},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fproxy","代理与反射","Proxy 与 Reflect 用于拦截并自定义对象基本操作，是 Vue 3 等响应式系统的底层机制之一。","技能小册",[12,13],"javascript","proxy","2022-10-23",false,{"type":17,"value":18,"toc":3118},"minimark",[19,22,34,39,44,49,96,117,121,324,336,703,707,718,821,825,840,844,955,959,968,1146,1150,1166,1210,1353,1357,1361,1366,1557,1561,1567,1994,1998,2001,2279,2283,2295,2577,2581,2586,2770,2774,2996,2999,3048,3056,3059,3062,3114],[20,21,8],"h1",{"id":8},[23,24,25,29,30,33],"p",{},[26,27,28],"code",{},"Proxy"," 与 ",[26,31,32],{},"Reflect"," 用于拦截并自定义对象基本操作，是 Vue 3 等响应式系统的底层机制之一。",[35,36,38],"h2",{"id":37},"一proxy拦截与自定义操作","一、Proxy：拦截与自定义操作",[23,40,41,43],{},[26,42,28],{}," 用于创建一个对象的代理，从而可以拦截和重新定义该对象的基本操作（如属性读取、赋值、函数调用等）。",[45,46,48],"h3",{"id":47},"_1-基本语法","1. 基本语法",[50,51,56],"pre",{"className":52,"code":53,"language":54,"meta":55,"style":55},"language-js shiki shiki-themes material-theme-lighter github-light github-dark","const proxy = new Proxy(target, handler);\n","js","",[26,57,58],{"__ignoreMap":55},[59,60,63,67,71,75,78,82,86,90,93],"span",{"class":61,"line":62},"line",1,[59,64,66],{"class":65},"sbsja","const",[59,68,70],{"class":69},"s_hVV"," proxy",[59,72,74],{"class":73},"smGrS"," =",[59,76,77],{"class":73}," new",[59,79,81],{"class":80},"sGLFI"," Proxy",[59,83,85],{"class":84},"su5hD","(target",[59,87,89],{"class":88},"sP7_E",",",[59,91,92],{"class":84}," handler)",[59,94,95],{"class":88},";\n",[97,98,99,106],"ul",{},[100,101,102,105],"li",{},[26,103,104],{},"target","：被代理的目标对象（可以是普通对象、数组、函数、甚至另一个代理）。",[100,107,108,111,112,116],{},[26,109,110],{},"handler","：定义拦截行为的对象，内部包含",[113,114,115],"strong",{},"捕获器","（trap）方法。",[45,118,120],{"id":119},"_2-常用捕获器","2. 常用捕获器",[122,123,124,136],"table",{},[125,126,127],"thead",{},[128,129,130,133],"tr",{},[131,132,115],"th",{},[131,134,135],{},"触发时机",[137,138,139,158,171,187,199,219,231,246,258,270,282,294,312],"tbody",{},[128,140,141,147],{},[142,143,144],"td",{},[26,145,146],{},"get(target, prop, receiver)",[142,148,149,150,153,154,157],{},"读取属性：",[26,151,152],{},"proxy[prop]","、",[26,155,156],{},"Object.create"," 等",[128,159,160,165],{},[142,161,162],{},[26,163,164],{},"set(target, prop, value, receiver)",[142,166,167,168],{},"设置属性：",[26,169,170],{},"proxy[prop] = value",[128,172,173,178],{},[142,174,175],{},[26,176,177],{},"has(target, prop)",[142,179,180,183,184],{},[26,181,182],{},"in"," 运算符：",[26,185,186],{},"prop in proxy",[128,188,189,194],{},[142,190,191],{},[26,192,193],{},"deleteProperty(target, prop)",[142,195,196],{},[26,197,198],{},"delete proxy[prop]",[128,200,201,206],{},[142,202,203],{},[26,204,205],{},"apply(target, thisArg, argsList)",[142,207,208,209,153,212,215,216],{},"函数调用：",[26,210,211],{},"proxy(...args)",[26,213,214],{},"call","\u002F",[26,217,218],{},"apply",[128,220,221,226],{},[142,222,223],{},[26,224,225],{},"construct(target, argsList, newTarget)",[142,227,228],{},[26,229,230],{},"new proxy(...args)",[128,232,233,238],{},[142,234,235],{},[26,236,237],{},"ownKeys(target)",[142,239,240,153,243,157],{},[26,241,242],{},"Object.getOwnPropertyNames",[26,244,245],{},"Object.keys",[128,247,248,253],{},[142,249,250],{},[26,251,252],{},"getOwnPropertyDescriptor(target, prop)",[142,254,255],{},[26,256,257],{},"Object.getOwnPropertyDescriptor",[128,259,260,265],{},[142,261,262],{},[26,263,264],{},"defineProperty(target, prop, descriptor)",[142,266,267],{},[26,268,269],{},"Object.defineProperty",[128,271,272,277],{},[142,273,274],{},[26,275,276],{},"preventExtensions(target)",[142,278,279],{},[26,280,281],{},"Object.preventExtensions",[128,283,284,289],{},[142,285,286],{},[26,287,288],{},"isExtensible(target)",[142,290,291],{},[26,292,293],{},"Object.isExtensible",[128,295,296,301],{},[142,297,298],{},[26,299,300],{},"getPrototypeOf(target)",[142,302,303,153,306,153,309],{},[26,304,305],{},"Object.getPrototypeOf",[26,307,308],{},"__proto__",[26,310,311],{},"instanceof",[128,313,314,319],{},[142,315,316],{},[26,317,318],{},"setPrototypeOf(target, proto)",[142,320,321],{},[26,322,323],{},"Object.setPrototypeOf",[45,325,327,328,331,332,335],{"id":326},"_3-示例get-和-set-拦截","3. 示例：",[26,329,330],{},"get"," 和 ",[26,333,334],{},"set"," 拦截",[50,337,339],{"className":52,"code":338,"language":54,"meta":55,"style":55},"const user = { name: \"Alice\", age: 30 };\nconst proxy = new Proxy(user, {\n    get(target, prop, receiver) {\n        console.log(`GET ${String(prop)}`);\n        return prop in target ? target[prop] : \"default\";\n    },\n    set(target, prop, value, receiver) {\n        console.log(`SET ${String(prop)} = ${value}`);\n        target[prop] = value;\n        return true; \u002F\u002F 表示设置成功\n    },\n});\nconsole.log(proxy.name); \u002F\u002F GET name → Alice\nproxy.age = 31; \u002F\u002F SET age = 31\nconsole.log(proxy.xxx); \u002F\u002F GET xxx → 'default'\n",[26,340,341,385,406,434,475,514,520,547,590,609,625,630,639,662,682],{"__ignoreMap":55},[59,342,343,345,348,350,353,357,360,364,368,371,373,376,378,382],{"class":61,"line":62},[59,344,66],{"class":65},[59,346,347],{"class":69}," user",[59,349,74],{"class":73},[59,351,352],{"class":88}," {",[59,354,356],{"class":355},"skxfh"," name",[59,358,359],{"class":88},":",[59,361,363],{"class":362},"sjJ54"," \"",[59,365,367],{"class":366},"s_sjI","Alice",[59,369,370],{"class":362},"\"",[59,372,89],{"class":88},[59,374,375],{"class":355}," age",[59,377,359],{"class":88},[59,379,381],{"class":380},"srdBf"," 30",[59,383,384],{"class":88}," };\n",[59,386,388,390,392,394,396,398,401,403],{"class":61,"line":387},2,[59,389,66],{"class":65},[59,391,70],{"class":69},[59,393,74],{"class":73},[59,395,77],{"class":73},[59,397,81],{"class":80},[59,399,400],{"class":84},"(user",[59,402,89],{"class":88},[59,404,405],{"class":88}," {\n",[59,407,409,413,416,419,421,424,426,429,432],{"class":61,"line":408},3,[59,410,412],{"class":411},"sVXei","    get",[59,414,415],{"class":88},"(",[59,417,104],{"class":418},"s99_P",[59,420,89],{"class":88},[59,422,423],{"class":418}," prop",[59,425,89],{"class":88},[59,427,428],{"class":418}," receiver",[59,430,431],{"class":88},")",[59,433,405],{"class":88},[59,435,437,440,443,446,448,451,454,457,460,463,466,468,471,473],{"class":61,"line":436},4,[59,438,439],{"class":84},"        console",[59,441,442],{"class":88},".",[59,444,445],{"class":80},"log",[59,447,415],{"class":355},[59,449,450],{"class":362},"`",[59,452,453],{"class":366},"GET ",[59,455,456],{"class":362},"${",[59,458,459],{"class":80},"String",[59,461,415],{"class":462},"sfo-9",[59,464,465],{"class":84},"prop",[59,467,431],{"class":462},[59,469,470],{"class":362},"}`",[59,472,431],{"class":355},[59,474,95],{"class":88},[59,476,478,482,484,487,490,493,495,498,500,503,505,507,510,512],{"class":61,"line":477},5,[59,479,481],{"class":480},"sVHd0","        return",[59,483,423],{"class":84},[59,485,486],{"class":73}," in",[59,488,489],{"class":84}," target",[59,491,492],{"class":73}," ?",[59,494,489],{"class":84},[59,496,497],{"class":355},"[",[59,499,465],{"class":84},[59,501,502],{"class":355},"] ",[59,504,359],{"class":73},[59,506,363],{"class":362},[59,508,509],{"class":366},"default",[59,511,370],{"class":362},[59,513,95],{"class":88},[59,515,517],{"class":61,"line":516},6,[59,518,519],{"class":88},"    },\n",[59,521,523,526,528,530,532,534,536,539,541,543,545],{"class":61,"line":522},7,[59,524,525],{"class":411},"    set",[59,527,415],{"class":88},[59,529,104],{"class":418},[59,531,89],{"class":88},[59,533,423],{"class":418},[59,535,89],{"class":88},[59,537,538],{"class":418}," value",[59,540,89],{"class":88},[59,542,428],{"class":418},[59,544,431],{"class":88},[59,546,405],{"class":88},[59,548,550,552,554,556,558,560,563,565,567,569,571,573,576,579,581,584,586,588],{"class":61,"line":549},8,[59,551,439],{"class":84},[59,553,442],{"class":88},[59,555,445],{"class":80},[59,557,415],{"class":355},[59,559,450],{"class":362},[59,561,562],{"class":366},"SET ",[59,564,456],{"class":362},[59,566,459],{"class":80},[59,568,415],{"class":462},[59,570,465],{"class":84},[59,572,431],{"class":462},[59,574,575],{"class":362},"}",[59,577,578],{"class":366}," = ",[59,580,456],{"class":362},[59,582,583],{"class":84},"value",[59,585,470],{"class":362},[59,587,431],{"class":355},[59,589,95],{"class":88},[59,591,593,596,598,600,602,605,607],{"class":61,"line":592},9,[59,594,595],{"class":84},"        target",[59,597,497],{"class":355},[59,599,465],{"class":84},[59,601,502],{"class":355},[59,603,604],{"class":73},"=",[59,606,538],{"class":84},[59,608,95],{"class":88},[59,610,612,614,618,621],{"class":61,"line":611},10,[59,613,481],{"class":480},[59,615,617],{"class":616},"syTEX"," true",[59,619,620],{"class":88},";",[59,622,624],{"class":623},"sutJx"," \u002F\u002F 表示设置成功\n",[59,626,628],{"class":61,"line":627},11,[59,629,519],{"class":88},[59,631,633,635,637],{"class":61,"line":632},12,[59,634,575],{"class":88},[59,636,431],{"class":84},[59,638,95],{"class":88},[59,640,642,645,647,649,652,654,657,659],{"class":61,"line":641},13,[59,643,644],{"class":84},"console",[59,646,442],{"class":88},[59,648,445],{"class":80},[59,650,651],{"class":84},"(proxy",[59,653,442],{"class":88},[59,655,656],{"class":84},"name)",[59,658,620],{"class":88},[59,660,661],{"class":623}," \u002F\u002F GET name → Alice\n",[59,663,665,667,669,672,674,677,679],{"class":61,"line":664},14,[59,666,13],{"class":84},[59,668,442],{"class":88},[59,670,671],{"class":84},"age ",[59,673,604],{"class":73},[59,675,676],{"class":380}," 31",[59,678,620],{"class":88},[59,680,681],{"class":623}," \u002F\u002F SET age = 31\n",[59,683,685,687,689,691,693,695,698,700],{"class":61,"line":684},15,[59,686,644],{"class":84},[59,688,442],{"class":88},[59,690,445],{"class":80},[59,692,651],{"class":84},[59,694,442],{"class":88},[59,696,697],{"class":84},"xxx)",[59,699,620],{"class":88},[59,701,702],{"class":623}," \u002F\u002F GET xxx → 'default'\n",[45,704,706],{"id":705},"_4-可撤销-proxy","4. 可撤销 Proxy",[23,708,709,710,713,714,717],{},"使用 ",[26,711,712],{},"Proxy.revocable()"," 创建一个可以手动撤销的代理。撤销后任何操作都会抛出 ",[26,715,716],{},"TypeError","。",[50,719,721],{"className":52,"code":720,"language":54,"meta":55,"style":55},"const target = { msg: \"hello\" };\nconst { proxy, revoke } = Proxy.revocable(target, {});\nconsole.log(proxy.msg); \u002F\u002F 'hello'\nrevoke();\n\u002F\u002F console.log(proxy.msg); \u002F\u002F TypeError: Cannot perform 'get' on a proxy that has been revoked\n",[26,722,723,747,783,803,813],{"__ignoreMap":55},[59,724,725,727,729,731,733,736,738,740,743,745],{"class":61,"line":62},[59,726,66],{"class":65},[59,728,489],{"class":69},[59,730,74],{"class":73},[59,732,352],{"class":88},[59,734,735],{"class":355}," msg",[59,737,359],{"class":88},[59,739,363],{"class":362},[59,741,742],{"class":366},"hello",[59,744,370],{"class":362},[59,746,384],{"class":88},[59,748,749,751,753,755,757,760,763,765,767,769,772,774,776,779,781],{"class":61,"line":387},[59,750,66],{"class":65},[59,752,352],{"class":88},[59,754,70],{"class":69},[59,756,89],{"class":88},[59,758,759],{"class":69}," revoke",[59,761,762],{"class":88}," }",[59,764,74],{"class":73},[59,766,81],{"class":84},[59,768,442],{"class":88},[59,770,771],{"class":80},"revocable",[59,773,85],{"class":84},[59,775,89],{"class":88},[59,777,778],{"class":88}," {}",[59,780,431],{"class":84},[59,782,95],{"class":88},[59,784,785,787,789,791,793,795,798,800],{"class":61,"line":408},[59,786,644],{"class":84},[59,788,442],{"class":88},[59,790,445],{"class":80},[59,792,651],{"class":84},[59,794,442],{"class":88},[59,796,797],{"class":84},"msg)",[59,799,620],{"class":88},[59,801,802],{"class":623}," \u002F\u002F 'hello'\n",[59,804,805,808,811],{"class":61,"line":436},[59,806,807],{"class":80},"revoke",[59,809,810],{"class":84},"()",[59,812,95],{"class":88},[59,814,815,818],{"class":61,"line":477},[59,816,817],{"class":623},"\u002F\u002F console.log(proxy.msg);",[59,819,820],{"class":623}," \u002F\u002F TypeError: Cannot perform 'get' on a proxy that has been revoked\n",[35,822,824],{"id":823},"二reflect反射-api","二、Reflect：反射 API",[23,826,827,829,830,832,833,836,837,839],{},[26,828,32],{}," 是一个内置对象，提供了一组与 ",[26,831,28],{}," 捕获器一一对应的",[113,834,835],{},"静态方法","。它的主要用途是与 ",[26,838,28],{}," 协同工作，实现默认行为。",[45,841,843],{"id":842},"_1-常用-reflect-方法","1. 常用 Reflect 方法",[122,845,846,861],{},[125,847,848],{},[128,849,850,855],{},[131,851,852,854],{},[26,853,28],{}," 捕获器",[131,856,857,858,860],{},"对应的 ",[26,859,32],{}," 方法",[137,862,863,874,885,897,909,920,932,944],{},[128,864,865,869],{},[142,866,867],{},[26,868,330],{},[142,870,871],{},[26,872,873],{},"Reflect.get(target, prop, receiver)",[128,875,876,880],{},[142,877,878],{},[26,879,334],{},[142,881,882],{},[26,883,884],{},"Reflect.set(target, prop, value, receiver)",[128,886,887,892],{},[142,888,889],{},[26,890,891],{},"has",[142,893,894],{},[26,895,896],{},"Reflect.has(target, prop)",[128,898,899,904],{},[142,900,901],{},[26,902,903],{},"deleteProperty",[142,905,906],{},[26,907,908],{},"Reflect.deleteProperty(target, prop)",[128,910,911,915],{},[142,912,913],{},[26,914,218],{},[142,916,917],{},[26,918,919],{},"Reflect.apply(target, thisArg, argsList)",[128,921,922,927],{},[142,923,924],{},[26,925,926],{},"construct",[142,928,929],{},[26,930,931],{},"Reflect.construct(target, argsList, newTarget)",[128,933,934,939],{},[142,935,936],{},[26,937,938],{},"ownKeys",[142,940,941],{},[26,942,943],{},"Reflect.ownKeys(target)",[128,945,946,949],{},[142,947,948],{},"… 共 13 个方法",[142,950,951,952,954],{},"与 ",[26,953,28],{}," 捕获器完全对应",[45,956,958],{"id":957},"_2-与-proxy-协同保持默认行为","2. 与 Proxy 协同：保持默认行为",[23,960,961,962,964,965,967],{},"在 ",[26,963,28],{}," 的捕获器中，通常需要调用 ",[26,966,32],{}," 的方法来完成默认操作，同时可以添加额外逻辑。",[50,969,971],{"className":52,"code":970,"language":54,"meta":55,"style":55},"const proxy = new Proxy(target, {\n    set(target, prop, value, receiver) {\n        \u002F\u002F 自定义验证\n        if (prop === \"age\" && (value \u003C 0 || value > 150)) {\n            throw new Error(\"Invalid age\");\n        }\n        \u002F\u002F 调用 Reflect 执行默认赋值\n        return Reflect.set(target, prop, value, receiver);\n    },\n});\n",[26,972,973,991,1015,1020,1070,1093,1098,1103,1134,1138],{"__ignoreMap":55},[59,974,975,977,979,981,983,985,987,989],{"class":61,"line":62},[59,976,66],{"class":65},[59,978,70],{"class":69},[59,980,74],{"class":73},[59,982,77],{"class":73},[59,984,81],{"class":80},[59,986,85],{"class":84},[59,988,89],{"class":88},[59,990,405],{"class":88},[59,992,993,995,997,999,1001,1003,1005,1007,1009,1011,1013],{"class":61,"line":387},[59,994,525],{"class":411},[59,996,415],{"class":88},[59,998,104],{"class":418},[59,1000,89],{"class":88},[59,1002,423],{"class":418},[59,1004,89],{"class":88},[59,1006,538],{"class":418},[59,1008,89],{"class":88},[59,1010,428],{"class":418},[59,1012,431],{"class":88},[59,1014,405],{"class":88},[59,1016,1017],{"class":61,"line":408},[59,1018,1019],{"class":623},"        \u002F\u002F 自定义验证\n",[59,1021,1022,1025,1028,1030,1033,1035,1038,1040,1043,1045,1047,1050,1053,1056,1058,1061,1064,1067],{"class":61,"line":436},[59,1023,1024],{"class":480},"        if",[59,1026,1027],{"class":355}," (",[59,1029,465],{"class":84},[59,1031,1032],{"class":73}," ===",[59,1034,363],{"class":362},[59,1036,1037],{"class":366},"age",[59,1039,370],{"class":362},[59,1041,1042],{"class":73}," &&",[59,1044,1027],{"class":355},[59,1046,583],{"class":84},[59,1048,1049],{"class":73}," \u003C",[59,1051,1052],{"class":380}," 0",[59,1054,1055],{"class":73}," ||",[59,1057,538],{"class":84},[59,1059,1060],{"class":73}," >",[59,1062,1063],{"class":380}," 150",[59,1065,1066],{"class":355},")) ",[59,1068,1069],{"class":88},"{\n",[59,1071,1072,1075,1077,1080,1082,1084,1087,1089,1091],{"class":61,"line":477},[59,1073,1074],{"class":480},"            throw",[59,1076,77],{"class":73},[59,1078,1079],{"class":80}," Error",[59,1081,415],{"class":355},[59,1083,370],{"class":362},[59,1085,1086],{"class":366},"Invalid age",[59,1088,370],{"class":362},[59,1090,431],{"class":355},[59,1092,95],{"class":88},[59,1094,1095],{"class":61,"line":516},[59,1096,1097],{"class":88},"        }\n",[59,1099,1100],{"class":61,"line":522},[59,1101,1102],{"class":623},"        \u002F\u002F 调用 Reflect 执行默认赋值\n",[59,1104,1105,1107,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128,1130,1132],{"class":61,"line":549},[59,1106,481],{"class":480},[59,1108,1109],{"class":84}," Reflect",[59,1111,442],{"class":88},[59,1113,334],{"class":80},[59,1115,415],{"class":355},[59,1117,104],{"class":84},[59,1119,89],{"class":88},[59,1121,423],{"class":84},[59,1123,89],{"class":88},[59,1125,538],{"class":84},[59,1127,89],{"class":88},[59,1129,428],{"class":84},[59,1131,431],{"class":355},[59,1133,95],{"class":88},[59,1135,1136],{"class":61,"line":592},[59,1137,519],{"class":88},[59,1139,1140,1142,1144],{"class":61,"line":611},[59,1141,575],{"class":88},[59,1143,431],{"class":84},[59,1145,95],{"class":88},[45,1147,1149],{"id":1148},"_3-替代-object-部分方法的现代-api","3. 替代 Object 部分方法的现代 API",[23,1151,1152,1154,1155,1158,1159,153,1162,1165],{},[26,1153,32],{}," 的方法相比于 ",[26,1156,1157],{},"Object"," 同名方法（如 ",[26,1160,1161],{},"defineProperty",[26,1163,1164],{},"getPrototypeOf","）有以下优势：",[97,1167,1168,1185,1202],{},[100,1169,1170,1173,1174,1177,1178,1181,1182,1184],{},[113,1171,1172],{},"返回布尔值","而不是抛出异常（例如 ",[26,1175,1176],{},"Reflect.defineProperty"," 返回 ",[26,1179,1180],{},"true\u002Ffalse","，而 ",[26,1183,269],{}," 失败时抛错）。",[100,1186,1187,1190,1191,1194,1195,1198,1199,717],{},[113,1188,1189],{},"更合理的 this 绑定","：",[26,1192,1193],{},"Reflect.get"," 可以传入 ",[26,1196,1197],{},"receiver"," 来正确绑定 getter 中的 ",[26,1200,1201],{},"this",[100,1203,1204,1209],{},[113,1205,951,1206,1208],{},[26,1207,28],{}," 保持一致","，更符合函数式风格。",[50,1211,1213],{"className":52,"code":1212,"language":54,"meta":55,"style":55},"\u002F\u002F 旧方式（容易抛异常）\ntry {\n    Object.defineProperty(obj, \"prop\", { value: 1 });\n} catch (e) {}\n\n\u002F\u002F 新方式（返回值更可控）\nif (Reflect.defineProperty(obj, \"prop\", { value: 1 })) {\n    \u002F\u002F 成功\n} else {\n    \u002F\u002F 失败\n}\n",[26,1214,1215,1220,1227,1266,1279,1285,1290,1329,1334,1343,1348],{"__ignoreMap":55},[59,1216,1217],{"class":61,"line":62},[59,1218,1219],{"class":623},"\u002F\u002F 旧方式（容易抛异常）\n",[59,1221,1222,1225],{"class":61,"line":387},[59,1223,1224],{"class":480},"try",[59,1226,405],{"class":88},[59,1228,1229,1232,1234,1236,1238,1241,1243,1245,1247,1249,1251,1253,1255,1257,1260,1262,1264],{"class":61,"line":408},[59,1230,1231],{"class":84},"    Object",[59,1233,442],{"class":88},[59,1235,1161],{"class":80},[59,1237,415],{"class":355},[59,1239,1240],{"class":84},"obj",[59,1242,89],{"class":88},[59,1244,363],{"class":362},[59,1246,465],{"class":366},[59,1248,370],{"class":362},[59,1250,89],{"class":88},[59,1252,352],{"class":88},[59,1254,538],{"class":355},[59,1256,359],{"class":88},[59,1258,1259],{"class":380}," 1",[59,1261,762],{"class":88},[59,1263,431],{"class":355},[59,1265,95],{"class":88},[59,1267,1268,1270,1273,1276],{"class":61,"line":436},[59,1269,575],{"class":88},[59,1271,1272],{"class":480}," catch",[59,1274,1275],{"class":84}," (e) ",[59,1277,1278],{"class":88},"{}\n",[59,1280,1281],{"class":61,"line":477},[59,1282,1284],{"emptyLinePlaceholder":1283},true,"\n",[59,1286,1287],{"class":61,"line":516},[59,1288,1289],{"class":623},"\u002F\u002F 新方式（返回值更可控）\n",[59,1291,1292,1295,1298,1300,1302,1305,1307,1309,1311,1313,1315,1317,1319,1321,1323,1325,1327],{"class":61,"line":522},[59,1293,1294],{"class":480},"if",[59,1296,1297],{"class":84}," (Reflect",[59,1299,442],{"class":88},[59,1301,1161],{"class":80},[59,1303,1304],{"class":84},"(obj",[59,1306,89],{"class":88},[59,1308,363],{"class":362},[59,1310,465],{"class":366},[59,1312,370],{"class":362},[59,1314,89],{"class":88},[59,1316,352],{"class":88},[59,1318,538],{"class":355},[59,1320,359],{"class":88},[59,1322,1259],{"class":380},[59,1324,762],{"class":88},[59,1326,1066],{"class":84},[59,1328,1069],{"class":88},[59,1330,1331],{"class":61,"line":549},[59,1332,1333],{"class":623},"    \u002F\u002F 成功\n",[59,1335,1336,1338,1341],{"class":61,"line":592},[59,1337,575],{"class":88},[59,1339,1340],{"class":480}," else",[59,1342,405],{"class":88},[59,1344,1345],{"class":61,"line":611},[59,1346,1347],{"class":623},"    \u002F\u002F 失败\n",[59,1349,1350],{"class":61,"line":627},[59,1351,1352],{"class":88},"}\n",[35,1354,1356],{"id":1355},"三应用场景","三、应用场景",[45,1358,1360],{"id":1359},"_1-属性验证数据校验","1. 属性验证（数据校验）",[23,1362,961,1363,1365],{},[26,1364,334],{}," 捕获器中对赋值进行校验。",[50,1367,1369],{"className":52,"code":1368,"language":54,"meta":55,"style":55},"const user = {};\nconst validatedUser = new Proxy(user, {\n    set(target, prop, value) {\n        if (prop === \"age\" && (typeof value !== \"number\" || value \u003C 0)) {\n            throw new TypeError(\"Age must be a positive number\");\n        }\n        target[prop] = value;\n        return true;\n    },\n});\nvalidatedUser.age = 25; \u002F\u002F OK\n\u002F\u002F validatedUser.age = -5; \u002F\u002F Error\n",[26,1370,1371,1382,1401,1421,1468,1490,1494,1510,1518,1522,1530,1549],{"__ignoreMap":55},[59,1372,1373,1375,1377,1379],{"class":61,"line":62},[59,1374,66],{"class":65},[59,1376,347],{"class":69},[59,1378,74],{"class":73},[59,1380,1381],{"class":88}," {};\n",[59,1383,1384,1386,1389,1391,1393,1395,1397,1399],{"class":61,"line":387},[59,1385,66],{"class":65},[59,1387,1388],{"class":69}," validatedUser",[59,1390,74],{"class":73},[59,1392,77],{"class":73},[59,1394,81],{"class":80},[59,1396,400],{"class":84},[59,1398,89],{"class":88},[59,1400,405],{"class":88},[59,1402,1403,1405,1407,1409,1411,1413,1415,1417,1419],{"class":61,"line":408},[59,1404,525],{"class":411},[59,1406,415],{"class":88},[59,1408,104],{"class":418},[59,1410,89],{"class":88},[59,1412,423],{"class":418},[59,1414,89],{"class":88},[59,1416,538],{"class":418},[59,1418,431],{"class":88},[59,1420,405],{"class":88},[59,1422,1423,1425,1427,1429,1431,1433,1435,1437,1439,1441,1444,1446,1449,1451,1454,1456,1458,1460,1462,1464,1466],{"class":61,"line":436},[59,1424,1024],{"class":480},[59,1426,1027],{"class":355},[59,1428,465],{"class":84},[59,1430,1032],{"class":73},[59,1432,363],{"class":362},[59,1434,1037],{"class":366},[59,1436,370],{"class":362},[59,1438,1042],{"class":73},[59,1440,1027],{"class":355},[59,1442,1443],{"class":73},"typeof",[59,1445,538],{"class":84},[59,1447,1448],{"class":73}," !==",[59,1450,363],{"class":362},[59,1452,1453],{"class":366},"number",[59,1455,370],{"class":362},[59,1457,1055],{"class":73},[59,1459,538],{"class":84},[59,1461,1049],{"class":73},[59,1463,1052],{"class":380},[59,1465,1066],{"class":355},[59,1467,1069],{"class":88},[59,1469,1470,1472,1474,1477,1479,1481,1484,1486,1488],{"class":61,"line":477},[59,1471,1074],{"class":480},[59,1473,77],{"class":73},[59,1475,1476],{"class":80}," TypeError",[59,1478,415],{"class":355},[59,1480,370],{"class":362},[59,1482,1483],{"class":366},"Age must be a positive number",[59,1485,370],{"class":362},[59,1487,431],{"class":355},[59,1489,95],{"class":88},[59,1491,1492],{"class":61,"line":516},[59,1493,1097],{"class":88},[59,1495,1496,1498,1500,1502,1504,1506,1508],{"class":61,"line":522},[59,1497,595],{"class":84},[59,1499,497],{"class":355},[59,1501,465],{"class":84},[59,1503,502],{"class":355},[59,1505,604],{"class":73},[59,1507,538],{"class":84},[59,1509,95],{"class":88},[59,1511,1512,1514,1516],{"class":61,"line":549},[59,1513,481],{"class":480},[59,1515,617],{"class":616},[59,1517,95],{"class":88},[59,1519,1520],{"class":61,"line":592},[59,1521,519],{"class":88},[59,1523,1524,1526,1528],{"class":61,"line":611},[59,1525,575],{"class":88},[59,1527,431],{"class":84},[59,1529,95],{"class":88},[59,1531,1532,1535,1537,1539,1541,1544,1546],{"class":61,"line":627},[59,1533,1534],{"class":84},"validatedUser",[59,1536,442],{"class":88},[59,1538,671],{"class":84},[59,1540,604],{"class":73},[59,1542,1543],{"class":380}," 25",[59,1545,620],{"class":88},[59,1547,1548],{"class":623}," \u002F\u002F OK\n",[59,1550,1551,1554],{"class":61,"line":632},[59,1552,1553],{"class":623},"\u002F\u002F validatedUser.age = -5;",[59,1555,1556],{"class":623}," \u002F\u002F Error\n",[45,1558,1560],{"id":1559},"_2-数据绑定与响应式系统vue-3-核心原理","2. 数据绑定与响应式系统（Vue 3 核心原理）",[23,1562,1563,1564,1566],{},"Vue 3 的响应式基于 ",[26,1565,28],{},"，能够拦截对对象的所有访问和修改，并触发依赖更新。",[50,1568,1570],{"className":52,"code":1569,"language":54,"meta":55,"style":55},"function reactive(target) {\n    const handler = {\n        get(target, key, receiver) {\n            const result = Reflect.get(target, key, receiver);\n            \u002F\u002F 收集依赖（track）\n            console.log(`GET ${String(key)}`, result);\n            return typeof result === \"object\" ? reactive(result) : result;\n        },\n        set(target, key, value, receiver) {\n            const oldValue = target[key];\n            const result = Reflect.set(target, key, value, receiver);\n            \u002F\u002F 触发更新（trigger）\n            if (oldValue !== value) {\n                console.log(`SET ${String(key)}: ${oldValue} -> ${value}`);\n            }\n            return result;\n        },\n    };\n    return new Proxy(target, handler);\n}\n\nconst state = reactive({ count: 0 });\nstate.count++; \u002F\u002F GET count → SET count: 0 -> 1\n",[26,1571,1572,1588,1600,1622,1654,1659,1695,1732,1737,1762,1782,1816,1821,1839,1888,1893,1902,1907,1913,1935,1940,1945,1975],{"__ignoreMap":55},[59,1573,1574,1577,1580,1582,1584,1586],{"class":61,"line":62},[59,1575,1576],{"class":65},"function",[59,1578,1579],{"class":80}," reactive",[59,1581,415],{"class":88},[59,1583,104],{"class":418},[59,1585,431],{"class":88},[59,1587,405],{"class":88},[59,1589,1590,1593,1596,1598],{"class":61,"line":387},[59,1591,1592],{"class":65},"    const",[59,1594,1595],{"class":69}," handler",[59,1597,74],{"class":73},[59,1599,405],{"class":88},[59,1601,1602,1605,1607,1609,1611,1614,1616,1618,1620],{"class":61,"line":408},[59,1603,1604],{"class":411},"        get",[59,1606,415],{"class":88},[59,1608,104],{"class":418},[59,1610,89],{"class":88},[59,1612,1613],{"class":418}," key",[59,1615,89],{"class":88},[59,1617,428],{"class":418},[59,1619,431],{"class":88},[59,1621,405],{"class":88},[59,1623,1624,1627,1630,1632,1634,1636,1638,1640,1642,1644,1646,1648,1650,1652],{"class":61,"line":436},[59,1625,1626],{"class":65},"            const",[59,1628,1629],{"class":69}," result",[59,1631,74],{"class":73},[59,1633,1109],{"class":84},[59,1635,442],{"class":88},[59,1637,330],{"class":80},[59,1639,415],{"class":355},[59,1641,104],{"class":84},[59,1643,89],{"class":88},[59,1645,1613],{"class":84},[59,1647,89],{"class":88},[59,1649,428],{"class":84},[59,1651,431],{"class":355},[59,1653,95],{"class":88},[59,1655,1656],{"class":61,"line":477},[59,1657,1658],{"class":623},"            \u002F\u002F 收集依赖（track）\n",[59,1660,1661,1664,1666,1668,1670,1672,1674,1676,1678,1680,1683,1685,1687,1689,1691,1693],{"class":61,"line":516},[59,1662,1663],{"class":84},"            console",[59,1665,442],{"class":88},[59,1667,445],{"class":80},[59,1669,415],{"class":355},[59,1671,450],{"class":362},[59,1673,453],{"class":366},[59,1675,456],{"class":362},[59,1677,459],{"class":80},[59,1679,415],{"class":462},[59,1681,1682],{"class":84},"key",[59,1684,431],{"class":462},[59,1686,470],{"class":362},[59,1688,89],{"class":88},[59,1690,1629],{"class":84},[59,1692,431],{"class":355},[59,1694,95],{"class":88},[59,1696,1697,1700,1703,1705,1707,1709,1712,1714,1716,1718,1720,1723,1726,1728,1730],{"class":61,"line":522},[59,1698,1699],{"class":480},"            return",[59,1701,1702],{"class":73}," typeof",[59,1704,1629],{"class":84},[59,1706,1032],{"class":73},[59,1708,363],{"class":362},[59,1710,1711],{"class":366},"object",[59,1713,370],{"class":362},[59,1715,492],{"class":73},[59,1717,1579],{"class":80},[59,1719,415],{"class":355},[59,1721,1722],{"class":84},"result",[59,1724,1725],{"class":355},") ",[59,1727,359],{"class":73},[59,1729,1629],{"class":84},[59,1731,95],{"class":88},[59,1733,1734],{"class":61,"line":549},[59,1735,1736],{"class":88},"        },\n",[59,1738,1739,1742,1744,1746,1748,1750,1752,1754,1756,1758,1760],{"class":61,"line":592},[59,1740,1741],{"class":411},"        set",[59,1743,415],{"class":88},[59,1745,104],{"class":418},[59,1747,89],{"class":88},[59,1749,1613],{"class":418},[59,1751,89],{"class":88},[59,1753,538],{"class":418},[59,1755,89],{"class":88},[59,1757,428],{"class":418},[59,1759,431],{"class":88},[59,1761,405],{"class":88},[59,1763,1764,1766,1769,1771,1773,1775,1777,1780],{"class":61,"line":611},[59,1765,1626],{"class":65},[59,1767,1768],{"class":69}," oldValue",[59,1770,74],{"class":73},[59,1772,489],{"class":84},[59,1774,497],{"class":355},[59,1776,1682],{"class":84},[59,1778,1779],{"class":355},"]",[59,1781,95],{"class":88},[59,1783,1784,1786,1788,1790,1792,1794,1796,1798,1800,1802,1804,1806,1808,1810,1812,1814],{"class":61,"line":627},[59,1785,1626],{"class":65},[59,1787,1629],{"class":69},[59,1789,74],{"class":73},[59,1791,1109],{"class":84},[59,1793,442],{"class":88},[59,1795,334],{"class":80},[59,1797,415],{"class":355},[59,1799,104],{"class":84},[59,1801,89],{"class":88},[59,1803,1613],{"class":84},[59,1805,89],{"class":88},[59,1807,538],{"class":84},[59,1809,89],{"class":88},[59,1811,428],{"class":84},[59,1813,431],{"class":355},[59,1815,95],{"class":88},[59,1817,1818],{"class":61,"line":632},[59,1819,1820],{"class":623},"            \u002F\u002F 触发更新（trigger）\n",[59,1822,1823,1826,1828,1831,1833,1835,1837],{"class":61,"line":641},[59,1824,1825],{"class":480},"            if",[59,1827,1027],{"class":355},[59,1829,1830],{"class":84},"oldValue",[59,1832,1448],{"class":73},[59,1834,538],{"class":84},[59,1836,1725],{"class":355},[59,1838,1069],{"class":88},[59,1840,1841,1844,1846,1848,1850,1852,1854,1856,1858,1860,1862,1864,1866,1869,1871,1873,1875,1878,1880,1882,1884,1886],{"class":61,"line":664},[59,1842,1843],{"class":84},"                console",[59,1845,442],{"class":88},[59,1847,445],{"class":80},[59,1849,415],{"class":355},[59,1851,450],{"class":362},[59,1853,562],{"class":366},[59,1855,456],{"class":362},[59,1857,459],{"class":80},[59,1859,415],{"class":462},[59,1861,1682],{"class":84},[59,1863,431],{"class":462},[59,1865,575],{"class":362},[59,1867,1868],{"class":366},": ",[59,1870,456],{"class":362},[59,1872,1830],{"class":84},[59,1874,575],{"class":362},[59,1876,1877],{"class":366}," -> ",[59,1879,456],{"class":362},[59,1881,583],{"class":84},[59,1883,470],{"class":362},[59,1885,431],{"class":355},[59,1887,95],{"class":88},[59,1889,1890],{"class":61,"line":684},[59,1891,1892],{"class":88},"            }\n",[59,1894,1896,1898,1900],{"class":61,"line":1895},16,[59,1897,1699],{"class":480},[59,1899,1629],{"class":84},[59,1901,95],{"class":88},[59,1903,1905],{"class":61,"line":1904},17,[59,1906,1736],{"class":88},[59,1908,1910],{"class":61,"line":1909},18,[59,1911,1912],{"class":88},"    };\n",[59,1914,1916,1919,1921,1923,1925,1927,1929,1931,1933],{"class":61,"line":1915},19,[59,1917,1918],{"class":480},"    return",[59,1920,77],{"class":73},[59,1922,81],{"class":80},[59,1924,415],{"class":355},[59,1926,104],{"class":84},[59,1928,89],{"class":88},[59,1930,1595],{"class":84},[59,1932,431],{"class":355},[59,1934,95],{"class":88},[59,1936,1938],{"class":61,"line":1937},20,[59,1939,1352],{"class":88},[59,1941,1943],{"class":61,"line":1942},21,[59,1944,1284],{"emptyLinePlaceholder":1283},[59,1946,1948,1950,1953,1955,1957,1959,1962,1965,1967,1969,1971,1973],{"class":61,"line":1947},22,[59,1949,66],{"class":65},[59,1951,1952],{"class":69}," state",[59,1954,74],{"class":73},[59,1956,1579],{"class":80},[59,1958,415],{"class":84},[59,1960,1961],{"class":88},"{",[59,1963,1964],{"class":355}," count",[59,1966,359],{"class":88},[59,1968,1052],{"class":380},[59,1970,762],{"class":88},[59,1972,431],{"class":84},[59,1974,95],{"class":88},[59,1976,1978,1981,1983,1986,1989,1991],{"class":61,"line":1977},23,[59,1979,1980],{"class":84},"state",[59,1982,442],{"class":88},[59,1984,1985],{"class":84},"count",[59,1987,1988],{"class":73},"++",[59,1990,620],{"class":88},[59,1992,1993],{"class":623}," \u002F\u002F GET count → SET count: 0 -> 1\n",[45,1995,1997],{"id":1996},"_3-日志记录与性能测试","3. 日志记录与性能测试",[23,1999,2000],{},"记录属性访问、函数调用耗时等。",[50,2002,2004],{"className":52,"code":2003,"language":54,"meta":55,"style":55},"function performanceMonitor(fn) {\n    return new Proxy(fn, {\n        apply(target, thisArg, args) {\n            console.time(\"fn\");\n            const result = Reflect.apply(target, thisArg, args);\n            console.timeEnd(\"fn\");\n            return result;\n        },\n    });\n}\nconst slowFunc = n => {\n    let sum = 0;\n    for (let i = 0; i \u003C n; i++) sum += i;\n    return sum;\n};\nconst monitored = performanceMonitor(slowFunc);\nmonitored(1e7); \u002F\u002F 输出执行时间\n",[26,2005,2006,2022,2038,2061,2082,2112,2133,2141,2145,2154,2158,2176,2190,2233,2241,2246,2262],{"__ignoreMap":55},[59,2007,2008,2010,2013,2015,2018,2020],{"class":61,"line":62},[59,2009,1576],{"class":65},[59,2011,2012],{"class":80}," performanceMonitor",[59,2014,415],{"class":88},[59,2016,2017],{"class":418},"fn",[59,2019,431],{"class":88},[59,2021,405],{"class":88},[59,2023,2024,2026,2028,2030,2032,2034,2036],{"class":61,"line":387},[59,2025,1918],{"class":480},[59,2027,77],{"class":73},[59,2029,81],{"class":80},[59,2031,415],{"class":355},[59,2033,2017],{"class":84},[59,2035,89],{"class":88},[59,2037,405],{"class":88},[59,2039,2040,2043,2045,2047,2049,2052,2054,2057,2059],{"class":61,"line":408},[59,2041,2042],{"class":411},"        apply",[59,2044,415],{"class":88},[59,2046,104],{"class":418},[59,2048,89],{"class":88},[59,2050,2051],{"class":418}," thisArg",[59,2053,89],{"class":88},[59,2055,2056],{"class":418}," args",[59,2058,431],{"class":88},[59,2060,405],{"class":88},[59,2062,2063,2065,2067,2070,2072,2074,2076,2078,2080],{"class":61,"line":436},[59,2064,1663],{"class":84},[59,2066,442],{"class":88},[59,2068,2069],{"class":80},"time",[59,2071,415],{"class":355},[59,2073,370],{"class":362},[59,2075,2017],{"class":366},[59,2077,370],{"class":362},[59,2079,431],{"class":355},[59,2081,95],{"class":88},[59,2083,2084,2086,2088,2090,2092,2094,2096,2098,2100,2102,2104,2106,2108,2110],{"class":61,"line":477},[59,2085,1626],{"class":65},[59,2087,1629],{"class":69},[59,2089,74],{"class":73},[59,2091,1109],{"class":84},[59,2093,442],{"class":88},[59,2095,218],{"class":80},[59,2097,415],{"class":355},[59,2099,104],{"class":84},[59,2101,89],{"class":88},[59,2103,2051],{"class":84},[59,2105,89],{"class":88},[59,2107,2056],{"class":84},[59,2109,431],{"class":355},[59,2111,95],{"class":88},[59,2113,2114,2116,2118,2121,2123,2125,2127,2129,2131],{"class":61,"line":516},[59,2115,1663],{"class":84},[59,2117,442],{"class":88},[59,2119,2120],{"class":80},"timeEnd",[59,2122,415],{"class":355},[59,2124,370],{"class":362},[59,2126,2017],{"class":366},[59,2128,370],{"class":362},[59,2130,431],{"class":355},[59,2132,95],{"class":88},[59,2134,2135,2137,2139],{"class":61,"line":522},[59,2136,1699],{"class":480},[59,2138,1629],{"class":84},[59,2140,95],{"class":88},[59,2142,2143],{"class":61,"line":549},[59,2144,1736],{"class":88},[59,2146,2147,2150,2152],{"class":61,"line":592},[59,2148,2149],{"class":88},"    }",[59,2151,431],{"class":355},[59,2153,95],{"class":88},[59,2155,2156],{"class":61,"line":611},[59,2157,1352],{"class":88},[59,2159,2160,2162,2166,2168,2171,2174],{"class":61,"line":627},[59,2161,66],{"class":65},[59,2163,2165],{"class":2164},"sfCm-"," slowFunc",[59,2167,74],{"class":73},[59,2169,2170],{"class":418}," n",[59,2172,2173],{"class":65}," =>",[59,2175,405],{"class":88},[59,2177,2178,2181,2184,2186,2188],{"class":61,"line":632},[59,2179,2180],{"class":65},"    let",[59,2182,2183],{"class":84}," sum",[59,2185,74],{"class":73},[59,2187,1052],{"class":380},[59,2189,95],{"class":88},[59,2191,2192,2195,2197,2200,2203,2205,2207,2209,2211,2213,2215,2217,2219,2221,2223,2226,2229,2231],{"class":61,"line":641},[59,2193,2194],{"class":480},"    for",[59,2196,1027],{"class":355},[59,2198,2199],{"class":65},"let",[59,2201,2202],{"class":84}," i",[59,2204,74],{"class":73},[59,2206,1052],{"class":380},[59,2208,620],{"class":88},[59,2210,2202],{"class":84},[59,2212,1049],{"class":73},[59,2214,2170],{"class":84},[59,2216,620],{"class":88},[59,2218,2202],{"class":84},[59,2220,1988],{"class":73},[59,2222,1725],{"class":355},[59,2224,2225],{"class":84},"sum",[59,2227,2228],{"class":73}," +=",[59,2230,2202],{"class":84},[59,2232,95],{"class":88},[59,2234,2235,2237,2239],{"class":61,"line":664},[59,2236,1918],{"class":480},[59,2238,2183],{"class":84},[59,2240,95],{"class":88},[59,2242,2243],{"class":61,"line":684},[59,2244,2245],{"class":88},"};\n",[59,2247,2248,2250,2253,2255,2257,2260],{"class":61,"line":1895},[59,2249,66],{"class":65},[59,2251,2252],{"class":69}," monitored",[59,2254,74],{"class":73},[59,2256,2012],{"class":80},[59,2258,2259],{"class":84},"(slowFunc)",[59,2261,95],{"class":88},[59,2263,2264,2267,2269,2272,2274,2276],{"class":61,"line":1904},[59,2265,2266],{"class":80},"monitored",[59,2268,415],{"class":84},[59,2270,2271],{"class":380},"1e7",[59,2273,431],{"class":84},[59,2275,620],{"class":88},[59,2277,2278],{"class":623}," \u002F\u002F 输出执行时间\n",[45,2280,2282],{"id":2281},"_4-隐藏私有属性模拟私有字段","4. 隐藏私有属性（模拟私有字段）",[23,2284,2285,2286,331,2288,2290,2291,2294],{},"拦截 ",[26,2287,330],{},[26,2289,891],{},"，阻止以 ",[26,2292,2293],{},"_"," 开头的属性被外部访问。",[50,2296,2298],{"className":52,"code":2297,"language":54,"meta":55,"style":55},"const privateProxy = obj =>\n    new Proxy(obj, {\n        get(target, prop) {\n            if (prop.startsWith(\"_\")) {\n                throw new Error(\"Private property\");\n            }\n            return Reflect.get(target, prop);\n        },\n        has(target, prop) {\n            if (prop.startsWith(\"_\")) return false;\n            return Reflect.has(target, prop);\n        },\n    });\nconst data = { _secret: 123, public: 456 };\nconst pData = privateProxy(data);\nconsole.log(pData.public); \u002F\u002F 456\n\u002F\u002F console.log(pData._secret); \u002F\u002F Error\n",[26,2299,2300,2315,2328,2344,2369,2391,2395,2417,2421,2438,2468,2490,2494,2502,2533,2549,2570],{"__ignoreMap":55},[59,2301,2302,2304,2307,2309,2312],{"class":61,"line":62},[59,2303,66],{"class":65},[59,2305,2306],{"class":2164}," privateProxy",[59,2308,74],{"class":73},[59,2310,2311],{"class":418}," obj",[59,2313,2314],{"class":65}," =>\n",[59,2316,2317,2320,2322,2324,2326],{"class":61,"line":387},[59,2318,2319],{"class":73},"    new",[59,2321,81],{"class":80},[59,2323,1304],{"class":84},[59,2325,89],{"class":88},[59,2327,405],{"class":88},[59,2329,2330,2332,2334,2336,2338,2340,2342],{"class":61,"line":408},[59,2331,1604],{"class":411},[59,2333,415],{"class":88},[59,2335,104],{"class":418},[59,2337,89],{"class":88},[59,2339,423],{"class":418},[59,2341,431],{"class":88},[59,2343,405],{"class":88},[59,2345,2346,2348,2350,2352,2354,2357,2359,2361,2363,2365,2367],{"class":61,"line":436},[59,2347,1825],{"class":480},[59,2349,1027],{"class":355},[59,2351,465],{"class":84},[59,2353,442],{"class":88},[59,2355,2356],{"class":80},"startsWith",[59,2358,415],{"class":355},[59,2360,370],{"class":362},[59,2362,2293],{"class":366},[59,2364,370],{"class":362},[59,2366,1066],{"class":355},[59,2368,1069],{"class":88},[59,2370,2371,2374,2376,2378,2380,2382,2385,2387,2389],{"class":61,"line":477},[59,2372,2373],{"class":480},"                throw",[59,2375,77],{"class":73},[59,2377,1079],{"class":80},[59,2379,415],{"class":355},[59,2381,370],{"class":362},[59,2383,2384],{"class":366},"Private property",[59,2386,370],{"class":362},[59,2388,431],{"class":355},[59,2390,95],{"class":88},[59,2392,2393],{"class":61,"line":516},[59,2394,1892],{"class":88},[59,2396,2397,2399,2401,2403,2405,2407,2409,2411,2413,2415],{"class":61,"line":522},[59,2398,1699],{"class":480},[59,2400,1109],{"class":84},[59,2402,442],{"class":88},[59,2404,330],{"class":80},[59,2406,415],{"class":355},[59,2408,104],{"class":84},[59,2410,89],{"class":88},[59,2412,423],{"class":84},[59,2414,431],{"class":355},[59,2416,95],{"class":88},[59,2418,2419],{"class":61,"line":549},[59,2420,1736],{"class":88},[59,2422,2423,2426,2428,2430,2432,2434,2436],{"class":61,"line":592},[59,2424,2425],{"class":411},"        has",[59,2427,415],{"class":88},[59,2429,104],{"class":418},[59,2431,89],{"class":88},[59,2433,423],{"class":418},[59,2435,431],{"class":88},[59,2437,405],{"class":88},[59,2439,2440,2442,2444,2446,2448,2450,2452,2454,2456,2458,2460,2463,2466],{"class":61,"line":611},[59,2441,1825],{"class":480},[59,2443,1027],{"class":355},[59,2445,465],{"class":84},[59,2447,442],{"class":88},[59,2449,2356],{"class":80},[59,2451,415],{"class":355},[59,2453,370],{"class":362},[59,2455,2293],{"class":366},[59,2457,370],{"class":362},[59,2459,1066],{"class":355},[59,2461,2462],{"class":480},"return",[59,2464,2465],{"class":616}," false",[59,2467,95],{"class":88},[59,2469,2470,2472,2474,2476,2478,2480,2482,2484,2486,2488],{"class":61,"line":627},[59,2471,1699],{"class":480},[59,2473,1109],{"class":84},[59,2475,442],{"class":88},[59,2477,891],{"class":80},[59,2479,415],{"class":355},[59,2481,104],{"class":84},[59,2483,89],{"class":88},[59,2485,423],{"class":84},[59,2487,431],{"class":355},[59,2489,95],{"class":88},[59,2491,2492],{"class":61,"line":632},[59,2493,1736],{"class":88},[59,2495,2496,2498,2500],{"class":61,"line":641},[59,2497,2149],{"class":88},[59,2499,431],{"class":84},[59,2501,95],{"class":88},[59,2503,2504,2506,2509,2511,2513,2516,2518,2521,2523,2526,2528,2531],{"class":61,"line":664},[59,2505,66],{"class":65},[59,2507,2508],{"class":69}," data",[59,2510,74],{"class":73},[59,2512,352],{"class":88},[59,2514,2515],{"class":355}," _secret",[59,2517,359],{"class":88},[59,2519,2520],{"class":380}," 123",[59,2522,89],{"class":88},[59,2524,2525],{"class":355}," public",[59,2527,359],{"class":88},[59,2529,2530],{"class":380}," 456",[59,2532,384],{"class":88},[59,2534,2535,2537,2540,2542,2544,2547],{"class":61,"line":684},[59,2536,66],{"class":65},[59,2538,2539],{"class":69}," pData",[59,2541,74],{"class":73},[59,2543,2306],{"class":80},[59,2545,2546],{"class":84},"(data)",[59,2548,95],{"class":88},[59,2550,2551,2553,2555,2557,2560,2562,2565,2567],{"class":61,"line":1895},[59,2552,644],{"class":84},[59,2554,442],{"class":88},[59,2556,445],{"class":80},[59,2558,2559],{"class":84},"(pData",[59,2561,442],{"class":88},[59,2563,2564],{"class":84},"public)",[59,2566,620],{"class":88},[59,2568,2569],{"class":623}," \u002F\u002F 456\n",[59,2571,2572,2575],{"class":61,"line":1904},[59,2573,2574],{"class":623},"\u002F\u002F console.log(pData._secret);",[59,2576,1556],{"class":623},[45,2578,2580],{"id":2579},"_5-默认属性值虚拟属性","5. 默认属性值（“虚拟”属性）",[23,2582,2285,2583,2585],{},[26,2584,330],{},"，当属性不存在时返回默认值，而不实际添加该属性。",[50,2587,2589],{"className":52,"code":2588,"language":54,"meta":55,"style":55},"const withDefault = (obj, defaultVal) =>\n    new Proxy(obj, {\n        get(target, prop) {\n            return prop in target ? target[prop] : defaultVal;\n        },\n    });\nconst person = { name: \"Bob\" };\nconst p = withDefault(person, \"unknown\");\nconsole.log(p.name); \u002F\u002F 'Bob'\nconsole.log(p.age); \u002F\u002F 'unknown'\n",[26,2590,2591,2613,2625,2641,2667,2671,2679,2703,2730,2750],{"__ignoreMap":55},[59,2592,2593,2595,2598,2600,2602,2604,2606,2609,2611],{"class":61,"line":62},[59,2594,66],{"class":65},[59,2596,2597],{"class":2164}," withDefault",[59,2599,74],{"class":73},[59,2601,1027],{"class":88},[59,2603,1240],{"class":418},[59,2605,89],{"class":88},[59,2607,2608],{"class":418}," defaultVal",[59,2610,431],{"class":88},[59,2612,2314],{"class":65},[59,2614,2615,2617,2619,2621,2623],{"class":61,"line":387},[59,2616,2319],{"class":73},[59,2618,81],{"class":80},[59,2620,1304],{"class":84},[59,2622,89],{"class":88},[59,2624,405],{"class":88},[59,2626,2627,2629,2631,2633,2635,2637,2639],{"class":61,"line":408},[59,2628,1604],{"class":411},[59,2630,415],{"class":88},[59,2632,104],{"class":418},[59,2634,89],{"class":88},[59,2636,423],{"class":418},[59,2638,431],{"class":88},[59,2640,405],{"class":88},[59,2642,2643,2645,2647,2649,2651,2653,2655,2657,2659,2661,2663,2665],{"class":61,"line":436},[59,2644,1699],{"class":480},[59,2646,423],{"class":84},[59,2648,486],{"class":73},[59,2650,489],{"class":84},[59,2652,492],{"class":73},[59,2654,489],{"class":84},[59,2656,497],{"class":355},[59,2658,465],{"class":84},[59,2660,502],{"class":355},[59,2662,359],{"class":73},[59,2664,2608],{"class":84},[59,2666,95],{"class":88},[59,2668,2669],{"class":61,"line":477},[59,2670,1736],{"class":88},[59,2672,2673,2675,2677],{"class":61,"line":516},[59,2674,2149],{"class":88},[59,2676,431],{"class":84},[59,2678,95],{"class":88},[59,2680,2681,2683,2686,2688,2690,2692,2694,2696,2699,2701],{"class":61,"line":522},[59,2682,66],{"class":65},[59,2684,2685],{"class":69}," person",[59,2687,74],{"class":73},[59,2689,352],{"class":88},[59,2691,356],{"class":355},[59,2693,359],{"class":88},[59,2695,363],{"class":362},[59,2697,2698],{"class":366},"Bob",[59,2700,370],{"class":362},[59,2702,384],{"class":88},[59,2704,2705,2707,2710,2712,2714,2717,2719,2721,2724,2726,2728],{"class":61,"line":549},[59,2706,66],{"class":65},[59,2708,2709],{"class":69}," p",[59,2711,74],{"class":73},[59,2713,2597],{"class":80},[59,2715,2716],{"class":84},"(person",[59,2718,89],{"class":88},[59,2720,363],{"class":362},[59,2722,2723],{"class":366},"unknown",[59,2725,370],{"class":362},[59,2727,431],{"class":84},[59,2729,95],{"class":88},[59,2731,2732,2734,2736,2738,2741,2743,2745,2747],{"class":61,"line":592},[59,2733,644],{"class":84},[59,2735,442],{"class":88},[59,2737,445],{"class":80},[59,2739,2740],{"class":84},"(p",[59,2742,442],{"class":88},[59,2744,656],{"class":84},[59,2746,620],{"class":88},[59,2748,2749],{"class":623}," \u002F\u002F 'Bob'\n",[59,2751,2752,2754,2756,2758,2760,2762,2765,2767],{"class":61,"line":611},[59,2753,644],{"class":84},[59,2755,442],{"class":88},[59,2757,445],{"class":80},[59,2759,2740],{"class":84},[59,2761,442],{"class":88},[59,2763,2764],{"class":84},"age)",[59,2766,620],{"class":88},[59,2768,2769],{"class":623}," \u002F\u002F 'unknown'\n",[45,2771,2773],{"id":2772},"_6-数组负索引支持语法糖","6. 数组负索引支持（语法糖）",[50,2775,2777],{"className":52,"code":2776,"language":54,"meta":55,"style":55},"const createArray = arr =>\n    new Proxy(arr, {\n        get(target, prop) {\n            const index = Number(prop);\n            if (!isNaN(index) && index \u003C 0) {\n                return target[target.length + index];\n            }\n            return Reflect.get(target, prop);\n        },\n    });\nconst arr = createArray([1, 2, 3, 4]);\nconsole.log(arr[-1]); \u002F\u002F 4\n",[26,2778,2779,2793,2806,2822,2842,2874,2899,2903,2925,2929,2937,2973],{"__ignoreMap":55},[59,2780,2781,2783,2786,2788,2791],{"class":61,"line":62},[59,2782,66],{"class":65},[59,2784,2785],{"class":2164}," createArray",[59,2787,74],{"class":73},[59,2789,2790],{"class":418}," arr",[59,2792,2314],{"class":65},[59,2794,2795,2797,2799,2802,2804],{"class":61,"line":387},[59,2796,2319],{"class":73},[59,2798,81],{"class":80},[59,2800,2801],{"class":84},"(arr",[59,2803,89],{"class":88},[59,2805,405],{"class":88},[59,2807,2808,2810,2812,2814,2816,2818,2820],{"class":61,"line":408},[59,2809,1604],{"class":411},[59,2811,415],{"class":88},[59,2813,104],{"class":418},[59,2815,89],{"class":88},[59,2817,423],{"class":418},[59,2819,431],{"class":88},[59,2821,405],{"class":88},[59,2823,2824,2826,2829,2831,2834,2836,2838,2840],{"class":61,"line":436},[59,2825,1626],{"class":65},[59,2827,2828],{"class":69}," index",[59,2830,74],{"class":73},[59,2832,2833],{"class":80}," Number",[59,2835,415],{"class":355},[59,2837,465],{"class":84},[59,2839,431],{"class":355},[59,2841,95],{"class":88},[59,2843,2844,2846,2848,2851,2854,2856,2859,2861,2864,2866,2868,2870,2872],{"class":61,"line":477},[59,2845,1825],{"class":480},[59,2847,1027],{"class":355},[59,2849,2850],{"class":73},"!",[59,2852,2853],{"class":80},"isNaN",[59,2855,415],{"class":355},[59,2857,2858],{"class":84},"index",[59,2860,1725],{"class":355},[59,2862,2863],{"class":73},"&&",[59,2865,2828],{"class":84},[59,2867,1049],{"class":73},[59,2869,1052],{"class":380},[59,2871,1725],{"class":355},[59,2873,1069],{"class":88},[59,2875,2876,2879,2881,2883,2885,2887,2890,2893,2895,2897],{"class":61,"line":516},[59,2877,2878],{"class":480},"                return",[59,2880,489],{"class":84},[59,2882,497],{"class":355},[59,2884,104],{"class":84},[59,2886,442],{"class":88},[59,2888,2889],{"class":69},"length",[59,2891,2892],{"class":73}," +",[59,2894,2828],{"class":84},[59,2896,1779],{"class":355},[59,2898,95],{"class":88},[59,2900,2901],{"class":61,"line":522},[59,2902,1892],{"class":88},[59,2904,2905,2907,2909,2911,2913,2915,2917,2919,2921,2923],{"class":61,"line":549},[59,2906,1699],{"class":480},[59,2908,1109],{"class":84},[59,2910,442],{"class":88},[59,2912,330],{"class":80},[59,2914,415],{"class":355},[59,2916,104],{"class":84},[59,2918,89],{"class":88},[59,2920,423],{"class":84},[59,2922,431],{"class":355},[59,2924,95],{"class":88},[59,2926,2927],{"class":61,"line":592},[59,2928,1736],{"class":88},[59,2930,2931,2933,2935],{"class":61,"line":611},[59,2932,2149],{"class":88},[59,2934,431],{"class":84},[59,2936,95],{"class":88},[59,2938,2939,2941,2943,2945,2947,2950,2953,2955,2958,2960,2963,2965,2968,2971],{"class":61,"line":627},[59,2940,66],{"class":65},[59,2942,2790],{"class":69},[59,2944,74],{"class":73},[59,2946,2785],{"class":80},[59,2948,2949],{"class":84},"([",[59,2951,2952],{"class":380},"1",[59,2954,89],{"class":88},[59,2956,2957],{"class":380}," 2",[59,2959,89],{"class":88},[59,2961,2962],{"class":380}," 3",[59,2964,89],{"class":88},[59,2966,2967],{"class":380}," 4",[59,2969,2970],{"class":84},"])",[59,2972,95],{"class":88},[59,2974,2975,2977,2979,2981,2984,2987,2989,2991,2993],{"class":61,"line":632},[59,2976,644],{"class":84},[59,2978,442],{"class":88},[59,2980,445],{"class":80},[59,2982,2983],{"class":84},"(arr[",[59,2985,2986],{"class":73},"-",[59,2988,2952],{"class":380},[59,2990,2970],{"class":84},[59,2992,620],{"class":88},[59,2994,2995],{"class":623}," \u002F\u002F 4\n",[35,2997,2998],{"id":2998},"总结",[122,3000,3001,3011],{},[125,3002,3003],{},[128,3004,3005,3008],{},[131,3006,3007],{},"概念",[131,3009,3010],{},"核心要点",[137,3012,3013,3026,3040],{},[128,3014,3015,3019],{},[142,3016,3017],{},[26,3018,28],{},[142,3020,3021,3022,3025],{},"拦截对象底层操作，提供 13 种捕获器；",[26,3023,3024],{},"Proxy.revocable"," 创建可撤销代理。",[128,3027,3028,3032],{},[142,3029,3030],{},[26,3031,32],{},[142,3033,951,3034,3036,3037,3039],{},[26,3035,28],{}," 一一对应的静态方法，用于实现默认行为；更安全、函数式的替代 ",[26,3038,1157],{}," 某些方法。",[128,3041,3042,3045],{},[142,3043,3044],{},"应用场景",[142,3046,3047],{},"数据校验、响应式系统（Vue 3）、日志\u002F性能、隐藏私有属性、默认值、数组负索引等。",[23,3049,3050,3052,3053,3055],{},[26,3051,28],{}," 配合 ",[26,3054,32],{}," 赋予了 JavaScript 强大的元编程能力，使得我们可以安全、灵活地控制对象行为，是现代框架和库的重要基础。",[35,3057,3058],{"id":3058},"参考文献",[23,3060,3061],{},"以下链接在编写时均可正常访问：",[122,3063,3064,3074],{},[125,3065,3066],{},[128,3067,3068,3071],{},[131,3069,3070],{},"资料",[131,3072,3073],{},"说明",[137,3075,3076,3090,3102],{},[128,3077,3078,3087],{},[142,3079,3080],{},[3081,3082,3086],"a",{"href":3083,"rel":3084},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FProxy",[3085],"nofollow","MDN：Proxy",[142,3088,3089],{},"代理",[128,3091,3092,3099],{},[142,3093,3094],{},[3081,3095,3098],{"href":3096,"rel":3097},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FReflect",[3085],"MDN：Reflect",[142,3100,3101],{},"反射 API",[128,3103,3104,3111],{},[142,3105,3106],{},[3081,3107,3110],{"href":3108,"rel":3109},"https:\u002F\u002Ftc39.es\u002Fecma262\u002F#sec-proxy-objects",[3085],"ECMA-262：Proxy Objects",[142,3112,3113],{},"规范（英文）",[3115,3116,3117],"style",{},"html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVXei, html code.shiki .sVXei{--shiki-light:#E53935;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s99_P, html code.shiki .s99_P{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html pre.shiki code .sfo-9, html code.shiki .sfo-9{--shiki-light:#90A4AE;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .syTEX, html code.shiki .syTEX{--shiki-light:#FF5370;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sfCm-, html code.shiki .sfCm-{--shiki-light:#90A4AE;--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":55,"searchDepth":387,"depth":387,"links":3119},[3120,3127,3132,3140,3141],{"id":37,"depth":387,"text":38,"children":3121},[3122,3123,3124,3126],{"id":47,"depth":408,"text":48},{"id":119,"depth":408,"text":120},{"id":326,"depth":408,"text":3125},"3. 示例：get 和 set 拦截",{"id":705,"depth":408,"text":706},{"id":823,"depth":387,"text":824,"children":3128},[3129,3130,3131],{"id":842,"depth":408,"text":843},{"id":957,"depth":408,"text":958},{"id":1148,"depth":408,"text":1149},{"id":1355,"depth":387,"text":1356,"children":3133},[3134,3135,3136,3137,3138,3139],{"id":1359,"depth":408,"text":1360},{"id":1559,"depth":408,"text":1560},{"id":1996,"depth":408,"text":1997},{"id":2281,"depth":408,"text":2282},{"id":2579,"depth":408,"text":2580},{"id":2772,"depth":408,"text":2773},{"id":2998,"depth":387,"text":2998},{"id":3058,"depth":387,"text":3058},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FJs\u002Fproxy","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FJs\u002Fproxy.md","md",{"items":3147},[3148,3152,3156,3160,3164,3168],{"path":3149,"title":3150,"description":3151,"category":10,"score":516},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Ferror","错误处理与调试","结构化错误类型、try\u002Fcatch 与全局未捕获处理是健壮应用的基础。",{"path":3153,"title":3154,"description":3155,"category":10,"score":516},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fdom-bom","浏览器相关 API","DOM 事件、存储、fetch、Worker、Observer 等由浏览器提供的 Web API（非 ECMAScript 核心）。HTML 结构见 标签。",{"path":3157,"title":3158,"description":3159,"category":10,"score":516},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fperformance","性能优化","防抖\u002F节流、渲染与内存、资源预加载及引擎行为是前端性能的主要抓手。相关 CSS 见 视觉效果、Head 资源提示。",{"path":3161,"title":3162,"description":3163,"category":10,"score":516},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fcommon","模块化与工程化","ESM、CommonJS 与打包工具（Tree Shaking、代码分割）是前端工程化的基础。入门见 JavaScript 基础 · 模块。",{"path":3165,"title":3166,"description":3167,"category":10,"score":516},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fscope","执行模型与作用域","执行上下文与词法作用域决定变量在何处可访问、闭包如何形成，以及 var \u002F let \u002F const 的差异。语言概览见 JavaScript 基础。",{"path":3169,"title":3170,"description":3171,"category":10,"score":516},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fmap-set","数据结构与集合增强","Map \u002F Set、WeakMap \u002F WeakSet、数组高阶方法、TypedArray 与 Symbol 等扩展了内置数据结构能力。见 语言基础。",{"series":3173,"title":54,"items":3174,"index":627,"prev":3216,"next":3217},"booklet\u002Fweb\u002Fjs",[3175,3179,3183,3185,3189,3191,3193,3197,3201,3203,3205,3209,3210,3214],{"path":3176,"title":3177,"date":3178,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fadvanced","函数进阶","2022-10-24",{"path":3180,"title":3181,"date":3182,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fbasics","JavaScript 基础","2023-11-24",{"path":3161,"title":3162,"date":3184,"pinned":15},"2025-06-21",{"path":3186,"title":3187,"date":3188,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fdesign","设计模式","2021-10-05",{"path":3153,"title":3154,"date":3190,"pinned":15},"2025-07-10",{"path":3149,"title":3150,"date":3192,"pinned":15},"2026-06-25",{"path":3194,"title":3195,"date":3196,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fevent-loop","异步编程与事件循环","2020-03-23",{"path":3198,"title":3199,"date":3200,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fexec","正则表达式","2022-05-21",{"path":3169,"title":3170,"date":3202,"pinned":15},"2024-07-10",{"path":3157,"title":3158,"date":3204,"pinned":15},"2025-07-04",{"path":3206,"title":3207,"date":3208,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fprototype","原型与面向对象","2020-04-13",{"path":7,"title":8,"date":14,"pinned":15},{"path":3211,"title":3212,"date":3213,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fsafe","安全","2023-06-26",{"path":3165,"title":3166,"date":3215,"pinned":15},"2025-01-29",{"path":3206,"title":3207,"date":3208,"pinned":15},{"path":3211,"title":3212,"date":3213,"pinned":15}]