[{"_1":2,"_1045":-5,"_1046":-5},"loaderData",{"_3":4,"_53":54},"root",{"_5":6},"clerkState",{"_7":8},"__internal_clerk_state",{"_9":10,"_25":26,"_27":28,"_29":28,"_30":24,"_31":28,"_32":28,"_33":28,"_34":28,"_35":28,"_36":28,"_37":28,"_38":28,"_39":40,"_49":28,"_50":28,"_51":24,"_52":24},"__clerk_ssr_state",{"_11":12,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":-5,"_20":-5,"_21":-5,"_22":-5,"_23":24},"tokenType","session_token","sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"__publishableKey","pk_live_Y2xlcmsucXVlc3Rpb25zLnZpc3VhbGl6ZWl0LmFwcCQ","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_41":24,"_23":24,"_42":28,"_43":44,"_45":28,"_46":26,"_47":24,"_48":28},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__clerkJSUrl","__clerkJSVersion","__telemetryDisabled","__telemetryDebug","routes/_index",{"_55":56,"_1040":1041},"questions",[57,196,225,271,300,331,355,385,409,433,458,489,518,546,571,596,625,649,674,699,724,748,772,803,828,853,878,903,934,959,984,1009],{"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_111":112,"_131":132,"_133":24,"_134":135,"_136":137,"_158":151,"_152":159,"_154":159,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":165,"_169":170,"_175":176,"_177":178,"_189":190,"_191":-5,"_192":-5,"_193":-5,"_194":195},"url","https://api.github.com/repos/pro-collection/interview-question/issues/388","repository_url","https://api.github.com/repos/pro-collection/interview-question","labels_url","https://api.github.com/repos/pro-collection/interview-question/issues/388/labels{/name}","comments_url","https://api.github.com/repos/pro-collection/interview-question/issues/388/comments","events_url","https://api.github.com/repos/pro-collection/interview-question/issues/388/events","html_url","https://github.com/pro-collection/interview-question/issues/388","id",1732517642,"node_id","I_kwDOJGDC6c5nRB8K","number",388,"title","哪些原因会导致js里this指向混乱?【热度: 1,282】","user",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"login","yanlele",22188674,"MDQ6VXNlcjIyMTg4Njc0","avatar_url","https://avatars.githubusercontent.com/u/22188674?v=4","gravatar_id","https://api.github.com/users/yanlele","https://github.com/yanlele","followers_url","https://api.github.com/users/yanlele/followers","following_url","https://api.github.com/users/yanlele/following{/other_user}","gists_url","https://api.github.com/users/yanlele/gists{/gist_id}","starred_url","https://api.github.com/users/yanlele/starred{/owner}{/repo}","subscriptions_url","https://api.github.com/users/yanlele/subscriptions","organizations_url","https://api.github.com/users/yanlele/orgs","repos_url","https://api.github.com/users/yanlele/repos","https://api.github.com/users/yanlele/events{/privacy}","received_events_url","https://api.github.com/users/yanlele/received_events","type","User","user_view_type","public","site_admin","labels",[113,124],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","name","JavaScript","color","A4D8FB","default","description","JavaScript 语法部分",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},5326133419,"LA_kwDOJGDC6c8AAAABPXZYqw","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B0%8F%E7%B1%B3","小米","ededed","公司标签","state","open","locked","assignees",[],"milestone",{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":147,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/2","https://github.com/pro-collection/interview-question/milestone/2","https://api.github.com/repos/pro-collection/interview-question/milestones/2/labels",9124545,"MI_kwDOJGDC6c4AizrB",2,"中","中级程序面试问题","creator",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"open_issues",510,"closed_issues",0,"created_at","2023-03-06T15:00:15Z","updated_at","2025-09-07T06:08:31Z","due_on","closed_at","comments","2023-05-30T15:36:19Z","assignee","author_association","MEMBER","active_lock_reason","sub_issues_summary",{"_166":151,"_167":151,"_168":151},"total","completed","percent_completed","issue_dependencies_summary",{"_171":151,"_172":151,"_173":151,"_174":151},"blocked_by","total_blocked_by","blocking","total_blocking","body","**关键词**：js 指向\n\nJavaScript 中 this 指向混乱的原因主要有以下几个：\n\n1. 函数调用方式不同：JavaScript 中函数的调用方式决定了 this 的指向。常见的函数调用方式有函数调用、方法调用、构造函数调用和箭头函数调用。不同的调用方式会导致 this 指向不同的对象，容易引发混乱。\n\n2. 丢失绑定：当函数作为一个独立的变量传递时，或者作为回调函数传递给其他函数时，函数内部的 this 可能会丢失绑定。这意味着函数中的 this 不再指向原来的对象，而是指向全局对象（在浏览器环境中通常是 window 对象）或 undefined（在严格模式下）。\n\n3. 嵌套函数：当函数嵌套在其他函数内部时，嵌套函数中的 this 通常会与外部函数的 this 不同。这可能导致 this 的指向出现混乱，特别是在多层嵌套的情况下。\n\n4. 使用 apply、call 或 bind 方法：apply、call 和 bind 是 JavaScript 中用于显式指定函数的 this 的方法。如果不正确使用这些方法，比如传递了错误的上下文对象，就会导致 this 指向错误。\n\n5. 箭头函数：箭头函数具有词法作用域的 this 绑定，它会捕获其所在上下文的 this 值，而不是动态绑定 this。因此，在箭头函数中使用 this 时，它指向的是箭头函数声明时的上下文，而不是调用时的上下文。\n\n为了避免 this 指向混乱的问题，可以采取以下措施：\n\n- 使用箭头函数，确保 this 始终指向期望的上下文。\n- 在函数调用时，确保正确设置了函数的上下文对象，可以使用 bind、call 或 apply 方法。\n- 使用严格模式，避免函数内部的 this 默认绑定到全局对象。\n- 在嵌套函数中，使用箭头函数或者显式保存外部函数的 this 值，以避免内部函数的 this 指向错误。\n\n理解和正确处理 this 的指向是 JavaScript 开发中重要的一环，它能帮助我们避免许多常见的错误和混乱。\n","reactions",{"_58":179,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/388/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/388/timeline","performed_via_github_app","state_reason","pinned_comment","score",1,{"_58":197,"_60":61,"_62":198,"_64":199,"_66":200,"_68":201,"_70":202,"_72":203,"_74":204,"_76":205,"_78":206,"_111":207,"_131":132,"_133":24,"_134":214,"_136":215,"_158":151,"_152":217,"_154":218,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":219,"_169":220,"_175":221,"_177":222,"_189":224,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/387","https://api.github.com/repos/pro-collection/interview-question/issues/387/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/387/comments","https://api.github.com/repos/pro-collection/interview-question/issues/387/events","https://github.com/pro-collection/interview-question/issues/387",1732510704,"I_kwDOJGDC6c5nRAPw",387,"Generator 是如何做到中断和恢复的【热度: 1,558】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[208,209],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":210,"_72":211,"_58":212,"_117":213,"_119":129,"_121":24,"_122":130},5312738037,"LA_kwDOJGDC6c8AAAABPKny9Q","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%99%BE%E5%BA%A6","百度",[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":216,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-05-30T15:32:05Z","2023-05-30T15:32:06Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：Generator 中断、Generator 回复\n\nGenerator 是 JavaScript 中一种特殊的函数，它能够通过迭代器协议（Iterator Protocol）实现中断和恢复的功能。\n\nGenerator 函数使用 `function*` 声明，内部可以使用 `yield` 关键字来定义中断点。当调用 Generator 函数时，它不会立即执行，而是返回一个迭代器对象。通过调用迭代器的 `next()` 方法，可以逐步执行 Generator 函数，并在每个 `yield` 关键字处暂停执行并返回一个包含当前值的对象。\n\n当调用 `next()` 方法时，Generator 函数会从上次暂停的地方继续执行，直到遇到下一个 `yield` 关键字或函数结束。通过不断调用 `next()` 方法，可以逐步执行 Generator 函数的代码，并获取每个中断点处的值。\n\n由于 Generator 函数具有中断和恢复的特性，可以用于异步编程，实现一种更直观的方式来处理异步操作。通过 `yield` 关键字，可以将异步操作分割成多个步骤，每个步骤都可以通过 `yield` 暂停，等待异步操作完成后再恢复执行。\n\n以下是一个简单的示例，展示了 Generator 函数的中断和恢复特性：\n\n```javascript\nfunction* generatorFunction() {\n console.log('Step 1');\n yield;\n console.log('Step 2');\n yield;\n console.log('Step 3');\n}\n\nconst generator = generatorFunction();\n\ngenerator.next(); // Step 1\ngenerator.next(); // Step 2\ngenerator.next(); // Step 3\n```\n\n在上述示例中，我们定义了一个名为 `generatorFunction` 的 Generator 函数。在函数体内，使用 `console.log` 打印了三个不同的步骤，并在每个步骤后使用 `yield` 关键字暂停执行。然后，我们通过调用 `generator.next()` 方法逐步执行 Generator 函数。每次调用 `next()` 方法时，函数会从上次暂停的地方恢复执行，打印相应的步骤。\n\n通过使用 Generator 函数，可以实现更灵活、可控的异步编程模式，提供更好的代码可读性和维护性。\n",{"_58":223,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/387/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/387/timeline",{"_58":226,"_60":61,"_62":227,"_64":228,"_66":229,"_68":230,"_70":231,"_72":232,"_74":233,"_76":234,"_78":235,"_111":236,"_131":132,"_133":24,"_134":249,"_136":250,"_158":151,"_152":263,"_154":264,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":265,"_169":266,"_175":267,"_177":268,"_189":270,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/386","https://api.github.com/repos/pro-collection/interview-question/issues/386/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/386/comments","https://api.github.com/repos/pro-collection/interview-question/issues/386/events","https://github.com/pro-collection/interview-question/issues/386",1732501670,"I_kwDOJGDC6c5nQ-Cm",386,"不使用任何中间件， koa 如何解析 post 请求参数【热度: 1,359】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[237,244],{"_70":238,"_72":239,"_58":240,"_117":241,"_119":242,"_121":24,"_122":243},5232525911,"LA_kwDOJGDC6c8AAAABN-ICVw","https://api.github.com/repos/pro-collection/interview-question/labels/Nodejs","Nodejs","AC3F88","Nodejs 研究",{"_70":245,"_72":246,"_58":247,"_117":248,"_119":129,"_121":24,"_122":130},5312231007,"LA_kwDOJGDC6c8AAAABPKI2Xw","https://api.github.com/repos/pro-collection/interview-question/labels/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4","阿里巴巴",[],{"_58":251,"_68":252,"_62":253,"_70":254,"_72":255,"_74":256,"_76":257,"_122":258,"_146":259,"_148":260,"_150":151,"_131":132,"_152":261,"_154":262,"_156":-5,"_157":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD",3,"高","高级别面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},454,"2023-03-06T15:00:27Z","2025-09-07T06:21:17Z","2023-05-30T15:26:16Z","2023-05-30T15:26:17Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：koa 请求、koa 解析、koa body-parser\n\n如果你不想使用任何中间件来解析 POST 请求参数，你可以手动解析请求体数据。在 Koa 中，你可以通过以下步骤来解析 POST 请求的参数：\n\n1. 使用 `ctx.req` 获取原始的 Node.js 请求对象。\n2. 将请求对象的数据流通过 `ctx.req.on('data', ...)` 事件监听进行读取。\n3. 将读取到的数据流进行处理，根据请求头的 `Content-Type` 判断数据格式，可以是 `application/json` 或 `application/x-www-form-urlencoded`。\n4. 将处理后的数据转换为 JavaScript 对象或其他格式进行进一步处理。\n\n以下是一个示例：\n\n```javascript\nconst Koa = require('koa');\nconst app = new Koa();\n\napp.use(async (ctx) => {\n if (ctx.method === 'POST') {\n // 手动解析 POST 请求的参数\n const requestData = await parseRequestBody(ctx.req);\n // 处理请求参数\n // ...\n ctx.body = 'POST request received';\n } else {\n ctx.body = 'Hello, Koa!';\n }\n});\n\nfunction parseRequestBody(req) {\n return new Promise((resolve, reject) => {\n let data = '';\n req.on('data', (chunk) => {\n data += chunk;\n });\n req.on('end', () => {\n // 根据请求头的 Content-Type 判断数据格式\n if (req.headers['content-type'] === 'application/json') {\n // 解析 JSON 格式数据\n try {\n resolve(JSON.parse(data));\n } catch (error) {\n reject(error);\n }\n } else if (req.headers['content-type'] === 'application/x-www-form-urlencoded') {\n // 解析 URL 编码格式数据\n const parsedData = {};\n const keyValuePairs = data.split('&');\n for (const pair of keyValuePairs) {\n const [key, value] = pair.split('=');\n parsedData[key] = decodeURIComponent(value);\n }\n resolve(parsedData);\n } else {\n reject(new Error('Unsupported content type'));\n }\n });\n req.on('error', (error) => {\n reject(error);\n });\n });\n}\n\napp.listen(3000, () => {\n console.log('Server started on port 3000');\n});\n```\n\n在上述示例中，我们在中间件函数中手动解析 POST 请求的参数。`parseRequestBody` 函数使用 `ctx.req` 获取原始的 Node.js 请求对象，并通过监听 `data` 事件将请求体数据流进行读取。然后，根据请求头的 `Content-Type` 判断数据格式，如果是 `application/json`，则使用 `JSON.parse` 解析为 JavaScript 对象；如果是 `application/x-www-form-urlencoded`，则将数据转换为键值对对象。最后，将解析后的数据传递给处理函数进行进一步处理。\n\n请注意，手动解析请求参数可能更复杂且容易出错，而使用中间件能够更方便地处理和解析请求体数据。因此，在实际开发中，推荐使用合适的中间件来解析请求参数。\n",{"_58":269,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/386/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/386/timeline",{"_58":272,"_60":61,"_62":273,"_64":274,"_66":275,"_68":276,"_70":277,"_72":278,"_74":279,"_76":280,"_78":281,"_111":282,"_131":132,"_133":24,"_134":289,"_136":290,"_158":195,"_152":292,"_154":293,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":294,"_169":295,"_175":296,"_177":297,"_189":299,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/385","https://api.github.com/repos/pro-collection/interview-question/issues/385/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/385/comments","https://api.github.com/repos/pro-collection/interview-question/issues/385/events","https://github.com/pro-collection/interview-question/issues/385",1732490915,"I_kwDOJGDC6c5nQ7aj",385,"使用 Promise 实现一个异步流量控制的函数(限制并发数)【热度: 517】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[283,284],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":285,"_72":286,"_58":287,"_117":288,"_119":129,"_121":24,"_122":130},5312726360,"LA_kwDOJGDC6c8AAAABPKnFWA","https://api.github.com/repos/pro-collection/interview-question/labels/%E8%85%BE%E8%AE%AF","腾讯",[],{"_58":251,"_68":252,"_62":253,"_70":254,"_72":255,"_74":256,"_76":257,"_122":258,"_146":291,"_148":260,"_150":151,"_131":132,"_152":261,"_154":262,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-05-30T15:19:35Z","2023-06-26T16:04:07Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：异步流量控制的函数\n\n下面是使用 Promise 实现异步流量控制的函数的示例：\n\n```javascript\nfunction asyncFlowControl(tasks, limit) {\n let runningCount = 0; // 当前正在运行的任务数\n let index = 0; // 当前执行的任务索引\n const results = []; // 存储任务的结果\n\n return new Promise((resolve, reject) => {\n function runTask() {\n if (runningCount >= limit || index >= tasks.length) {\n // 达到并发限制或所有任务已执行完毕，返回结果\n if (results.length === tasks.length) {\n resolve(results);\n }\n return;\n }\n\n const task = tasks[index];\n const currentIndex = index; // 保存当前任务索引\n\n index++;\n runningCount++;\n\n task().then((result) => {\n results[currentIndex] = result; // 存储任务结果\n runningCount--;\n runTask(); // 递归执行下一个任务\n }).catch((error) => {\n reject(error);\n });\n\n runTask(); // 递归执行下一个任务\n }\n\n runTask(); // 开始执行任务\n });\n}\n\n// 示例用法\nfunction asyncTask(value) {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(value);\n resolve(value);\n }, Math.random() * 1000);\n });\n}\n\nconst tasks = [\n () => asyncTask(1),\n () => asyncTask(2),\n () => asyncTask(3),\n () => asyncTask(4),\n () => asyncTask(5),\n];\n\nasyncFlowControl(tasks, 2).then((results) => {\n console.log('All tasks completed:', results);\n}).catch((error) => {\n console.error('Error occurred:', error);\n});\n```\n\n以上示例中的 `asyncFlowControl` 函数接受一个任务数组 `tasks` 和一个并发限制 `limit`，它会按照并发限制逐个执行任务，并返回一个 Promise 对象。在示例中，任务数组中的每个任务都是一个返回 Promise 的函数，通过 `setTimeout` 模拟异步操作。\n\n在执行过程中，`asyncFlowControl` 函数会维护一个 `runningCount` 变量来跟踪当前正在运行的任务数，并使用递归的方式执行任务。当达到并发限制或所有任务都已执行完毕时，函数会返回结果。\n\n通过控制并发任务的数量，我们可以限制同时执行的异步操作，实现异步流量控制。在上述示例中，设置并发限制为 2，可以确保最多同时执行 2 个任务，并在任务执行完毕后再执行下一个任务。\n",{"_58":298,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/385/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/385/timeline",{"_58":301,"_60":61,"_62":302,"_64":303,"_66":304,"_68":305,"_70":306,"_72":307,"_74":308,"_76":309,"_78":310,"_111":311,"_131":132,"_133":24,"_134":320,"_136":321,"_158":151,"_152":323,"_154":324,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":325,"_169":326,"_175":327,"_177":328,"_189":330,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/384","https://api.github.com/repos/pro-collection/interview-question/issues/384/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/384/comments","https://api.github.com/repos/pro-collection/interview-question/issues/384/events","https://github.com/pro-collection/interview-question/issues/384",1730948526,"I_kwDOJGDC6c5nLC2u",384,"source map 了解多少【热度: 396】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[312,319],{"_70":313,"_72":314,"_58":315,"_117":316,"_119":317,"_121":24,"_122":318},5284642729,"LA_kwDOJGDC6c8AAAABOv0_qQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B7%A5%E7%A8%8B%E5%8C%96","工程化","1d76db","web 项目工程化",{"_70":210,"_72":211,"_58":212,"_117":213,"_119":129,"_121":24,"_122":130},[],{"_58":251,"_68":252,"_62":253,"_70":254,"_72":255,"_74":256,"_76":257,"_122":258,"_146":322,"_148":260,"_150":151,"_131":132,"_152":261,"_154":262,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-05-29T15:28:19Z","2023-05-29T15:28:20Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：source map 原理\n\n### Source Map（源映射）作用\n\nSource Map（源映射）是一种文件，用于将压缩、混淆或编译后的代码映射回原始的源代码，以便在调试过程中能够直接查看和调试源代码。它提供了压缩文件和源文件之间的映射关系，包括每个压缩文件中的代码位置、原始文件的路径和行号等信息。\n\nSource Map的主要作用如下：\n\n1. 调试：在开发过程中，源代码经常会被压缩、合并或转换为其他形式的代码，这使得在调试时直接查看和调试源代码变得困难。Source Map提供了一种方式，通过将压缩代码映射回源代码，开发者可以在调试器中直接查看和调试原始的、易于理解的源代码。\n\n2. 错误追踪：当发生错误或异常时，浏览器或运行环境会提供错误信息，其中包含了压缩后的代码行号和列号。Source Map可以将这些行号和列号映射回源代码的行号和列号，帮助开发者定位和追踪错误。\n\n3. 性能分析：Source Map可以提供压缩文件中每个代码片段对应的原始文件位置信息，这对于性能分析工具来说非常有用。性能分析工具可以使用Source Map来将性能数据映射回源代码，以便更准确地分析和优化代码性能。\n\nSource Map的原理是通过在压缩文件中添加特定的注释或者生成独立的.map文件来存储映射关系。在调试过程中，浏览器或调试器会读取Source Map，并根据其中的映射关系将压缩代码中的行号、列号等信息映射回源代码的对应位置。\n\n### Source Map（源映射）实现原理\n\nSource Map 的实现原理可以简单描述如下：\n\n1. 生成 Source Map：在代码的压缩、混淆或编译过程中，生成器会创建一个 Source Map 对象，并收集相关的映射信息。这些信息包括原始文件路径、行号、列号以及对应的压缩文件中的位置信息。\n\n2. 生成编码字符串：将收集到的映射信息使用 VLQ（Variable Length Quantity）编码进行压缩，将数字转换为可变长度的 Base64 编码字符串。VLQ 编码能够通过特定的规则将数字转换为可变长度的字符串，以减小 Source Map 的体积。\n\n3. 关联 Source Map：在生成的压缩文件中，通过注释或独立的 .map 文件将 Source Map 关联到压缩文件。注释方式可以通过特定的注释语法将编码字符串直接嵌入到压缩文件中，而独立的 .map 文件则将编码字符串保存在一个独立的文件中。\n\n4. 调试时使用 Source Map：在调试过程中，当开发者需要查看或调试源代码时，浏览器或调试工具会加载关联的 Source Map 文件，根据映射关系将压缩文件中的位置信息映射回源代码的对应位置。\n\n通过这种方式，Source Map 实现了将压缩后的代码映射回原始源代码的功能，使得在调试、错误追踪和性能分析时能够更方便地操作和理解源代码。实际上，Source Map 的实现会有更多的细节和规范，但以上是其基本的实现原理概述。\n",{"_58":329,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/384/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/384/timeline",{"_58":332,"_60":61,"_62":333,"_64":334,"_66":335,"_68":336,"_70":337,"_72":338,"_74":339,"_76":340,"_78":341,"_111":342,"_131":132,"_133":24,"_134":344,"_136":345,"_158":151,"_152":347,"_154":348,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":349,"_169":350,"_175":351,"_177":352,"_189":354,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/383","https://api.github.com/repos/pro-collection/interview-question/issues/383/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/383/comments","https://api.github.com/repos/pro-collection/interview-question/issues/383/events","https://github.com/pro-collection/interview-question/issues/383",1730941219,"I_kwDOJGDC6c5nLBEj",383,"node 子进程了解多少【热度: 1,424】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[343],{"_70":238,"_72":239,"_58":240,"_117":241,"_119":242,"_121":24,"_122":243},[],{"_58":251,"_68":252,"_62":253,"_70":254,"_72":255,"_74":256,"_76":257,"_122":258,"_146":346,"_148":260,"_150":151,"_131":132,"_152":261,"_154":262,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-05-29T15:21:17Z","2023-05-29T15:21:18Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：node 子进程\n\n\n### 开启子进程\n\n在Node.js中，可以通过`child_process`模块来开启子进程。`child_process`模块提供了一些方法来创建和操作子进程。\n\n以下是一些常用的方法用于开启子进程：\n\n1. `spawn(command[, args][, options])`: 这个方法用于启动一个新的进程，并可以执行指定的命令。它返回一个`ChildProcess`对象，通过该对象可以与子进程进行通信。例如：\n\n```javascript\nconst { spawn } = require('child_process');\n\nconst ls = spawn('ls', ['-l']);\n\nls.stdout.on('data', (data) => {\n console.log(`stdout: ${data}`);\n});\n\nls.stderr.on('data', (data) => {\n console.error(`stderr: ${data}`);\n});\n\nls.on('close', (code) => {\n console.log(`child process exited with code ${code}`);\n});\n```\n\n2. `exec(command[, options][, callback])`: 这个方法用于执行一个命令，并返回输出结果。它将整个命令作为一个字符串参数传递。可以通过回调函数获取命令执行的结果。例如：\n\n```javascript\nconst { exec } = require('child_process');\n\nexec('ls -l', (error, stdout, stderr) => {\n if (error) {\n console.error(`exec error: ${error}`);\n return;\n }\n console.log(`stdout: ${stdout}`);\n console.error(`stderr: ${stderr}`);\n});\n```\n\n3. `fork(modulePath[, args][, options])`: 这个方法用于创建一个新的Node.js进程，并在该进程中执行指定的模块。它是通过`child_process.fork()`方法创建的子进程。例如：\n\n```javascript\nconst { fork } = require('child_process');\n\nconst child = fork('child.js');\n\nchild.on('message', (message) => {\n console.log(`received message from child: ${message}`);\n});\n\nchild.send('Hello from parent');\n```\n\n以上是一些常用的方法来开启子进程。根据具体的需求，选择合适的方法来创建和操作子进程。\n\n\n### node 开启的子进程之间如何通信\n\n在Node.js中，子进程之间可以通过不同的机制进行通信。以下是一些常用的子进程间通信方式：\n\n1. 标准输入和标准输出：子进程可以通过标准输入（stdin）和标准输出（stdout）进行通信。父进程可以通过`stdin`向子进程发送数据，子进程可以通过`stdout`向父进程发送数据。例如：\n\n```javascript\n// Parent.js\nconst { spawn } = require('child_process');\n\nconst child = spawn('node', ['Child.js']);\n\nchild.stdout.on('data', (data) => {\n console.log(`Received data from child: ${data}`);\n});\n\nchild.stdin.write('Hello child\\n');\n```\n\n```javascript\n// Child.js\nprocess.stdin.on('data', (data) => {\n console.log(`Received data from parent: ${data}`);\n});\n\nprocess.stdout.write('Hello parent\\n');\n```\n\n2. 事件机制：子进程可以通过事件机制与父进程进行通信。子进程可以使用`process.send()`方法发送消息给父进程，父进程可以通过监听`message`事件来接收子进程发送的消息。例如：\n\n```javascript\n// Parent.js\nconst { fork } = require('child_process');\n\nconst child = fork('Child.js');\n\nchild.on('message', (message) => {\n console.log(`Received message from child: ${message}`);\n});\n\nchild.send('Hello child');\n```\n\n```javascript\n// Child.js\nprocess.on('message', (message) => {\n console.log(`Received message from parent: ${message}`);\n});\n\nprocess.send('Hello parent');\n```\n\n3. 共享内存：子进程之间可以通过共享内存的方式进行通信，常见的方式包括文件、共享内存、消息队列等。子进程可以将数据写入共享的资源，其他子进程可以读取该资源获取数据。具体的实现方式需要依赖于操作系统和相关模块。\n\n以上是一些常用的子进程间通信方式。根据具体的需求，选择合适的通信方式进行子进程间的数据交换和通信。\n\n### node 子进程有哪些应用场景\n\nNode.js的子进程模块提供了创建和操作子进程的能力，这在以下一些应用场景中非常有用：\n\n1. 执行外部命令：使用子进程模块可以在Node.js中执行外部命令。这对于需要在Node.js中调用系统命令、运行脚本或执行其他可执行文件的场景非常有用。\n\n2. 并行处理：在某些情况下，需要同时处理多个任务或操作。通过创建多个子进程，可以实现并行处理，提高处理能力和效率。\n\n3. 资源隔离：在一些特定的情况下，可能需要将某些代码或任务隔离到一个独立的进程中。这可以防止代码中的错误或异常影响到主进程的稳定性和性能。\n\n4. 长时间运行的任务：对于需要长时间运行的任务，可以将其放在独立的子进程中运行，这样可以避免阻塞主进程。这对于处理大量数据、复杂计算、后台任务等场景非常有用。\n\n5. 多核利用：当机器有多个CPU核心时，可以通过创建多个子进程来利用多核处理器的并行能力，提高程序的性能和响应能力。\n\n6. 分布式计算：使用子进程可以实现分布式计算，将计算任务分发到不同的子进程中，在多个计算资源上并行执行，加快计算速度。\n\n以上只是一些常见的应用场景，实际上，子进程模块非常灵活，可以根据具体需求进行扩展和应用。无论是执行外部命令、并行处理、资源隔离还是利用多核等，子进程模块为Node.js提供了强大的功能，使得Node.js可以在更广泛的应用场景中发挥作用。\n\n",{"_58":353,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/383/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/383/timeline",{"_58":356,"_60":61,"_62":357,"_64":358,"_66":359,"_68":360,"_70":361,"_72":362,"_74":363,"_76":364,"_78":365,"_111":366,"_131":132,"_133":24,"_134":374,"_136":375,"_158":151,"_152":377,"_154":378,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":379,"_169":380,"_175":381,"_177":382,"_189":384,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/382","https://api.github.com/repos/pro-collection/interview-question/issues/382/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/382/comments","https://api.github.com/repos/pro-collection/interview-question/issues/382/events","https://github.com/pro-collection/interview-question/issues/382",1730924576,"I_kwDOJGDC6c5nK9Ag",382,"[vue] render 函数了解吗？【热度: 244】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[367],{"_70":368,"_72":369,"_58":370,"_117":371,"_119":372,"_121":24,"_122":373},5252532904,"LA_kwDOJGDC6c8AAAABORNKqA","https://api.github.com/repos/pro-collection/interview-question/labels/web%E6%A1%86%E6%9E%B6","web框架","CB446E","web 框架相关知识",[],{"_58":251,"_68":252,"_62":253,"_70":254,"_72":255,"_74":256,"_76":257,"_122":258,"_146":376,"_148":260,"_150":151,"_131":132,"_152":261,"_154":262,"_156":-5,"_157":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-05-29T15:07:49Z","2023-05-29T15:07:50Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：vue render 函数\n\n### render 函数\n\n在Vue.js中，`render`是一个用于生成虚拟DOM（VNode）树的函数。它是Vue.js的渲染函数，负责将组件的模板转换为可渲染的VNode树。\n\n`render`函数接收一个上下文对象作为参数，该对象包含了渲染过程中需要的数据和方法。在`render`函数中，我们可以使用Vue.js提供的模板语法（如插值表达式、指令等）来描述组件的视图结构。\n\n`render`函数的主要作用是根据模板和组件的状态生成VNode树，其中包含了组件的结构、属性、事件等信息。通过对VNode树的创建和更新，Vue.js能够实现高效的虚拟DOM diff算法，并将变更应用到实际的DOM上，从而实现组件视图的动态更新。\n\n在Vue.js中，`render`函数有两种使用方式：\n\n1. 基于模板编译：Vue.js会将组件的模板编译为`render`函数。这是Vue.js的默认行为，它会在运行时将模板编译成渲染函数，并将其作为组件的`render`选项。这种方式可以方便地使用模板语法来描述组件的视图结构。\n\n2. 手动编写：开发者可以手动编写`render`函数，而不依赖模板编译。手动编写`render`函数需要熟悉Vue.js的虚拟DOM API和JavaScript语法，可以更精细地控制组件的渲染过程。这种方式适用于需要更高级别的自定义和优化的场景。\n\n`render` 函数是Vue.js的渲染函数，用于生成组件的虚拟DOM树。它接收上下文对象作为参数，根据模板或手动编写的代码逻辑，生成VNode树，实现组件的动态更新和渲染。\n\n**使用示例**\n\n当使用基于模板编译的方式时，Vue.js会将模板编译为`render`函数，并将其作为组件的`render`选项。下面是一个简单的示例：\n\n```vue\n\n\n\n```\n\n在上面的示例中，模板中的`