[{"_1":2,"_1077":-5,"_1078":-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,"_1072":1073},"questions",[57,197,242,273,302,337,362,391,416,451,485,515,539,561,585,609,633,657,682,718,743,768,799,823,852,877,902,933,962,991,1020,1049],{"_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":160,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":166,"_170":171,"_176":177,"_178":179,"_190":191,"_192":-5,"_193":-5,"_194":-5,"_195":196},"url","https://api.github.com/repos/pro-collection/interview-question/issues/522","repository_url","https://api.github.com/repos/pro-collection/interview-question","labels_url","https://api.github.com/repos/pro-collection/interview-question/issues/522/labels{/name}","comments_url","https://api.github.com/repos/pro-collection/interview-question/issues/522/comments","events_url","https://api.github.com/repos/pro-collection/interview-question/issues/522/events","html_url","https://github.com/pro-collection/interview-question/issues/522","id",1858154803,"node_id","I_kwDOJGDC6c5uwTEz","number",522,"title","前端模块化的演进过程【热度: 798】","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},5284642729,"LA_kwDOJGDC6c8AAAABOv0_qQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B7%A5%E7%A8%8B%E5%8C%96","name","工程化","color","1d76db","default","description","web 项目工程化",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},5316900032,"LA_kwDOJGDC6c8AAAABPOl0wA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BA%AC%E4%B8%9C","京东","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/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,"高","高级别面试问题","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",454,"closed_issues",0,"created_at","2023-03-06T15:00:27Z","updated_at","2025-09-07T06:21:17Z","due_on","closed_at","comments","2023-08-20T15:03:38Z","2023-08-20T15:04:19Z","assignee","author_association","MEMBER","active_lock_reason","sub_issues_summary",{"_167":151,"_168":151,"_169":151},"total","completed","percent_completed","issue_dependencies_summary",{"_172":151,"_173":151,"_174":151,"_175":151},"blocked_by","total_blocked_by","blocking","total_blocking","body","**关键词**：前端模块化演进\n\n### 1 函数作为块\n\n最开始的时候，是以函数为块来编程，因为函数有自己的作用域，相对比较独立\n\n```js\nfunction add(a,b){ \n // ...\n}\nfunction add1(a,b,c){\n // ...\n}\n```\n\n这种形式中，add和add1都是定义在全局作用域中的，会造成很多问题：\n\n1. 污染全局作用域，容易造成命名冲突\n2. 定义在全局作用域，数据不安全\n\n### 2 namespace模式\n\n使用对象作为独立块编程\n\n```js\nvar myModule={\n a:1,\n b:2,\n add:function(m,n){...}\n}\n```\n\n优点：减少了全局变量，有效解决了命名冲突\n\n缺点：\n\n1. 没有私有变量，使用起来很繁琐\n2. 数据不安全，模块外面可以随意修改内部的数据\n\n### 3 IIFE模式\n\n**使用立即执行函数来创建块，可以形成独立的作用域，外面无法访问，借助window对象来向外暴露接口**\n\n```js\n(function($){\n var a=1;\n var b=2;\n function add(m,n){\n ...\n }\n $('#id').addClass('.hehe');\n window.myModule={\n a:a,\n b:b,\n add:add\n }\n})()\n```\n\n优点：\n\n1. 减少了全局变量，解决了命名冲突\n2. 创建了独立的作用域，外部无法轻易修改内部数据\n\n缺点：\n\n**如果多个模块分布在多个js文件中，那么在html文件中就需要引入多个js文件**\n\n1. 会增加多个http请求，增加首屏的时候，降低用户体验\n2. **模块之间的引用关系很不明显，难以维护**\n\n\n### 4 CommonJS\n\n最开始出现的模块化方案是在node.js中实现的。node中的模块化方案是根据CommonJS规范实现的。\n\n**CommonJS规定每个文件就是一个模块，以同步的方式引入其他模块**\n\n```js\n//a.js\nfunction add(m,n){\n return m+n;\n}\nmodule.exports={add:add}\n\n\n//b.js\nconst {add} = require('./a.js');\nconsole.log(add(1,2)); // 3\n```\n\n这种方式是node端独有的，浏览器端如果想要使用，需要使用 **Browserify** 工具来解析。\n\n\n\n### 5 AMD和Require.js\n\nCommonJS模块之前是同步引入的，这在服务端是没有什么问题的，因为**文件都是保存在硬盘中，读取文件的速度是非常快的，同步加载带来的阻塞基本可以忽略不计。**\n\n但是如果在浏览器中使用CommonJS的话，因为**js文件是存在服务端需要请求获取，所以同步的方式加载会极大的阻塞页面**，显然是不可取的。\n\n于是诞生了AMD（Asynchronous Module Definition）规范，**一种异步加载的模块方案，使用回调函数来实现**。require.js实现了AMD的规范。\n\n```js\n//定义没有依赖的模块\n//a.js\ndefine(function(){\n function add(m,n){\n return m+n;\n }\n return {add:add}\n})\n\n//定义有依赖的模块\n//b.js\ndefine(['a'], function(a){\n const sum = a.add(1,2);\n return {sum:sum}\n})\n\n//引用模块\nrequire(['b'],function(b){\n console.log(b.sum); //3\n})\n```\n\n由上面代码分析Require.js的特点\n\n1. 依赖模块的代码都是放在回调函数中，等待模块都加载完成才执行这个回调函数，执行顺序可以保证\n2. **内部加载其他模块的时候，使用的是动态添加script标签的方式来实现动态加载**\n3. 内部需要缓存模块暴露出来的接口，避免多次执行\n\n**AMD推崇的是依赖前置，提前执行。**\n\n从上面代码可以看出，**在声明一个模块的时候，会在第一时间就将其依赖模块的内部代码执行完毕。而不是在真正使用的地方再去执行。**因此会带来一些资源浪费\n\n```js\ndefine(['a','b'],function(a,b){\n let sum = a.add(1,2);\n if(false){\n sum = b.add(1,2); //b模块是没有被使用的，应该是不需要执行模块内部代码的\n }\n return sum;\n})\n```\n\n\n\n### 6 CMD和Sea.js\n\n由于require.js自身的一些问题存在，所以后来在国内（玉伯）诞生了CMD（Common Module Definition）和Sea.js。\n\nCMD结合了CommonJS和AMD的特点，也是一种**异步**模块的方案，**提倡就近依赖，延迟执行。**\n\n**需要用到某个模块的时候，才用require引入，模块内部的代码也是在被引入的时候才会执行，声明的时候并没有执行。**\n\n语法设计上比较像CommonJS\n\n```js\n//定义模块 math.js\ndefine(function(require,exports,module){\n var a = require('./a.js'); // 引入模块\n function add(m,n){\n return m+n;\n }\n module.exports={\n add:add\n }\n});\n\n//加载模块\nseajs.use(['math.js'],function(math){\n var sum = math.add(1,2);\n})\n```\n\n看上面的代码可能会有疑问，模块是异步加载的，但是使用的时候require是同步使用的，没有回调函数，如何能够保证执行的顺序呢？这就不得不提sea.js中的静态依赖分析机制了。\n\n#### 6.1 Sea.js中的静态依赖分析机制\n\nSea.js中**模块加载的入口方法是use()方法，执行这个方法会开始加载所有的依赖模块**。然后sea.js中是就近依赖的，它是如何获取依赖模块的呢？\n\n**在define的方法中，如果传入的参数factory是一个函数，内部会执行函数的toString方法，转化成字符串，然后通过正则表达式分析字符串，获取require方法中的参数，通过路径分析去加载依赖的模块**。以此链式分析下去，边分析边加载模块，等待所有的依赖都加载完成之后，才开始调用use的回调函数，正式执行模块内代码。\n\n所以在require方法执行之前，对应的模块已经加载完成了，所以可以直接传入参数，执行模块函数体。\n\n#### 6.2 Sea.js的特点\n\n1. **就近依赖，延时执行**\n2. 内部拥有静态依赖分析机制，保证require之前，模块已经加载完毕，但是函数还没有执行\n3. 也是一种异步的模块化方案\n4. 内部也有缓存机制，缓存模块暴露的接口\n5. 内部加载模块的时候，和require.js一样，也是通过**动态增加script标签**来完成的\n\n\n\n### 7 ES Module\n\nES6开始，在语法标准上实现了模块化功能。简称ES Module\n\n**ES Module是一种静态依赖的模块化方案，模块与模块之间的依赖关系是在编译期完成连接的。**\n\n**前面所说的三种方案都是动态模块化方案，依赖模块都是动态引入的，而且模块都是一个对象。而ES Module中，模块不是一个对象，模块与模块之间也不是动态引入的，而且编译期间静态引入的，所以无法实现条件加载**\n\n```js\n//a.js\nfunction add(m,n){\n return m+n;\n}\nexport {add};\n\n// b.js\nimport {add} from './a.js';\nconsole.log(add(1,2)); //3\n```\n\n\n**参考文档**\n- [https://github.com/careyke/frontend_knowledge_structure/blob/master/javascript/module/question01_module.md](https://github.com/careyke/frontend_knowledge_structure/blob/master/javascript/module/question01_module.md)\n","reactions",{"_58":180,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/522/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/522/timeline","performed_via_github_app","state_reason","pinned_comment","score",1,{"_58":198,"_60":61,"_62":199,"_64":200,"_66":201,"_68":202,"_70":203,"_72":204,"_74":205,"_76":206,"_78":207,"_111":208,"_131":132,"_133":24,"_134":220,"_136":221,"_158":151,"_152":234,"_154":235,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":236,"_170":237,"_176":238,"_178":239,"_190":241,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/521","https://api.github.com/repos/pro-collection/interview-question/issues/521/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/521/comments","https://api.github.com/repos/pro-collection/interview-question/issues/521/events","https://github.com/pro-collection/interview-question/issues/521",1858148109,"I_kwDOJGDC6c5uwRcN",521,"[代码实现] 实现一个可以用for...of遍历的对象【热度: 653】",{"_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},[209,214],{"_70":210,"_72":211,"_58":212,"_117":213,"_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","腾讯",{"_70":215,"_72":216,"_58":217,"_117":218,"_119":120,"_121":24,"_122":219},5931045040,"LA_kwDOJGDC6c8AAAABYYSQsA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0/%E7%AE%97%E6%B3%95","代码实现/算法","代码实现或者算法实现",[],{"_58":222,"_68":223,"_62":224,"_70":225,"_72":226,"_74":227,"_76":228,"_122":229,"_146":230,"_148":231,"_150":151,"_131":132,"_152":232,"_154":233,"_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,"中","中级程序面试问题",{"_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},510,"2023-03-06T15:00:15Z","2025-09-07T06:08:31Z","2023-08-20T14:41:49Z","2023-09-06T15:51:38Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：for...in遍历、for...of遍历\n\n普通对象因为没有迭代器，所以无法使用for...of遍历，一般使用for...in或者Object.keys()来遍历\n\n但是如果我们手动给对象设置一个迭代器，对象也是可以使用for...of来遍历的;\n\n```js\nvar obj = {\n a:1,\n b:2,\n c:3\n}\n\nobj.__proto__[Symbol.iterator] = function* objectIterator() {\n for (let key in this) {\n if (obj.hasOwnProperty(key)) {\n yield [key, this[key]]\n }\n }\n}\n\nfor(let v of obj){\n console.log(v);\n}\n//['a',1]\n//['b',2]\n//['c',3]\n```\n",{"_58":240,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/521/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/521/timeline",{"_58":243,"_60":61,"_62":244,"_64":245,"_66":246,"_68":247,"_70":248,"_72":249,"_74":250,"_76":251,"_78":252,"_111":253,"_131":132,"_133":24,"_134":262,"_136":263,"_158":151,"_152":265,"_154":266,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":267,"_170":268,"_176":269,"_178":270,"_190":272,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/520","https://api.github.com/repos/pro-collection/interview-question/issues/520/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/520/comments","https://api.github.com/repos/pro-collection/interview-question/issues/520/events","https://github.com/pro-collection/interview-question/issues/520",1858139484,"I_kwDOJGDC6c5uwPVc",520,"for...of、for...in、for 循环，三者有什么区别【热度: 1,652】",{"_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},[254,261],{"_70":255,"_72":256,"_58":257,"_117":258,"_119":259,"_121":24,"_122":260},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",{"_70":210,"_72":211,"_58":212,"_117":213,"_119":129,"_121":24,"_122":130},[],{"_58":222,"_68":223,"_62":224,"_70":225,"_72":226,"_74":227,"_76":228,"_122":229,"_146":264,"_148":231,"_150":151,"_131":132,"_152":232,"_154":233,"_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-08-20T14:14:16Z","2023-08-20T14:14:29Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：for...in遍历、for...of遍历\n\n以下是 `for...of`、`for...in` 和 `for` 循环的区别对比表格：\n\n| 特性 | for...of 循环 | for...in 循环 | for 循环 |\n|------------------|----------------------------------------------------------------|-----------------------------------------------------------|------------------------------------------------------------|\n| 遍历对象类型 | 可以遍历可迭代对象（如数组、字符串、Set、Map、Generator 等） | 可以遍历对象的可枚举属性 | 不适用于直接遍历对象，适用于遍历数组或固定个数的循环 |\n| 遍历数组 | 遍历数组的元素 | 遍历数组的索引 | 遍历数组的索引或值 |\n| 遍历字符串 | 遍历字符串的字符 | 遍历字符串的索引 | 遍历字符串的索引或字符 |\n| 遍历 Set | 遍历 Set 的值 | 不适用 | 不适用 |\n| 遍历 Map | 遍历 Map 的键值对 | 不适用 | 不适用 |\n| 遍历对象 | 不适用 | 遍历对象的可枚举属性及其对应的值 | 不适用 |\n| 遍历 Generator | 遍历 Generator 生成的值 | 不适用 | 不适用 |\n| 遍历可迭代对象 | 遍历可迭代对象的元素 | 不适用 | 不适用 |\n| 适用范围 | 适用于需要遍历可迭代对象的场景 | 适用于需要遍历对象的可枚举属性的场景 | 适用于需要手动控制循环次数的场景 |\n| 遍历顺序 | 按照可迭代对象的顺序进行遍历 | 不保证顺序 | 按照循环次数进行遍历 |\n\n需要注意的是，`for...of` 循环只能用于可迭代对象，并且会遍历对象的迭代器方法（即 `Symbol.iterator`），而 `for...in` 循环会遍历对象的所有可枚举属性，包括原型链上的属性。\n\n对于遍历数组的场景，可以使用 `for...of` 循环遍历数组的元素，也可以使用 `for` 循环遍历数组的索引或值。具体选择哪种方式取决于遍历的目的和需求。\n\n以下是一个使用不同循环方式遍历数组的示例：\n\n```javascript\nvar arr = [1, 2, 3];\n\nconsole.log(\"for...of 循环:\");\nfor (var element of arr) {\n console.log(element);\n}\n\nconsole.log(\"for...in 循环:\");\nfor (var index in arr) {\n console.log(arr[index]);\n}\n\nconsole.log(\"for 循环:\");\nfor (var i = 0; i < arr.length; i++) {\n console.log(arr[i]);\n}\n```\n\n输出结果为：\n\n```\nfor...of 循环:\n1\n2\n3\nfor...in 循环:\n1\n2\n3\nfor 循环:\n1\n2\n3\n```\n",{"_58":271,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/520/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/520/timeline",{"_58":274,"_60":61,"_62":275,"_64":276,"_66":277,"_68":278,"_70":279,"_72":280,"_74":281,"_76":282,"_78":283,"_111":284,"_131":132,"_133":24,"_134":291,"_136":292,"_158":196,"_152":294,"_154":295,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":296,"_170":297,"_176":298,"_178":299,"_190":301,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/519","https://api.github.com/repos/pro-collection/interview-question/issues/519/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/519/comments","https://api.github.com/repos/pro-collection/interview-question/issues/519/events","https://github.com/pro-collection/interview-question/issues/519",1858134518,"I_kwDOJGDC6c5uwOH2",519,"[代码执行] 关于 this 的指向问题：下面代码执行结果是什么, 原因？",{"_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},[285,286],{"_70":255,"_72":256,"_58":257,"_117":258,"_119":259,"_121":24,"_122":260},{"_70":287,"_72":288,"_58":289,"_117":290,"_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":222,"_68":223,"_62":224,"_70":225,"_72":226,"_74":227,"_76":228,"_122":229,"_146":293,"_148":231,"_150":151,"_131":132,"_152":232,"_154":233,"_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-08-20T13:58:32Z","2023-08-20T14:15:34Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"代码如下，请问执行结果是多少？\r\n```ts\r\nlet obj = {\r\n name: \"yanle\",\r\n age: 20,\r\n getName: () => {\r\n const _getName = () => {\r\n console.log(\"this.getName\", this.name);\r\n };\r\n _getName();\r\n },\r\n getAge: function() {\r\n const _getAge = () => {\r\n console.log(\"this.getAge\", this.age);\r\n };\r\n _getAge();\r\n },\r\n extend: {\r\n name: \"le\",\r\n age: 20,\r\n getName: function() {\r\n console.log(\"name: \", this.name);\r\n },\r\n getAge: () => {\r\n console.log(\"age: \", this.age);\r\n },\r\n },\r\n};\r\n\r\nobj.getName();\r\nobj.getAge();\r\n\r\nobj.extend.getName();\r\nobj.extend.getAge();\r\n\r\nobj.extend.getName.bind(obj)();\r\nobj.extend.getAge.bind(obj)();\r\n```\r\n\r\n**执行结果**\r\n```shell\r\nthis.getName undefined\r\nthis.getAge 20\r\nname: le\r\nage: undefined\r\nname: yanle\r\nage: undefined\r\n```\r\n\r\n解释如下：\r\n\r\n- `obj.getName()`：在箭头函数getName中，this指向的是全局对象（在浏览器中是window对象，Node.js 中是Global对象）。因此this.getName输出undefined。\r\n- `obj.getAge()`：在普通函数getAge中，this指向的是obj对象。因此this.getAge输出20。\r\n- `obj.extend.getName()`：在普通函数getName中，this指向的是obj.extend对象。因此this.name输出le。\r\n- `obj.extend.getAge()`：在箭头函数getAge中，this指向的是全局对象（在浏览器中是window对象，Node.js 中是Global对象）。因此this.age输出undefined。\r\n- `obj.extend.getName.bind(obj)()`：通过bind方法将getName函数绑定到obj对象上，并立即调用绑定后的函数。在绑定后调用时，this指向的是obj对象。因此this.name输出yanle。\r\n- `obj.extend.getAge.bind(obj)()`：在箭头函数 getAge 中，this 是在函数定义时绑定的，而不是在函数调用时绑定的。在这种情况下，箭头函数的 this 指向的是外层作用域的 this，即全局对象（在浏览器中是 window 对象，Node.js 中是 Global 对象）。因此，在 obj.extend.getAge.bind(obj)() 中，this.age 输出的是全局对象的 age，而全局对象中并没有定义 age 属性，所以结果是 undefined。\r\n",{"_58":300,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/519/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/519/timeline",{"_58":303,"_60":61,"_62":304,"_64":305,"_66":306,"_68":307,"_70":308,"_72":309,"_74":310,"_76":311,"_78":312,"_111":313,"_131":132,"_133":24,"_134":326,"_136":327,"_158":151,"_152":329,"_154":330,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":331,"_170":332,"_176":333,"_178":334,"_190":336,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/518","https://api.github.com/repos/pro-collection/interview-question/issues/518/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/518/comments","https://api.github.com/repos/pro-collection/interview-question/issues/518/events","https://github.com/pro-collection/interview-question/issues/518",1858121854,"I_kwDOJGDC6c5uwLB-",518,"HTML 属性 crossorigin 的作用是什么【热度: 267】",{"_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},[314,321],{"_70":315,"_72":316,"_58":317,"_117":318,"_119":319,"_121":24,"_122":320},5252299764,"LA_kwDOJGDC6c8AAAABOQ-79A","https://api.github.com/repos/pro-collection/interview-question/labels/%E6%B5%8F%E8%A7%88%E5%99%A8","浏览器","f9d0c4","浏览器相关知识点",{"_70":322,"_72":323,"_58":324,"_117":325,"_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","小米",[],{"_58":222,"_68":223,"_62":224,"_70":225,"_72":226,"_74":227,"_76":228,"_122":229,"_146":328,"_148":231,"_150":151,"_131":132,"_152":232,"_154":233,"_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-08-20T13:16:17Z","2023-08-20T13:16:30Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：crossorigin 属性、crossorigin 作用、crossorigin 资源错误处理\n\n`crossorigin` 属性在 `