事件冒泡

一、什么是闭包和闭包的几种写法和用法

\r\n### 1.1、什么是闭包 \r\n闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点： \r\n1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。 \r\n2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。 \r\n\r\n简单的说，Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。\r\n而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。\r\n当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。 \r\n\r\n### 1.2、闭包的几种写法和用法 \r\nJavaScript中闭包的应用使用闭包需要注意的地方：闭包使得函数中的变量都保存在内存中，内训消耗大，IE中有可能导致内存泄漏在父函数外部改变父函数内部变量的值。 \r\n\r\n\r\n\r\n第一种写法： \r\n```javascript\r\n//第1种写法 \r\nfunction Circle(r) { \r\n this.r = r; \r\n} \r\nCircle.PI = 3.14159; \r\nCircle.prototype.area = function() { \r\n return Circle.PI * this.r * this.r; \r\n} \r\n \r\nvar c = new Circle(1.0); \r\nalert(c.area());\r\n```\r\n\r\n**第二种写法：** \r\n```javascript\r\n//第2种写法 \r\nvar Circle = function() { \r\n var obj = new Object(); \r\n obj.PI = 3.14159; \r\n \r\n obj.area = function( r ) { \r\n return this.PI * r * r; \r\n } \r\n return obj; \r\n} \r\n \r\nvar c = new Circle(); \r\nalert( c.area( 1.0 ) );\r\n```\r\n\r\n第三种写法： \r\n```javascript\r\n//第3种写法 \r\nvar Circle = new Object(); \r\nCircle.PI = 3.14159; \r\nCircle.Area = function( r ) { \r\n return this.PI * r * r; \r\n} \r\n \r\nalert( Circle.Area( 1.0 ) );\r\n```\r\n\r\n**第四种写法：** \r\n```javascript\r\n//第4种写法 \r\nvar Circle={ \r\n \"PI\":3.14159, \r\n \"area\":function(r){ \r\n return this.PI * r * r; \r\n } \r\n}; \r\nalert( Circle.area(1.0) );\r\n```\r\n\r\n第五种写法：\r\n```javascript\r\n//第5种写法 \r\nvar Circle = new Function(\"this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}\");\r\n\r\nalert((new Circle()).area(1.0));\r\n```\r\n\r\n\r\n**基础用法：** \r\n示例1：解决作用域问题 \r\n```javascript\r\nfunction f1(){\r\n let n=1;\r\n test=function(){\r\n n+=1;\r\n };\r\n function f2(){\r\n console.log('f2():', n);\r\n }\r\n return f2;\r\n}\r\nlet res=f1(); //初始化f1()\r\nconsole.log(res()); //相当于调用f2()，结果1和undefined\r\ntest(); //将n的值改变了\r\nconsole.log(res()); // 结果2和undefined\r\n```\r\n\r\n示例2：实现get 和 set \r\n```javascript\r\nlet setValue,getValue;\r\n(function(){\r\n let n=0;\r\n getValue=function(){\r\n return n;\r\n };\r\n setValue=function(x){\r\n n=x;\r\n };\r\n})();\r\n\r\n\r\n// console.log(n); n is not defined\r\nconsole.log(getValue());\r\nsetValue(567);\r\nconsole.log(getValue());\r\n```\r\n\r\n示例3：用闭包实现迭代器的效果 \r\n```javascript\r\n//迭代器中得应用\r\nfunction test(x){\r\n var i=0;\r\n return function(){\r\n return x[i++];\r\n };\r\n}\r\nvar next=test(['a','b','c','d']);\r\nconsole.log(next());\r\nconsole.log(next());\r\nconsole.log(next());\r\nconsole.log(next()); //每调用一次，都可以将数组指针向下移动一次\r\n```\r\n\r\n示例4： \r\n错误的示范： \r\n```javascript\r\nfunction f(){\r\n var a=[];\r\n var i;\r\n for(i=0;i<3;i++){\r\n a[i]=function(){\r\n return i;\r\n };\r\n }\r\n return a;\r\n}\r\nvar test=f();\r\nconsole.log(test[0]());\r\nconsole.log(test[1]());\r\nconsole.log(test[2]()); //结果都是 3 3 3 这种写法是错误的\r\n```\r\n正确的示范： \r\n```javascript\r\nfunction f(){\r\n var a=[];\r\n var i;\r\n for(i=0;i<3;i++){\r\n a[i]=(function(x){\r\n return function(){\r\n return x;\r\n }\r\n })(i);\r\n }\r\n return a;\r\n}\r\nvar test=f();\r\nconsole.log(test[0]());\r\nconsole.log(test[1]());\r\nconsole.log(test[2]());\r\n```\r\n\r\n示例5：对示例4的优化 \r\n```javascript\r\nfunction f(){\r\n function test(x){\r\n return function(){\r\n return x;\r\n }\r\n }\r\n var a=[];\r\n var i;\r\n for(i=0;i<3;i++){\r\n a[i]=test(i);\r\n }\r\n return a;\r\n}\r\nvar res=f();\r\nalert(res[0]());\r\nalert(res[1]());\r\nalert(res[2]());\r\n```\r\n\r\n\r\n### 1.3、关于prototype的一些理解 \r\n上面代码中出现了JS中常用的Prototype，那么Prototype有什么用呢？下面我们来看一下： \r\n```javascript\r\nvar dom = function(){\r\n \r\n};\r\n\r\ndom.Show = function(){\r\n alert(\"Show Message\");\r\n};\r\n\r\ndom.prototype.Display = function(){\r\n alert(\"Property Message\");\r\n};\r\n\r\ndom.Display(); //error\r\ndom.Show(); \r\nvar d = new dom();\r\nd.Display();\r\nd.Show(); //error\r\n```\r\n我们首先声明一个变量，将一个函数赋给他，因为在Javascript中每个函数都有一个Portotype属性，而对象没有。添加两个方法，分别直接添加和添加打破Prototype上面，来看下调用情况。分析结果如下： \r\n**1、不使用prototype属性定义的对象方法，是静态方法，只能直接用类名进行调用！另外，此静态方法中无法使用this变量来调用对象其他的属性！** \r\n**2、使用prototype属性定义的对象方法，是非静态方法，只有在实例化后才能使用！其方法内部可以this来引用对象自身中的其他属性！** \r\n\r\n\r\n下面我们再来看一段代码： \r\n```javascript\r\nvar dom = function(){\r\n var Name = \"Default\";\r\n this.Sex = \"Boy\";\r\n this.success = function(){\r\n alert(\"Success\");\r\n };\r\n };\r\n\r\n alert(dom.Name);\r\n alert(dom.Sex);\r\n```\r\n大家先看看，会显示什么呢？答案是两个都显示Undefined,为什么呢？这是由于在Javascript中每个function都会形成一个作用域，而这些变量声明在函数中，\r\n所以就处于这个函数的作用域中，外部是无法访问的。要想访问变量，就必须new一个实例出来。 \r\n\r\n\r\n\r\n```javascript\r\nvar html = {\r\n Name:'Object',\r\n Success:function(){\r\n this.Say = function(){\r\n alert(\"Hello,world\");\r\n };\r\n alert(\"Obj Success\");\r\n }\r\n };\r\n```\r\n再来看看这种写法，其实这是Javascript的一个\"语法糖\"，这种写法相当于： \r\n```javascript\r\nvar html = new Object();\r\nhtml.Name = 'Object';\r\nhtml.Success = function(){\r\n this.Say = function(){\r\n alert(\"Hello,world\");\r\n };\r\nalert(\"Obj Success\");\r\n```\r\n变量html是一个对象，不是函数，所以没有Prototype属性，其方法也都是公有方法，html不能被实例化。 \r\n但是他可以作为值赋给其它变量，如var o = html; 我们可以这样使用它： \r\n```javascript\r\nalert(html.Name);\r\nhtml.Success();\r\n```\r\n\r\n说到这里，完了吗？细心的人会问，怎么访问Success方法中的Say方法呢？是html.Success.Say()吗？ \r\n当然不是，上面刚说过由于作用域的限制，是访问不到的。所以要用下面的方法访问： \r\n```javascript\r\nvar s = new html.Success();\r\ns.Say();\r\n\r\n//还可以写到外面\r\nhtml.Success.prototype.Show = function(){\r\n alert(\"HaHa\");\r\n};\r\nvar s = new html.Success();\r\ns.Show();\r\n```\r\n\r\n##

二、Javascript闭包的用途

\r\n### 1、匿名自执行函数 \r\n我们知道所有的变量，如果不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，比如：别的函数可能误用这些变量；\r\n造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。\r\n除了每次使用变量都是用var关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变量无需维护，\r\n比如UI的初始化，那么我们可以使用闭包： \r\n```javascript\r\nvar data= { \r\n table : [], \r\n tree : {} \r\n}; \r\n \r\n(function(dm){ \r\n for(var i = 0; i < dm.table.rows; i++){ \r\n var row = dm.table.rows[i]; \r\n for(var j = 0; j < row.cells; i++){ \r\n drawCell(i, j); \r\n } \r\n } \r\n \r\n})(data);\r\n```\r\n我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在函数执行完后会立刻释放资源，关键是不污染全局对象。 \r\n\r\n\r\n### 2、结果缓存\r\n我们开发中会碰到很多情况，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，\r\n那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，然后更新缓存并返回值，如果找到了，直接返回查找到的值即可。\r\n闭包正是可以做到这一点，因为它不会释放外部的引用，从而函数内部的值可以得以保留。 \r\n```javascript\r\nvar CachedSearchBox = (function(){ \r\n var cache = {}, \r\n count = []; \r\n return { \r\n attachSearchBox : function(dsid){ \r\n if(dsid in cache){//如果结果在缓存中 \r\n return cache[dsid];//直接返回缓存中的对象 \r\n } \r\n var fsb = new uikit.webctrl.SearchBox(dsid);//新建 \r\n cache[dsid] = fsb;//更新缓存 \r\n if(count.length > 100){//保正缓存的大小<=100 \r\n delete cache[count.shift()]; \r\n } \r\n return fsb; \r\n }, \r\n \r\n clearSearchBox : function(dsid){ \r\n if(dsid in cache){ \r\n cache[dsid].clearSelection(); \r\n } \r\n } \r\n }; \r\n})(); \r\n \r\nCachedSearchBox.attachSearchBox(\"input\");\r\n```\r\n这样我们在第二次调用的时候，就会从缓存中读取到该对象。 \r\n\r\n\r\n### 3、封装 \r\n```javascript\r\nvar person = function(){ \r\n //变量作用域为函数内部，外部无法访问 \r\n var name = \"default\"; \r\n \r\n return { \r\n getName : function(){ \r\n return name; \r\n }, \r\n setName : function(newName){ \r\n name = newName; \r\n } \r\n } \r\n}(); \r\n \r\nprint(person.name);//直接访问，结果为undefined \r\nprint(person.getName()); \r\nperson.setName(\"abruzzi\"); \r\nprint(person.getName()); \r\n \r\n//得到结果如下： \r\n \r\n//undefined \r\n//default \r\n//abruzzi\r\n```\r\n\r\n\r\n### 4、实现类和继承 \r\n```javascript\r\nfunction Person(){ \r\n var name = \"default\"; \r\n \r\n return { \r\n getName : function(){ \r\n return name; \r\n }, \r\n setName : function(newName){ \r\n name = newName; \r\n } \r\n } \r\n}; \r\n\r\nvar p = new Person();\r\np.setName(\"Tom\");\r\nalert(p.getName());\r\n\r\nvar Jack = function(){};\r\n//继承自Person\r\nJack.prototype = new Person();\r\n//添加私有方法\r\nJack.prototype.Say = function(){\r\n alert(\"Hello,my name is Jack\");\r\n};\r\nvar j = new Jack();\r\nj.setName(\"Jack\");\r\nj.Say();\r\nalert(j.getName());\r\n```\r\n我们定义了Person，它就像一个类，我们new一个Person对象，访问它的方法。\r\n下面我们定义了Jack，继承Person，并添加自己的方法。 \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n",{"_58":283,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/37/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/37/timeline",{"_58":286,"_60":61,"_62":287,"_64":288,"_66":289,"_68":290,"_70":291,"_72":292,"_74":293,"_76":294,"_78":295,"_111":296,"_124":125,"_126":24,"_127":-5,"_128":298,"_130":299,"_152":137,"_146":311,"_148":312,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":313,"_164":314,"_170":315,"_172":316,"_184":318,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/34","https://api.github.com/repos/pro-collection/interview-question/issues/34/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/34/comments","https://api.github.com/repos/pro-collection/interview-question/issues/34/events","https://github.com/pro-collection/interview-question/issues/34",1611652796,"I_kwDOJGDC6c5gD968",34,"DOM事件类相关问题",{"_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},[297],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":300,"_68":301,"_62":302,"_70":303,"_72":304,"_74":153,"_76":305,"_122":306,"_140":307,"_142":308,"_144":145,"_124":125,"_146":309,"_148":310,"_150":-5,"_151":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/1","https://github.com/pro-collection/interview-question/milestone/1","https://api.github.com/repos/pro-collection/interview-question/milestones/1/labels",9124541,"MI_kwDOJGDC6c4Aizq9","初","初级面试问题",{"_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},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2023-03-06T15:20:56Z","2023-04-24T03:50:54Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"DOM事件级别、DOM事件模型、DOM事件流、DOM事件捕获的具体流程、Event对象的常见应用、自动以事件\r\n\r\n# dom 级别\r\nDOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。\r\nDOM级别其实就是标准的迭代，对于版本的称呼，类似ES5、ES6。\r\n\r\n## 1、DOM0级\r\nDOM没有被W3C定为标准之前。\r\n\r\n## 2、DOM1级\r\n1998年10月成为W3C的标准后，称为DOM1级。DOM1级由两个模块组成：DOM核心（DOM Core）和DOM HTML。其中，DOM核心规定的是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。DOM HTML模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。\r\n\r\n## 3、DOM2级\r\n在DOM1级的基础上进行了扩展。为节点添加了更多方法和属性等。\r\n添加新的模块，包括：视图、事件、范围、遍历、样式等。\r\n\r\n## 4、DOM3级\r\nDOM3级进一步扩展了DOM，增加了XPath模块、加载和保存（DOM Load and Save）模块等，开始支持XML1.0规范。\r\n\r\n\r\n\r\n\r\n# DOM事件\r\n## 1、DOM0级事件\r\nDOM0级处理事件就是将一个函数赋值给一个事件处理属性。\r\n```js\r\n \r\n \r\nvar btn = document.getElementById('btn')\r\nbtn.onclick = function() { \r\n console.log('Hello World')\r\n}\r\n// 将一个函数赋值给了一个事件处理属性onclick 这样的方法就是DOM0级。\r\n// 可以通过给事件处理属性赋值null来解绑事件。\r\n```\r\n\r\n## DOM2级事件\r\nDOM2级处理事件是在DOM0级处理事件的基础上再添加了一些处理程序。\r\n\r\n- 可以同时绑定多个事件处理函数。\r\n- 定义了 addEventListener 和 removeEventListener 两个方法。\r\n```js\r\nelement.addEventListener(eventName, fn, useCapture)\r\n// 第三个参数 useCapture：指定事件是否在捕获或冒泡阶段执行。布尔值，可选，默认false\r\n// 可能值：true - 事件句柄在捕获阶段执行；false- 默认。事件句柄在冒泡阶段执行\r\n\r\n \r\n \r\nvar btn = document.getElementById('btn')\r\nfunction showFn() { \r\n alert('Hello World')\r\n}\r\nfunction LogFn() { \r\n alert('Hello World')\r\n}\r\n// 同时绑定多个事件处理函数\r\nbtn.addEventListener('click', showFn);\r\nbtn.addEventListener('click', LogFn);\r\n\r\n// 解绑事件 \r\nbtn.removeEventListener('click', showFn); \r\n```\r\n\r\n## DOM3级事件\r\nDOM3级处理事件是在DOM2级处理事件的基础上再添加了很多事件类型。\r\n\r\n- UI事件，当用户与页面上的元素交互时触发，如：`load`、`scroll`\r\n- 焦点事件，当元素获得或失去焦点时触发，如：`blur`、`focus`\r\n- 鼠标事件，当用户通过鼠标在页面执行操作时触发如：`dbclick`、`mouseup`\r\n- 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：`mousewheel`\r\n- 文本事件，当在文档中输入文本时触发，如：`textInput`\r\n- 键盘事件，当用户通过键盘在页面上执行操作时触发，如：`keydown`、`keypress`\r\n- 合成事件，当为IME（输入法编辑器）输入字符时触发，如：`compositionstart`\r\n- 变动事件，当底层DOM结构发生变化时触发，如：`DOMsubtreeModified`\r\n\r\n同时DOM3级事件也允许使用者自定义一些事件。\r\n\r\n\r\n# 事件模型\r\n捕获（从上到下）、冒泡（从下到上）；\r\n\r\n\r\n# 事件流\r\n用户和浏览器做交互的过程中，事件的传递，比如点击左键，怎么传递到页面上的。\r\n\r\n捕获->目标阶段->冒泡\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n 事件冒泡\r\n\r\n\r\n

\r\n 我是父元素\r\n 我是子元素\r\n

\r\n\r\n\r\n\r\n```\r\n当点击父元素：父级捕获 -> 父级冒泡\r\n当点击子元素：父级捕获 -> 子级捕获 -> 子级冒泡 -> 父级冒泡\r\n",{"_58":317,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/34/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/34/timeline",{"_58":320,"_60":61,"_62":321,"_64":322,"_66":323,"_68":324,"_70":325,"_72":326,"_74":327,"_76":328,"_78":329,"_111":330,"_124":125,"_126":24,"_127":-5,"_128":332,"_130":333,"_152":145,"_146":335,"_148":336,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":337,"_164":338,"_170":339,"_172":340,"_184":342,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/32","https://api.github.com/repos/pro-collection/interview-question/issues/32/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/32/comments","https://api.github.com/repos/pro-collection/interview-question/issues/32/events","https://github.com/pro-collection/interview-question/issues/32",1611652612,"I_kwDOJGDC6c5gD94E",32,"解释一下原型、构造函、实例、原型链之间的关系？",{"_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},[331],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":300,"_68":301,"_62":302,"_70":303,"_72":304,"_74":153,"_76":305,"_122":306,"_140":334,"_142":308,"_144":145,"_124":125,"_146":309,"_148":310,"_150":-5,"_151":-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-03-06T15:20:50Z","2023-03-06T15:20:51Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"# 创建对象有哪几种方式？\r\n\r\n```js\r\n// 面向字面量\r\nvar o1={name:'01'};\r\nvar o11=new Object({name:'o11'});\r\n\r\n// 使用显示的构造函数：\r\nvar M=function(){this.name='02'};\r\nvar o2=new M();\r\n\r\n// 通过Object.create()创建\r\nvar P={name:'o3'};\r\nvar o3=Object.create(P)\r\n```\r\n\r\n# 解释一下原型、构造函、实例、原型链之间的关系？\r\n![01_01](https://user-images.githubusercontent.com/22188674/221917767-022a2d09-3539-4e54-a462-34299be8eb0b.png)\r\n\r\n## 1、基础 \r\n构造函数可以通过new来生成一个实例、构造函数也是函数； \r\n函数都有一个prototype属性，这个就是原型对象； \r\n原型对象可以通过构造器constructor来指向它的构造函数； \r\n实例的__proto__属性，指向的是其构造函数的原型对象； \r\n\r\n\r\n**原型链**：从一个实例对象，向上找构造这个实例相关联的对象，相关联的对象又向上找，找到创造它的一个实例对象，\r\n一直到Object.prototype截止。原型链是通过prototype和__proto__向上找的。构造函数通过prototype创建了很多方法，\r\n被其所有实例所公用，存放在原型对象上； \r\n\r\n例子：\r\n```javascript\r\nvar M=function(name){this.name=name};\r\nvar o3=new M('o3');\r\n```\r\n\r\n当我们需要扩展实例的时候，我们可以对构造函数添加方法，但是这样会创建每一个实例都拷贝一份它自己的添加的方法，\r\n占用内存，而且也没有必要，这个时候就可以新添加的方法写进原型里面去，添加到原型链中去，\r\n在实例的原型链中我们可以在原型对象上找到添加的方法；\r\n\r\n```javascript\r\nvar M=function(name){this.name=name};\r\nvar o3=new M('o3');\r\nM.prototype.say=function(){\r\nConsole.log('say hi');\r\n};\r\nvar o5=new M('o5');\r\n```\r\n\r\n通过这种方式o3和o5都有say方法；原型链的优势是原型对象的方法是被所有实例共有的；\r\n\r\n当访问一个实例方法的时候，首先在实例本身找这个方法，如果没有找到就会到其构建函数的原型对象去找，如果还是没有找到，\r\n那么它会继续通过原型链在原型对象的更上一级查找，一直到object.prototype;\r\n\r\n一定要记住只有函数才有proptotype,对象是没有的；\r\n\r\n只有实例对象又__proto__ , 因为函数也是对象，所以函数也有__proto__ , 但是和实例对象的__proto__是有区别的，函数的__proto__是function这个对象的构造实例；\r\n\r\n\r\n## 2、instanceof 原理\r\n\r\n实例对象上面有一个__proto__ ，这个是引用的它构造函数的原型对象；\r\n\r\ninstanceof是用来判断实例是不是由某个构造函数实例化出来的对象，其原理是判断实例对象是否指向构造函数的原型；\r\n只要是在原型链上的函数，都会被instanceof看做是实例对象的一个构造函数，所以都会返回true;\r\n\r\n```\r\nm1.__proto__===m1.prototype;返回true\r\nm1.prototype.__proto===Object.prototype;返回true\r\n\r\no3.__proto__.constructor===Object;//返回false\r\n所以我们判断一个实例对象的构造函数，用constructor;\r\n```\r\n\r\n## 3、new 运算符\t\t\r\n后面跟着的是一个构造函数\r\n\r\n一个新对象被创建。它继承自 foo.prototype-> \r\n构造函数foo会被执行，执行的时候，相应的传参会被传入，同时上下文（this）会被指定为这个新实例。\tnew foo等同于new foo(),只能在不传递任何参数的情况-> \r\n如果构造函数返回了一个‘对象’，那么这个对象会取代整个new 出来的结果。如果构造函数没有返回值，\t那么new出来的结果为步骤1创建的对象\r\n\r\n## 4、Object.create()\r\n创建的实例对象是指向的对象原型，实例对象本身是不具备创建对象的属性和方法的，是通过原型链来链接的。\r\n\r\n\r\n\r\n\r\n",{"_58":341,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/32/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/32/timeline",{"_58":344,"_60":61,"_62":345,"_64":346,"_66":347,"_68":348,"_70":349,"_72":350,"_74":351,"_76":352,"_78":353,"_111":354,"_124":125,"_126":24,"_127":-5,"_128":356,"_130":357,"_152":145,"_146":359,"_148":360,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":361,"_164":362,"_170":363,"_172":364,"_184":366,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/31","https://api.github.com/repos/pro-collection/interview-question/issues/31/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/31/comments","https://api.github.com/repos/pro-collection/interview-question/issues/31/events","https://github.com/pro-collection/interview-question/issues/31",1611652516,"I_kwDOJGDC6c5gD92k",31,"JS 中继承方式有哪些？",{"_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},[355],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":300,"_68":301,"_62":302,"_70":303,"_72":304,"_74":153,"_76":305,"_122":306,"_140":358,"_142":308,"_144":145,"_124":125,"_146":309,"_148":310,"_150":-5,"_151":-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-03-06T15:20:47Z","2023-03-29T08:35:16Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"### 1、借助构造函数实现继承\r\n\r\ncall和apply改变的是JS运行的上下文: \r\n```javascript\r\n/*借助构造函数实现继承*/\r\nfunction Parent(name) {\r\n this.name = name;\r\n this.getName = function () {\r\n console.log(this.name);\r\n }\r\n}\r\n\r\nfunction Child(name) {\r\n Parent.call(this, name);\r\n this.type = 'child1'\r\n}\r\n\r\nlet child = new Child('yanle');\r\nchild.getName();\r\nconsole.log(child.type);\r\n```\r\n父类的this指向到了子类上面去，改变了实例化的this 指向，导致了父类执行的属性和方法，都会挂在到\t子类实例上去； \r\n缺点：父类原型链上的东西并没有被继承；\r\n\r\n\r\n### 2、通过原型链实现继承\r\n```javascript\r\n/*通过原型链实现继承*/\r\nfunction Parent2(){\r\n this.name='parent2'\r\n}\r\n\r\nfunction Child2(){\r\n this.type='child2'\r\n}\r\n\r\nChild2.prototype=new Parent2();\r\nconsole.log(new Child2());\r\n```\r\n\r\nChild2.prototype是Child2构造函数的一个属性，这个时候prototype被赋值了parent2的一个实例，实例化了新的对象Child2()的时候，\r\n会有一个__proto__属性，这个属性就等于起构造函数的原型对象，但是原型对象被赋值为了parent2的一个实例，\r\n所以new Child2的原型链就会一直向上找parent2的原型\r\n\r\nvar s1=new Child2(); \r\nvar s2=new Child2(); \r\ns1.__proto__===s2.__proto__;//返回true \r\n\r\n缺点：通过子类构造函数实例化了两个对象，当一个实例对象改变其构造函数的属性的时候，\r\n那么另外一个实例对象上的属性也会跟着改变（期望的是两个对象是隔离的赛）；原因是构造函数的原型对象是公用的；\r\n\r\n\r\n### 3、组合方式\r\n```javascript\r\n/*组合方式*/\r\nfunction Parent3(){\r\n this.name='parent3';\r\n this.arr=[1,2,3];\r\n}\r\n\r\nfunction Child3(){\r\n Parent3.call(this);\r\n this.type='child';\r\n}\r\n\r\nChild3.prototype=new Parent3();\r\nvar s3=new Child3();\r\nvar s4=new Child3();\r\ns3.arr.push(4);\r\nconsole.log(s3,s4);\r\n```\r\n\r\n**优点:**这是最通用的使用方法，集合了上面构造函数继承，原型链继承两种的优点。 \r\n**缺点:**父类的构造函数执行了2次，这是没有必要的， \r\nconstructor指向了parent了\r\n\r\n\r\n### 4、组合继承的优化\r\n```javascript\r\n/*组合继承的优化1*/\r\nfunction Parent4(){\r\n this.name='parent3';\r\n this.arr=[1,2,3];\r\n}\r\n\r\nfunction Child4(){\r\n Parent4.call(this);\r\n this.type='child5';\r\n}\r\n\r\nChild4.prototype=Parent4.prototype;\r\nvar s5=new Child4();\r\nvar s6=new Child4()\r\n```\r\n\r\n**缺点：**s5 instaceof child4 //true, s5 instanceof Parent4//true \r\n我们无法区分一个实例对象是由其构造函数实例化，还是又其构造函数的父类实例化的 \r\ns5.constructor 指向的是Parent4;//原因是子类原型对象的constructor 被赋值为了父类原型对象的\tconstructor,所以我们使用constructor的时候，肯定是指向父类的 \r\nChild3.constructor 也有这种情况 \r\n\r\n### 5、组合继承的优化2\r\n```javascript\r\nfunction Parent5() {\r\n this.name = 'parent5';\r\n this.play = [1, 2, 3];\r\n}\r\n\r\nfunction Child5() {\r\n Parent5.call(this);\r\n this.type = 'child5'\r\n}\r\n\r\nChild5.prototype = Object.create(Parent5.prototype);\r\n//这个时候虽然隔离了，但是constructor还是只想的Parent5的，因为constructor会一直向上找\r\nChild5.prototype.constructor=Child5;\r\n\r\nvar s7=new Child5();\r\nconsole.log(s7 instanceof Child5,s7 instanceof Parent5);\r\nconsole.log(s7.constructor);\r\n```\r\n\r\n通过Object.create来创建原型中间对象，那么这么来的话，chiild5的对象prototype获得的是parent5\t父类的原型对象； \r\nObject.create创建的对象，原型对象就是参数； \r\n \r\n \r\n### 6、ES 中的继承\r\nClass 可以通过extends关键字实现继承，让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承，要清晰和方便很多。\r\n```js\r\nclass Point { /* ... */ }\r\n\r\nclass ColorPoint extends Point {\r\n constructor(x, y, color) {\r\n super(x, y); // 调用父类的constructor(x, y)\r\n this.color = color;\r\n }\r\n\r\n toString() {\r\n return this.color + ' ' + super.toString(); // 调用父类的toString()\r\n }\r\n}\r\n```\r\n\r\n\r\n\r\n",{"_58":365,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/31/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/31/timeline",{"_58":368,"_60":61,"_62":369,"_64":370,"_66":371,"_68":372,"_70":373,"_72":374,"_74":375,"_76":376,"_78":377,"_111":378,"_124":125,"_126":24,"_127":-5,"_128":380,"_130":381,"_152":145,"_146":383,"_148":384,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":385,"_164":386,"_170":387,"_172":388,"_184":390,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/30","https://api.github.com/repos/pro-collection/interview-question/issues/30/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/30/comments","https://api.github.com/repos/pro-collection/interview-question/issues/30/events","https://github.com/pro-collection/interview-question/issues/30",1611652422,"I_kwDOJGDC6c5gD91G",30,"实现一个双向链表，具备添加节点、删除节点、在特定位置插入节点、查找节点、遍历等功能",{"_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},[379],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":382,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-06T15:20:44Z","2023-03-06T15:20:45Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"# 必须要掌握的知识\r\n在 JavaScript 中实现双向链表需要掌握以下知识点：\r\n\r\n- 如何使用构造函数和类创建双向链表节点，以及如何在节点之间建立双向连接。\r\n\r\n- 双向链表的常用操作，包括`添加节点、删除节点、在特定位置插入节点、查找节点`等。\r\n\r\n- 双向链表的遍历和迭代，包括`正向遍历、反向遍历、循环遍历`等。\r\n\r\n- 链表的常见问题，例如`链表是否为空、链表长度、查找节点`等。\r\n\r\n- 对 JavaScript 垃圾回收机制的理解，确保双向链表的实现不会导致内存泄漏。\r\n\r\n以上知识点是实现双向链表所必须掌握的内容，掌握这些知识点能够帮助我们有效地创建和操作双向链表。\r\n\r\n## 什么是双向链表\r\n\r\n双向链表（Doubly linked list）是一种常见的数据结构，它是由一系列节点组成的，每个节点都包含一个指向前驱节点和后继节点的指针。相比单向链表，双向链表具有双向遍历的能力，即可以从任意一个节点开始，向前或向后遍历整个链表。\r\n\r\n双向链表的每个节点通常包含两个指针，即 prev 指针和 next 指针。prev 指针指向当前节点的前驱节点，而 next 指针指向当前节点的后继节点。由于每个节点都包含两个指针，因此双向链表的节点通常比单向链表的节点更占用空间。\r\n\r\n双向链表可以用于实现各种数据结构和算法，如LRU（Least Recently Used）缓存淘汰算法，双向队列（Deque）等。由于它具有双向遍历的能力，因此在某些场景下可以比单向链表更加高效和方便。\r\n\r\n\r\n## 实现一个双向链表\r\n```js\r\nclass Node {\r\n constructor(value) {\r\n this.value = value;\r\n this.next = null;\r\n this.prev = null;\r\n }\r\n}\r\n\r\nclass DoublyLinkedList {\r\n constructor() {\r\n this.head = null;\r\n this.tail = null;\r\n this.length = 0;\r\n }\r\n\r\n // 在链表末尾添加节点\r\n push(value) {\r\n const node = new Node(value);\r\n if (this.length === 0) {\r\n this.head = node;\r\n this.tail = node;\r\n } else {\r\n this.tail.next = node;\r\n node.prev = this.tail;\r\n this.tail = node;\r\n }\r\n this.length++;\r\n return this;\r\n }\r\n\r\n // 从链表末尾移除节点\r\n pop() {\r\n if (this.length === 0) {\r\n return undefined;\r\n }\r\n const node = this.tail;\r\n if (this.length === 1) {\r\n this.head = null;\r\n this.tail = null;\r\n } else {\r\n this.tail = node.prev;\r\n this.tail.next = null;\r\n node.prev = null;\r\n }\r\n this.length--;\r\n return node.value;\r\n }\r\n\r\n // 在链表开头添加节点\r\n unshift(value) {\r\n const node = new Node(value);\r\n if (this.length === 0) {\r\n this.head = node;\r\n this.tail = node;\r\n } else {\r\n this.head.prev = node;\r\n node.next = this.head;\r\n this.head = node;\r\n }\r\n this.length++;\r\n return this;\r\n }\r\n\r\n // 从链表开头移除节点\r\n shift() {\r\n if (this.length === 0) {\r\n return undefined;\r\n }\r\n const node = this.head;\r\n if (this.length === 1) {\r\n this.head = null;\r\n this.tail = null;\r\n } else {\r\n this.head = node.next;\r\n this.head.prev = null;\r\n node.next = null;\r\n }\r\n this.length--;\r\n return node.value;\r\n }\r\n\r\n // 获取指定位置的节点\r\n get(index) {\r\n if (index < 0 || index >= this.length) {\r\n return undefined;\r\n }\r\n let node = null;\r\n if (index < this.length / 2) {\r\n node = this.head;\r\n for (let i = 0; i < index; i++) {\r\n node = node.next;\r\n }\r\n } else {\r\n node = this.tail;\r\n for (let i = this.length - 1; i > index; i--) {\r\n node = node.prev;\r\n }\r\n }\r\n return node;\r\n }\r\n\r\n // 在指定位置插入节点\r\n insert(index, value) {\r\n if (index < 0 || index > this.length) {\r\n return false;\r\n }\r\n if (index === 0) {\r\n return !!this.unshift(value);\r\n }\r\n if (index === this.length) {\r\n return !!this.push(value);\r\n }\r\n const node = new Node(value);\r\n const prevNode = this.get(index - 1);\r\n const nextNode = prevNode.next;\r\n prevNode.next = node;\r\n node.prev = prevNode;\r\n node.next = nextNode;\r\n nextNode.prev = node;\r\n this.length++;\r\n return true;\r\n }\r\n\r\n // 移除指定位置的节点\r\n remove(index) {\r\n if (index < 0 || index >= this.length) {\r\n return undefined;\r\n }\r\n if (index === 0) {\r\n return this.shift();\r\n }\r\n if (index === this.length - 1) {\r\n return this.pop();\r\n }\r\n const nodeToRemove = this.get(index);\r\n const prevNode = nodeToRemove.prev;\r\n const nextNode = nodeToRemove.next;\r\n prevNode.next = nextNode;\r\n nextNode.prev = prevNode;\r\n nodeToRemove.next = null;\r\n nodeToRemove.prev = null;\r\n this.length--;\r\n return nodeToRemove.value;\r\n }\r\n\r\n // 反转链表\r\n reverse() {\r\n let node = this.head;\r\n this.head = this.tail;\r\n this.tail = node;\r\n let prevNode = null;\r\n let nextNode = null;\r\n for (let i = 0; i < this.length; i++) {\r\n nextNode = node.next;\r\n node.next = prevNode;\r\n node.prev = nextNode;\r\n prevNode = node;\r\n node = nextNode;\r\n }\r\n return this;\r\n }\r\n\r\n // 通过 value 来查询 index\r\n findIndexByValue(value) {\r\n let currentNode = this.head;\r\n let index = 0;\r\n\r\n while (currentNode) {\r\n if (currentNode.value === value) {\r\n return index;\r\n }\r\n currentNode = currentNode.next;\r\n index++;\r\n }\r\n\r\n return -1; // 如果链表中没有找到该值，返回 -1\r\n }\r\n\r\n // 正向遍历链表，并返回遍历结果\r\n forwardTraversal() {\r\n const result = [];\r\n let current = this.head;\r\n while (current) {\r\n result.push(current.value);\r\n current = current.next;\r\n }\r\n return result;\r\n }\r\n\r\n // 反向遍历链表，并返回遍历结果\r\n backwardTraversal() {\r\n const result = [];\r\n let current = this.tail;\r\n while (current) {\r\n result.push(current.value);\r\n current = current.prev;\r\n }\r\n return result;\r\n }\r\n\r\n // 循环遍历链表，并返回遍历结果\r\n loopTraversal() {\r\n const result = [];\r\n let current = this.head;\r\n while (current) {\r\n result.push(current.value);\r\n current = current.next;\r\n if (current === this.head) {\r\n break;\r\n }\r\n }\r\n return result;\r\n }\r\n}\r\n```\r\n",{"_58":389,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/30/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/30/timeline",{"_58":392,"_60":61,"_62":393,"_64":394,"_66":395,"_68":396,"_70":397,"_72":398,"_74":399,"_76":400,"_78":401,"_111":402,"_124":125,"_126":24,"_127":-5,"_128":404,"_130":405,"_152":145,"_146":407,"_148":408,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":409,"_164":410,"_170":411,"_172":412,"_184":414,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/24","https://api.github.com/repos/pro-collection/interview-question/issues/24/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/24/comments","https://api.github.com/repos/pro-collection/interview-question/issues/24/events","https://github.com/pro-collection/interview-question/issues/24",1611651803,"I_kwDOJGDC6c5gD9rb",24,"JS数据类型有哪些，区别是什么？",{"_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},[403],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":300,"_68":301,"_62":302,"_70":303,"_72":304,"_74":153,"_76":305,"_122":306,"_140":406,"_142":308,"_144":145,"_124":125,"_146":309,"_148":310,"_150":-5,"_151":-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-03-06T15:20:26Z","2024-08-17T11:16:17Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"在 JavaScript 中，数据类型可以分为两类：**原始类型和对象类型**。原始类型包括：数字（number）、字符串（string）、布尔值（boolean）、null、undefined 和 Symbol（ES6 新增），对象类型包括：对象（object）、数组（array）、函数（function）等。\r\n\r\n区别如下：\r\n\r\n- 原始类型的值是不可变的，对象类型的值是可变的。\r\n- 原始类型的值是按值访问的，对象类型的值是按引用访问的。 \r\n- 原始类型存储在栈内存中，对象类型存储在堆内存中。\r\n\r\n\r\n**原始类型**：\r\n具体来说，**数字、字符串、布尔值、null 和 undefined 是 JavaScript 中的五种原始类型，它们都是不可变的**。每次对原始类型进行操作时，都会创建一个新的原始类型的值。例如：\r\n```js\r\nlet num1 = 10;\r\nlet num2 = num1 + 5;\r\nconsole.log(num1); // 10\r\nconsole.log(num2); // 15\r\n```\r\n\r\n在上面的例子中，对 num1 进行操作时并没有改变 num1 的值，而是创建了一个新的值 num2。\r\n\r\n\r\n**对象类型**：\r\n对象类型则是可变的，因为对象、数组、函数等值是通过引用来访问的。例如：\r\n\r\n```ts\r\nlet obj1 = { name: '张三' };\r\nlet obj2 = obj1;\r\nobj2.name = '李四';\r\nconsole.log(obj1.name); // \"李四\"\r\nconsole.log(obj2.name); // \"李四\"\r\n```\r\n在上面的例子中，修改了 obj2 的属性值，但由于 obj1 和 obj2 指向的是同一个对象，所以 obj1 的属性值也被修改了。\r\n\r\n\r\n**Symbol**：\r\n除了五种原始类型和对象类型外，ES6 新增了一种原始类型：`Symbol`。它的主要作用是创建唯一的标识符。例如：\r\n```js\r\nlet s1 = Symbol();\r\nlet s2 = Symbol();\r\nconsole.log(s1 === s2); // false\r\n```\r\n在上面的例子中，两个 Symbol 创建的值是不相等的，即使它们的值是一样的。\r\n\r\n\r\n------\r\n> 作者 2024.08.17 补充\r\n\r\n另外值得注意的是，ES6 还引入了一些新的对象类型或结构，例如 `Map`、`Set`、`WeakMap` 和 `WeakSet`，以及为了更好地处理异步操作引入的 Promise 和生成器对象。这些都属于扩展的 Object 类型，增强了 JavaScript 的功能性和异步编程能力。\r\n",{"_58":413,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/24/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/24/timeline",{"_58":416,"_60":61,"_62":417,"_64":418,"_66":419,"_68":420,"_70":421,"_72":422,"_74":423,"_76":424,"_78":425,"_111":426,"_124":125,"_126":24,"_127":-5,"_128":428,"_130":429,"_152":145,"_146":431,"_148":432,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":433,"_164":434,"_170":435,"_172":436,"_184":438,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/23","https://api.github.com/repos/pro-collection/interview-question/issues/23/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/23/comments","https://api.github.com/repos/pro-collection/interview-question/issues/23/events","https://github.com/pro-collection/interview-question/issues/23",1611651706,"I_kwDOJGDC6c5gD9p6",23,"详细讲一下 Symbol 数据类型特征与实际使用案例？",{"_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},[427],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":430,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-06T15:20:23Z","2023-03-06T15:20:25Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"## Symbol 概要简介\nSymbol 是 ECMAScript 6 引入的一种新的原始数据类型，用来表示独一无二的值。每个 Symbol 值都是唯一的，因此可以用来创建一些独特的标识符。\n\n## 定义\nSymbol 的定义非常简单，只需要调用 Symbol() 方法即可，例如：\n```js\nconst mySymbol = Symbol();\n```\n\n在使用 Symbol 的时候，可以给它传递一个可选的描述信息，用于标识 Symbol 的含义，例如：\n```js\nconst mySymbol = Symbol('my symbol');\n```\n\n\n## 使用场景\n\n### 常量的定义\n由于每个 Symbol 的值都是唯一的，因此可以用它来定义常量，避免不小心修改值。例如：\n```js\nconst MY_CONST = Symbol('my_const')\n```\n\n### Symbol 值可以作为对象的属性名，用来避免属性名冲突\n例如：\n```js\nconst obj = {};\nconst mySymbol = Symbol('my symbol');\nobj[mySymbol] = 'hello';\nconsole.log(obj[mySymbol]); // 输出：'hello'\n```\n\n\n### 在使用 Symbol 的时候，可以结合 Object.defineProperty() 方法来定义一个只读的属性\n例如：\n```js\nconst obj = {};\nconst mySymbol = Symbol('my symbol');\nObject.defineProperty(obj, mySymbol, {\n value: 'hello',\n writable: false\n});\nconsole.log(obj[mySymbol]); // 输出：'hello'\nobj[mySymbol] = 'world';\nconsole.log(obj[mySymbol]); // 输出：'hello'\n```\n\n### 还可以使用 Symbol.for() 方法创建一个可共享的 Symbol 值 \n例如：\n```js\nconst s1 = Symbol.for('foo');\nconst s2 = Symbol.for('foo');\nconsole.log(s1 === s2); // 输出：true\n```\n在上述示例中，虽然 s1 和 s2 的值不同，但是它们所表示的含义相同，因此可以认为它们是相等的。这种通过 Symbol.for() 方法创建的 Symbol 值，会被保存在一个全局的 Symbol 注册表中，可以被不同的代码块访问到。\n\n\n### 私有属性的定义 \n由于 Symbol 值是唯一的，因此可以用它来模拟私有属性的概念，防止属性名冲突。例如：\n```js\nconst _myPrivateProp = Symbol('my_private_prop')\nclass MyClass {\n constructor() {\n this[_myPrivateProp] = 'private value'\n}\ngetPrivateValue() {\n return this[_myPrivateProp]\n }\n}\n```\n在这个例子中，_myPrivateProp 就是一个 Symbol 值，用于存储私有属性的值，它无法被外部访问到，只能通过类的方法来获取它的值。\n\n### 自定义迭代器\nSymbol 还可以用于自定义迭代器，例如：\n```js\nconst myIterable = {\n [Symbol.iterator]: function* () {\n yield 1\n yield 2\n yield 3\n }\n}\nfor (let value of myIterable) {\n console.log(value)\n}\n// Output: 1 2 3\n```\n在这个例子中，我们使用了 Symbol.iterator 来定义了一个自定义的迭代器，这个迭代器可以被 for...of 循环调用来遍历对象的属性值。\n\n\n## 总结\n总之，`Symbol` 的主要用途是创建独一无二的属性名，用来避免属性名冲突。\n在实际开发中，可以将 `Symbol` 作为对象的属性名来定义一些特殊的行为，例如迭代器、生成器等，这些都是 `Symbol` 的实际使用案例。\n\n",{"_58":437,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/23/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/23/timeline",{"_58":440,"_60":61,"_62":441,"_64":442,"_66":443,"_68":444,"_70":445,"_72":446,"_74":447,"_76":448,"_78":449,"_111":450,"_124":125,"_126":24,"_127":-5,"_128":452,"_130":453,"_152":145,"_146":455,"_148":456,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":457,"_164":458,"_170":459,"_172":460,"_184":462,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/22","https://api.github.com/repos/pro-collection/interview-question/issues/22/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/22/comments","https://api.github.com/repos/pro-collection/interview-question/issues/22/events","https://github.com/pro-collection/interview-question/issues/22",1611651616,"I_kwDOJGDC6c5gD9og",22,"js 对象可以使用 for...of 迭代吗？",{"_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},[451],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":454,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-06T15:20:20Z","2024-01-14T16:09:31Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"JavaScript **对象本身并不能直接使用 for...of 迭代**，因为它并不是一个可迭代对象（iterable）。\r\n\r\n但是，如果我们想要遍历对象的属性，可以使用 for...in 循环，例如：\r\n```js\r\nconst obj = {\r\n name: 'John',\r\n age: 30,\r\n city: 'New York'\r\n};\r\n\r\nfor (let prop in obj) {\r\n console.log(prop + ': ' + obj[prop]);\r\n}\r\n\r\n// 这段代码可以输出：\r\nname: John\r\nage: 30\r\ncity: New York\r\n```\r\n\r\n需要注意的是，for...in 循环会遍历对象自身的所有可枚举属性，包括非数字键和继承的属性。如果只想遍历对象自身的属性，可以使用 hasOwnProperty() 方法进行判断，例如：\r\n```js\r\nconst obj = {\r\n name: 'John',\r\n age: 30,\r\n city: 'New York'\r\n};\r\n\r\nfor (let prop in obj) {\r\n if (obj.hasOwnProperty(prop)) {\r\n console.log(prop + ': ' + obj[prop]);\r\n }\r\n}\r\n```\r\n\r\n这段代码和上面的代码功能是一样的，但是多了一个 hasOwnProperty() 判断，可以确保只输出对象自身的属性。\r\n\r\n\r\n",{"_58":461,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/22/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/22/timeline",{"_58":464,"_60":61,"_62":465,"_64":466,"_66":467,"_68":468,"_70":469,"_72":470,"_74":471,"_76":472,"_78":473,"_111":474,"_124":125,"_126":24,"_127":-5,"_128":476,"_130":477,"_152":145,"_146":479,"_148":480,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":481,"_164":482,"_170":483,"_172":484,"_184":486,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/21","https://api.github.com/repos/pro-collection/interview-question/issues/21/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/21/comments","https://api.github.com/repos/pro-collection/interview-question/issues/21/events","https://github.com/pro-collection/interview-question/issues/21",1611651522,"I_kwDOJGDC6c5gD9nC",21,"如何使对象 iterable 化，以其可以支持 for...of 迭代",{"_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},[475],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":478,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-06T15:20:17Z","2023-03-06T15:20:18Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"在 JavaScript 中，如果一个对象要被 for...of 迭代，那么它必须是可迭代的。可迭代对象是一种具有 Symbol.iterator 方法的对象，该方法返回一个迭代器对象，该迭代器对象实现了 next() 方法，每次调用 next() 方法都返回一个包含 value 和 done 属性的对象，用于迭代对象的每个元素。\n\n因此，要使一个对象 iterable 化，需要实现一个 Symbol.iterator 方法。该方法应该返回一个迭代器对象，这个迭代器对象应该实现 next() 方法，用于返回迭代对象的每个元素。\n\n**举一个例子**下面是一个简单的示例，演示如何将一个普通对象 iterable 化：\n```js\nconst myObj = {\n data: [1, 2, 3],\n [Symbol.iterator]() {\n let index = 0;\n return {\n next: () => {\n if (index < this.data.length) {\n return { value: this.data[index++], done: false };\n } else {\n return { done: true };\n }\n },\n };\n },\n};\n\nfor (const item of myObj) {\n console.log(item);\n}\n// 输出：1, 2, 3\n```\n\n**再举一个例子**，比如我们有一个对象，里面存储了一些学生的信息，我们希望能够使用 for...of 循环遍历每个学生信息：\n```js\nconst students = {\n Alice: { age: 18, gender: 'female', score: 90 },\n Bob: { age: 19, gender: 'male', score: 85 },\n Charlie: { age: 20, gender: 'male', score: 95 }\n};\n\nstudents[Symbol.iterator] = function* () {\n const keys = Object.keys(this);\n for (let i = 0; i < keys.length; i++) {\n yield [keys[i], this[keys[i]]];\n }\n};\n\nfor (const [name, info] of students) {\n console.log(`${name}: ${info.age} ${info.gender} ${info.score}`);\n}\n```\n\n这样我们就可以使用 for...of 循环遍历学生信息对象中的每个学生信息了。\n\n",{"_58":485,"_175":153,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":153},"https://api.github.com/repos/pro-collection/interview-question/issues/21/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/21/timeline",{"_58":488,"_60":61,"_62":489,"_64":490,"_66":491,"_68":492,"_70":493,"_72":494,"_74":495,"_76":496,"_78":497,"_111":498,"_124":125,"_126":24,"_127":-5,"_128":500,"_130":501,"_152":145,"_146":503,"_148":479,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":504,"_164":505,"_170":506,"_172":507,"_184":509,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/20","https://api.github.com/repos/pro-collection/interview-question/issues/20/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/20/comments","https://api.github.com/repos/pro-collection/interview-question/issues/20/events","https://github.com/pro-collection/interview-question/issues/20",1611651346,"I_kwDOJGDC6c5gD9kS",20,"JS 有哪些迭代器，该如何使用？",{"_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},[499],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":502,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-06T15:20:12Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"\n## 迭代器分类\n在 JavaScript 中，有三种类型的迭代器：\n\n- **Array Iterator（数组迭代器）**：通过对数组进行迭代以访问其元素。\n\n- **String Iterator（字符串迭代器）**：通过对字符串进行迭代以访问其字符。\n\n- **Map Iterator（映射迭代器）和 Set Iterator（集合迭代器）**：通过对 Map 和 Set 数据结构进行迭代以访问其键和值。\n\n此外，在 ES6 中，我们还可以使用自定义迭代器来迭代对象中的元素。我们可以使用 Symbol.iterator 方法来创建自定义迭代器，该方法返回一个具有 next 方法的迭代器对象。\n\n另外，`Generator` 函数可以看作是一种特殊的迭代器，它能够暂停执行和恢复执行，使得我们可以通过控制迭代器的执行来生成序列。\n\n## Array Iterator（数组迭代器）有哪些迭代方法？\n\nArray Iterator（数组迭代器）是针对 JavaScript 数组的迭代器，它可以通过 `Array.prototype[Symbol.iterator]()` 方法来获取。\n\n获取到数组迭代器后，我们可以使用以下迭代方法：\n\n`next()`: 返回一个包含 value 和 done 属性的对象，value 表示下一个元素的值，done 表示是否迭代结束。\n\n`return()`: 用于提前终止迭代，并返回给定的值。\n\n`throw()`: 用于向迭代器抛出一个异常。\n\n下面是一个使用迭代器的示例代码：\n```js\nconst arr = ['a', 'b', 'c'];\nconst iterator = arr[Symbol.iterator]();\n\nconsole.log(iterator.next()); // { value: 'a', done: false }\nconsole.log(iterator.next()); // { value: 'b', done: false }\nconsole.log(iterator.next()); // { value: 'c', done: false }\nconsole.log(iterator.next()); // { value: undefined, done: true }\n```\n\n除了以上的迭代方法，还可以通过 for...of 语句来使用迭代器，如下所示：\n```js\nconst arr = ['a', 'b', 'c'];\nfor (const item of arr) {\n console.log(item);\n}\n// output:\n// a\n// b\n// c\n```\n\n另外，数组迭代器除了上述的迭代方法，还可以使用 forEach()、map()、filter()、reduce() 等常见数组方法进行迭代操作；\n\n## String Iterator（字符串迭代器）有哪些迭代方法？\n`String Iterator` 是 ES6 引入的一种迭代器，可以用于遍历字符串。String Iterator 没有自己的迭代方法，但可以使用通用的迭代方法。以下是 String Iterator 可以使用的迭代方法：\n\n`next()`：返回迭代器的下一个值，格式为 {value: string, done: boolean}。\n`Symbol.iterator`：返回一个迭代器对象，可以使用 for...of 循环来遍历字符串。\n\n示例代码如下：\n```js\nconst str = \"hello\";\nconst strIterator = str[Symbol.iterator]();\n\nconsole.log(strIterator.next()); // { value: 'h', done: false }\nconsole.log(strIterator.next()); // { value: 'e', done: false }\nconsole.log(strIterator.next()); // { value: 'l', done: false }\nconsole.log(strIterator.next()); // { value: 'l', done: false }\nconsole.log(strIterator.next()); // { value: 'o', done: false }\nconsole.log(strIterator.next()); // { value: undefined, done: true }\n\nfor (let char of str) {\n console.log(char);\n}\n// Output:\n// h\n// e\n// l\n// l\n// o\n```\n\n## Map Iterator（映射迭代器）和 Set Iterator（集合迭代器）有哪些迭代方法？\n\n**Map Iterator 和 Set Iterator 都有以下迭代方法：**\n`next()`: 返回迭代器中下一个元素的对象，对象包含 value 和 done 两个属性。value 属性是当前元素的值，done 属性表示迭代器是否已经迭代完成。\n`Symbol.iterator`: 返回迭代器本身，使其可被 for...of 循环使用。\n\n\n**Map Iterator 还有以下方法：**\n`entries()`: 返回一个新的迭代器对象，该迭代器对象的元素是 [key, value] 数组。\n`keys()`: 返回一个新的迭代器对象，该迭代器对象的元素是 Map 中的键名。\n`values()`: 返回一个新的迭代器对象，该迭代器对象的元素是 Map 中的键值。\n\n\n**Set Iterator 还有以下方法：**\n`entries()`: 返回一个新的迭代器对象，该迭代器对象的元素是 [value, value] 数组。\n`keys()`: 返回一个新的迭代器对象，该迭代器对象的元素是 Set 中的值。\n`values()`: 返回一个新的迭代器对象，该迭代器对象的元素是 Set 中的值。\n\n\n**Map Iterator 使用举例**\n```js\nconst myMap = new Map();\nmyMap.set(\"key1\", \"value1\");\nmyMap.set(\"key2\", \"value2\");\nmyMap.set(\"key3\", \"value3\");\n\nconst mapIterator = myMap.entries();\n\nconsole.log(mapIterator.next().value); // [\"key1\", \"value1\"]\nconsole.log(mapIterator.next().value); // [\"key2\", \"value2\"]\nconsole.log(mapIterator.next().value); // [\"key3\", \"value3\"]\nconsole.log(mapIterator.next().value); // undefined\n```\n\n\n**Set Iterator 使用举例**\n```js\nconst mySet = new Set(['apple', 'banana', 'orange']);\n\n// 使用 for...of 循环遍历 Set\nfor (const item of mySet) {\n console.log(item);\n}\n\n// 使用 Set 迭代器手动遍历 Set\nconst setIterator = mySet.values();\nlet next = setIterator.next();\nwhile (!next.done) {\n console.log(next.value);\n next = setIterator.next();\n}\n```\n",{"_58":508,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/20/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/20/timeline",{"_58":511,"_60":61,"_62":512,"_64":513,"_66":514,"_68":515,"_70":516,"_72":517,"_74":518,"_76":519,"_78":520,"_111":521,"_124":125,"_126":24,"_127":-5,"_128":523,"_130":524,"_152":145,"_146":526,"_148":527,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":528,"_164":529,"_170":530,"_172":531,"_184":533,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/18","https://api.github.com/repos/pro-collection/interview-question/issues/18/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/18/comments","https://api.github.com/repos/pro-collection/interview-question/issues/18/events","https://github.com/pro-collection/interview-question/issues/18",1611651142,"I_kwDOJGDC6c5gD9hG",18,"手写创建一个 ajax 请求",{"_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},[522],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":525,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-06T15:20:06Z","2023-03-06T15:20:07Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"## 手动创建一个 ajax 请求\n\n一般来说，我们可以使用XMLHttpRequest对象来创建Ajax请求，其流程如下：\n\n1. 创建XMLHttpRequest对象，通过调用其构造函数来实现。\n2. 使用open()方法指定请求的方法、URL以及是否异步请求。\n3. 使用setRequestHeader()方法设置请求头，例如设置请求的Content-Type。\n4. 设置响应的回调函数，一般有onreadystatechange和onload两种方式。\n5. 使用send()方法发送请求。\n\n实现如下：\n\n```javascript\nvar getJSON = function(url) {\n var promise = new Promise(function(resolve, reject) {\n function handler() {\n if (this.readyState !== 4) {\n return;\n }\n if (this.status === 200) {\n resolve(this.response);\n } else {\n reject(new Error(this.statusText));\n }\n }\n\n var client = new XMLHttpRequest();\n //如果是IE的内核ActiveXObject('Microsoft.XMLHTTP');\n client.open(\"GET\", url);\n client.onreadystatechange = handler;\n client.responseType = \"json\";\n client.setRequestHeader(\"Accept\", \"application/json\");\n //如果是post请求：client.setRequestHeader('Content-Type','application/X-WWW-form-urlencoded')\n client.send();\n });\n return promise;\n};\n\ngetJSON(\"/posts.json\").then(function(json) {\n console.log('Contents: ' + json);\n}, function(error) {\n console.error(' 出错了 ', error);\n});\n```\n\n- `xhr.open()` 第一个参数是请求的方法，可以是GET、POST、PUT等；第二个参数是请求的URL；第三个参数表示是否异步请求。\n\n- `setRequestHeader()`方法用于设置请求头，例如设置Content-Type，常见的值有application/json、application/x-www-form-urlencoded等\n\n- `onreadystatechange回调函数`会在XMLHttpRequest对象的状态发生变化时触发\n\n- 最后，调用send()方法发送请求。\n\n## 回调函数一般有哪些？\n\n设置响应的回调函数，一般有 `onreadystatechange` 和 `onload` 两种方式；\n\n在 XMLHttpRequest 对象中，onreadystatechange 和 onload 是两种不同的事件回调函数。\n\n**onreadystatechange** :事件会在 readyState 的值改变时被触发，它会在请求过程中的每个状态改变时都被触发，从而可以通过 readyState\n的值来判断请求的过程。一般来说，onreadystatechange 回调函数需要根据 readyState 的不同值做出不同的处理，如：\n\n- readyState 为 1 （UNSENT）：代理被创建，但尚未调用 open() 方法；\n- readyState 为 1 （已经调用 open() 方法）时，可以做一些请求初始化的工作；\n- readyState 为 2 （已经调用 send() 方法）时，可以获取响应头信息；\n- readyState 为 3 （正在接收数据）时，可以获取响应的部分数据；\n- readyState 为 4 （已经接收到全部响应数据）时，可以对响应的数据进行处理。\n\n**onload**: 而 onload 事件则是在整个请求过程完成后被触发，表示整个请求已经完成。这个回调函数通常用来处理响应数据，如将响应数据渲染到页面中等。\n\n因此，onreadystatechange 和 onload 这两种回调函数的作用是不同的，需要根据不同的场景进行选择和使用。\n",{"_58":532,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/18/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/18/timeline",{"_58":535,"_60":61,"_62":536,"_64":537,"_66":538,"_68":539,"_70":540,"_72":541,"_74":542,"_76":543,"_78":544,"_111":545,"_124":125,"_126":24,"_127":-5,"_128":547,"_130":548,"_152":145,"_146":550,"_148":551,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":552,"_164":553,"_170":554,"_172":555,"_184":557,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/17","https://api.github.com/repos/pro-collection/interview-question/issues/17/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/17/comments","https://api.github.com/repos/pro-collection/interview-question/issues/17/events","https://github.com/pro-collection/interview-question/issues/17",1611651051,"I_kwDOJGDC6c5gD9fr",17,"ajax如何获取下载进度?",{"_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},[546],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":549,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-06T15:20:03Z","2023-03-06T15:20:05Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"## ajax如何获取下载进度?\n\n要获取下载进度，可以使用 `XMLHttpRequest` 对象提供的 `onprogress` 事件。\n\n使用 onprogress 事件，可以获取文件的下载进度信息，可以通过 loaded 和 total 属性获取当前已经下载的字节数和文件的总字节数，从而计算出当前的下载进度。\n\n下面是一个使用 onprogress 事件获取文件下载进度的示例代码：\n\n```js\nconst xhr = new XMLHttpRequest();\nxhr.open('GET', 'file.url', true);\nxhr.responseType = 'blob';\nxhr.onprogress = function (event) {\n if (event.lengthComputable) {\n const percentComplete = (event.loaded / event.total) * 100;\n console.log(`Downloaded ${percentComplete}%`);\n }\n};\nxhr.onload = function (event) {\n // 文件下载完成\n const blob = xhr.response;\n};\nxhr.send();\n```\n\n在上面的代码中，通过将 XMLHttpRequest 对象的 **responseType 设置为 blob**，来请求一个文件资源，然后监听 onprogress 事件，计算出当前的下载进度，并在控制台输出，最后在 onload 事件中获取到下载的文件内容。\n",{"_58":556,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/17/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/17/timeline",{"_58":559,"_60":61,"_62":560,"_64":561,"_66":562,"_68":563,"_70":564,"_72":565,"_74":566,"_76":567,"_78":568,"_111":569,"_124":125,"_126":24,"_127":-5,"_128":571,"_130":572,"_152":145,"_146":574,"_148":575,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":576,"_164":577,"_170":578,"_172":579,"_184":581,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/11","https://api.github.com/repos/pro-collection/interview-question/issues/11/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/11/comments","https://api.github.com/repos/pro-collection/interview-question/issues/11/events","https://github.com/pro-collection/interview-question/issues/11",1611650499,"I_kwDOJGDC6c5gD9XD",11,"常见数组排序算法有哪些？",{"_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},[570],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":573,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-06T15:19:45Z","2023-03-06T15:19:46Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"## 常见排序算法中，时间复杂度和空间复杂度是怎样的？\n如图所示：\n![01_10](https://user-images.githubusercontent.com/22188674/222961047-79023840-bd63-4a2c-93fe-2d94f2a8ac04.png)\n\n## 快速排序：\n先从数列中取出一个数作为“基准”。\n\n分区过程：将比这个“基准”大的数全放到“基准”的右边，小于或等于“基准”的数全放到“基准”的左边。\n再对左右区间重复第二步，直到各区间只有一个数。\n```javascript\nvar quickSort = function(arr) {\n if (arr.length <= 1) { return arr; }\n var pivotIndex = Math.floor(arr.length / 2); //基准位置（理论上可任意选取）\n var pivot = arr.splice(pivotIndex, 1)[0]; //基准数\n var left = [];\n var right = [];\n for (var i = 0; i < arr.length; i++){\n if (arr[i] < pivot) {\n left.push(arr[i]);\n } else {\n right.push(arr[i]);\n }\n }\n return quickSort(left).concat([pivot], quickSort(right)); //链接左数组、基准数构成的数组、右数组\n};\n```\n\n\n## 选择排序：\n首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置 \n再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。 \n重复第二步，直到所有元素均排序完毕。\n```javascript\nfunction selectionSort(arr) {\n var len = arr.length;\n var minIndex, temp;\n for (var i = 0; i < len - 1; i++) {\n minIndex = i;\n for (var j = i + 1; j < len; j++) {\n if (arr[j] < arr[minIndex]) { // 寻找最小的数\n minIndex = j; // 将最小数的索引保存\n }\n }\n temp = arr[i];\n arr[i] = arr[minIndex];\n arr[minIndex] = temp;\n }\n return arr;\n}\n```\n\n## 插入排序：\n将第一待排序序列第一个元素看做一个有序序列，把第二个元素到最后一个元素当成是未排序序列。 \n从头到尾依次扫描未排序序列，将扫描到的每个元素插入有序序列的适当位置。（如果待插入的元素与有序序列中的某个元素相等，则将待插入元素插入到相等元素的后面。）\n```javascript\nfunction insertionSort(arr) {\n var len = arr.length;\n var preIndex, current;\n for (var i = 1; i < len; i++) {\n preIndex = i - 1;\n current = arr[i];\n while(preIndex >= 0 && arr[preIndex] > current) {\n arr[preIndex+1] = arr[preIndex];\n preIndex--;\n }\n arr[preIndex+1] = current;\n }\n return arr;\n}\n```\n\n## 冒泡法排序：\n比较相邻的元素。如果第一个比第二个大，就交换他们两个。 \n对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数。 \n针对所有的元素重复以上的步骤，除了最后一个。 \n持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。\n```javascript\nfunction bubbleSort(arr) {\n var len = arr.length;\n for (var i = 0; i < len - 1; i++) {\n for (var j = 0; j < len - 1 - i; j++) {\n if (arr[j] > arr[j+1]) { // 相邻元素两两对比\n var temp = arr[j+1]; // 元素交换\n arr[j+1] = arr[j];\n arr[j] = temp;\n }\n }\n }\n return arr;\n}\n```\n\n## 希尔排序\n1959年Shell发明，第一个突破O(n2)的排序算法，是简单插入排序的改进版。\n它与插入排序的不同之处在于，它会优先比较距离较远的元素。希尔排序又叫缩小增量排序。\n\n先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序，具体算法描述： \n选择一个增量序列t1，t2，…，tk，其中ti>tj，tk=1； \n按增量序列个数k，对序列进行k 趟排序； \n每趟排序，根据对应的增量ti，将待排序列分割成若干长度为m 的子序列，分别对各子表进行直接插入排序。\n仅增量因子为1 时，整个序列作为一个表来处理，表长度即为整个序列的长度。\n```javascript\nfunction shellSort(arr) {\n var len = arr.length,\n temp,\n gap = 1;\n while (gap < len / 3) { // 动态定义间隔序列\n gap = gap * 3 + 1;\n }\n for (gap; gap > 0; gap = Math.floor(gap / 3)) {\n for (var i = gap; i < len; i++) {\n temp = arr[i];\n for (var j = i-gap; j > 0 && arr[j]> temp; j-=gap) {\n arr[j + gap] = arr[j];\n }\n arr[j + gap] = temp;\n }\n }\n return arr;\n}\n```\n\n## 归并排序\n直接上代码了\n```js\nfunction mergeSort(arr){\n var len = arr.length;\n if(len <2)\n return arr;\n var mid = Math.floor(len/2),\n left = arr.slice(0,mid),\n right =arr.slice(mid);\n //send left and right to the mergeSort to broke it down into pieces\n //then merge those\n return merge(mergeSort(left),mergeSort(right));\n}\n\nfunction merge(left, right){\n var result = [],\n lLen = left.length,\n rLen = right.length,\n l = 0,\n r = 0;\n while(l < lLen && r < rLen){\n if(left[l] < right[r]){\n result.push(left[l++]);\n }\n else{\n result.push(right[r++]);\n }\n }\n //remaining part needs to be addred to the result\n return result.concat(left.slice(l)).concat(right.slice(r));\n}\n```\n\n",{"_58":580,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/11/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/11/timeline",{"_58":583,"_60":61,"_62":584,"_64":585,"_66":586,"_68":587,"_70":588,"_72":589,"_74":590,"_76":591,"_78":592,"_111":593,"_124":125,"_126":24,"_127":-5,"_128":595,"_130":596,"_152":153,"_146":598,"_148":599,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":600,"_164":601,"_170":602,"_172":603,"_184":605,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/10","https://api.github.com/repos/pro-collection/interview-question/issues/10/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/10/comments","https://api.github.com/repos/pro-collection/interview-question/issues/10/events","https://github.com/pro-collection/interview-question/issues/10",1611650402,"I_kwDOJGDC6c5gD9Vi",10,"let 和 const 与 var 的区别？",{"_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},[594],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":300,"_68":301,"_62":302,"_70":303,"_72":304,"_74":153,"_76":305,"_122":306,"_140":597,"_142":308,"_144":145,"_124":125,"_146":309,"_148":310,"_150":-5,"_151":-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-03-06T15:19:42Z","2025-02-10T13:33:33Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"## let 和 const 与 var 的区别\r\n\r\n1、不存在变量提升 \r\n必须先定义后使用，否则报错\r\n\r\n2、暂时性死区 \r\n在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。\r\n\r\n3、不允许重复申明/不允许在函数内部重新申明参数（也算重复申明）\r\n\r\n4.1 SE5的作用域 \r\n1）、内层变量覆盖外层的变量 \r\n2）、用来计数的循环变量会泄露为全局变量\r\n\r\n5、const是一个常量，一旦声明，就不能改变。而且在申明的时候必须初始化，不能留到后面赋值。\r\n\r\n6、在ES5里面，var 在全局作用域下申明的变量，会自动生为window的属性: \r\n没法在编译过程爆出变量为申明的错误，语法上顶层对象有一个实体含义的对象这样肯定不合适。 \r\n用var定义的依然会升级为顶层对象(全局对象)window的属性；但是let,const申明则不会。\r\n",{"_58":604,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/10/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/10/timeline",{"_58":607,"_60":61,"_62":608,"_64":609,"_66":610,"_68":611,"_70":612,"_72":613,"_74":614,"_76":615,"_78":616,"_111":617,"_124":125,"_126":24,"_127":-5,"_128":619,"_130":620,"_152":145,"_146":622,"_148":623,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":624,"_164":625,"_170":626,"_172":627,"_184":630,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/9","https://api.github.com/repos/pro-collection/interview-question/issues/9/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/9/comments","https://api.github.com/repos/pro-collection/interview-question/issues/9/events","https://github.com/pro-collection/interview-question/issues/9",1611650297,"I_kwDOJGDC6c5gD9T5",9,"call、apply、bind 的区别和用法？",{"_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},[618],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":300,"_68":301,"_62":302,"_70":303,"_72":304,"_74":153,"_76":305,"_122":306,"_140":621,"_142":308,"_144":145,"_124":125,"_146":309,"_148":310,"_150":-5,"_151":-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-03-06T15:19:39Z","2023-03-06T15:19:40Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"call、apply 和 bind 都是 JavaScript 中用于改变函数执行上下文（即 this 指向）的方法，它们的区别和用法如下：\r\n\r\n## call\r\ncall 方法可以改变函数的 this 指向，同时还能传递多个参数。\r\n**call 方法的语法如下：**\r\n```js\r\nfun.call(thisArg, arg1, arg2, ...)\r\n```\r\nfun：要调用的函数。\r\nthisArg：函数内部 this 指向的对象。\r\narg1, arg2, ...：传递给函数的参数列表。\r\n\r\n\r\n**call 方法的使用示例：**\r\n```js\r\nconst person = {\r\n name: 'Alice',\r\n sayHello: function () {\r\n console.log(`Hello, ${this.name}!`)\r\n },\r\n}\r\n\r\nconst person2 = {\r\n name: 'Bob',\r\n}\r\n\r\nperson.sayHello.call(person2) // 输出：Hello, Bob!\r\n```\r\n\r\n## apply\r\napply 方法和 call 方法类似，它也可以改变函数的 this 指向，但是它需要传递一个数组作为参数列表。\r\n**apply 方法的语法如下：**\r\n```js\r\nfun.apply(thisArg, [argsArray])\r\n```\r\nfun：要调用的函数。\r\nthisArg：函数内部 this 指向的对象。\r\nargsArray：传递给函数的参数列表，以数组形式传递。\r\n\r\n**apply 方法的使用示例：**\r\n```js\r\nconst person = {\r\n name: 'Alice',\r\n sayHello: function (greeting) {\r\n console.log(`${greeting}, ${this.name}!`)\r\n },\r\n}\r\n\r\nconst person2 = {\r\n name: 'Bob',\r\n}\r\n\r\nperson.sayHello.apply(person2, ['Hi']) // 输出：Hi, Bob!\r\n```\r\n\r\n## bind\r\nbind 方法和 call、apply 方法不同，它并不会立即调用函数，而是返回一个新的函数，这个新函数的 this 指向被绑定的对象。\r\n**bind 方法的语法如下：**\r\n\r\n```js\r\nfun.bind(thisArg[, arg1[, arg2[, ...]]])\r\n```\r\nfun：要调用的函数。\r\nthisArg：函数内部 this 指向的对象。\r\narg1, arg2, ...：在调用函数时，绑定到函数参数的值。\r\n\r\n**bind 方法的使用示例：**\r\n```js\r\nconst person = {\r\n name: 'Alice',\r\n sayHello: function () {\r\n console.log(`Hello, ${this.name}!`)\r\n },\r\n}\r\n\r\nconst person2 = {\r\n name: 'Bob',\r\n}\r\n\r\nconst sayHelloToBob = person.sayHello.bind(person2)\r\nsayHelloToBob() // 输出：Hello, Bob!\r\n```\r\n\r\n**参数传递**\r\n在使用 bind 方法时，我们可以通过传递参数来预先填充函数的一些参数，这样在调用函数时只需要传递剩余的参数即可。\r\n```js\r\nconst person = {\r\n name: 'Alice',\r\n sayHello: function (greeting, punctuation) {\r\n console.log(`${greeting}, ${this.name}, ${punctuation}`)\r\n },\r\n}\r\n\r\nconst person2 = {\r\n name: 'Bob',\r\n}\r\n\r\nconst sayHelloToBob = person.sayHello.bind(person2);\r\n\r\nsayHelloToBob(1,2); // 输出：1, Bob, 2\r\n```\r\n\r\n**再举一个例子：**\r\n```js\r\nthis.x = 9; // 在浏览器中，this 指向全局的 \"window\" 对象\r\nvar module = {\r\n x: 81,\r\n getX: function() { return this.x; }\r\n};\r\n\r\nmodule.getX(); // 81\r\n\r\nvar retrieveX = module.getX;\r\nretrieveX();\r\n// 返回 9 - 因为函数是在全局作用域中调用的\r\n\r\n// 创建一个新函数，把 'this' 绑定到 module 对象\r\n// 新手可能会将全局变量 x 与 module 的属性 x 混淆\r\nvar boundGetX = retrieveX.bind(module);\r\nboundGetX(); // 81\r\n```\r\n",{"_58":628,"_175":629,"_176":629,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/9/reactions",4,"https://api.github.com/repos/pro-collection/interview-question/issues/9/timeline",{"_58":632,"_60":61,"_62":633,"_64":634,"_66":635,"_68":636,"_70":637,"_72":638,"_74":639,"_76":640,"_78":641,"_111":642,"_124":125,"_126":24,"_127":-5,"_128":644,"_130":645,"_152":145,"_146":647,"_148":648,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":649,"_164":650,"_170":651,"_172":652,"_184":654,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/8","https://api.github.com/repos/pro-collection/interview-question/issues/8/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/8/comments","https://api.github.com/repos/pro-collection/interview-question/issues/8/events","https://github.com/pro-collection/interview-question/issues/8",1611650200,"I_kwDOJGDC6c5gD9SY",8,"Proxy 和 Reflect 了解多少？",{"_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},[643],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":646,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-06T15:19:36Z","2023-03-06T15:19:37Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"## Proxy\n\n### 基本概念\nProxy(代理) 是 ES6 中新增的一个特性。Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。\n使用 Proxy 的好处是：对象只需关注于核心逻辑，一些非核心的逻辑（如：读取或设置对象的某些属性前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等）可以让 Proxy 来做。从而达到关注点分离，降级对象复杂度的目的。\n\n### api 有哪些？\n`var p = new Proxy(target, handler);` \n其中，target 为被代理对象。handler 是一个对象，其声明了代理 target 的一些操作。p 是代理后的对象。当外界每次对 p 进行操作时，就会执行 handler 对象上的一些方法。\n\nhandler 能代理的一些常用的方法如下：\n- handler.getPrototypeOf(): Object.getPrototypeOf 方法的捕捉器。\n\n- handler.setPrototypeOf(): Object.setPrototypeOf 方法的捕捉器。\n\n- handler.isExtensible(): Object.isExtensible 方法的捕捉器。\n\n- handler.preventExtensions(): Object.preventExtensions 方法的捕捉器。\n\n- handler.getOwnPropertyDescriptor(): Object.getOwnPropertyDescriptor 方法的捕捉器。\n\n- handler.defineProperty(): Object.defineProperty 方法的捕捉器。\n\n- handler.has(): in 操作符的捕捉器。\n\n- handler.get(): 属性读取操作的捕捉器。\n\n- handler.set(): 属性设置操作的捕捉器。\n\n- handler.deleteProperty(): delete 操作符的捕捉器。\n\n- handler.ownKeys(): Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。\n\n- handler.apply(): 函数调用操作的捕捉器。\n\n- handler.construct(): new 操作符的捕捉器。\n...\n \n### 基础使用\n```javascript\nvar target = {\n name: 'obj'\n };\n var logHandler = {\n get: function(target, key) {\n console.log(`${key} 被读取`);\n return target[key];\n },\n set: function(target, key, value) {\n console.log(`${key} 被设置为 ${value}`);\n target[key] = value;\n }\n };\nvar targetWithLog = new Proxy(target, logHandler);\ntargetWithLog.name; // 控制台输出：name 被读取\ntargetWithLog.name = 'others'; // 控制台输出：name 被设置为 others\nconsole.log(target.name); // 控制台输出: others\n```\n\n### 使用示例 - 实现虚拟属性\n```javascript\nvar person = {\n fisrsName: '张',\n lastName: '小白'\n};\nvar proxyedPerson = new Proxy(person, {\n get: function (target, key) {\n if(key === 'fullName'){\n return [target.fisrsName, target.lastName].join(' ');\n }\n return target[key];\n },\n set: function (target, key, value) {\n if(key === 'fullName'){\n var fullNameInfo = value.split(' ');\n target.fisrsName = fullNameInfo[0];\n target.lastName = fullNameInfo[1];\n } else {\n target[key] = value;\n }\n }\n});\n\nconsole.log('姓:%s, 名:%s, 全名: %s', proxyedPerson.fisrsName, proxyedPerson.lastName, proxyedPerson.fullName);// 姓:张, 名:小白, 全名: 张小白\nproxyedPerson.fullName = '李小露';\nconsole.log('姓:%s, 名:%s, 全名: %s', proxyedPerson.fisrsName, proxyedPerson.lastName, proxyedPerson.fullName);// 姓:李, 名:小露, 全名: 李小露\n```\n\n### 使用示例 - 实现私有变量\n下面的 demo 实现了真正的私有变量。代理中把以 _ 开头的变量都认为是私有的。 \n```javascript\nvar api = {\n _secret: 'xxxx',\n _otherSec: 'bbb',\n ver: 'v0.0.1'\n};\n\napi = new Proxy(api, {\n get: function(target, key) {\n // 以 _ 下划线开头的都认为是私有的\n if (key.startsWith('_')) {\n console.log('私有变量不能被访问');\n return false;\n }\n return target[key];\n },\n set: function(target, key, value) {\n if (key.startsWith('_')) {\n console.log('私有变量不能被修改');\n return false;\n }\n target[key] = value;\n },\n has: function(target, key) {\n return key.startsWith('_') ? false : (key in target);\n }\n});\n\napi._secret; // 私有变量不能被访问\nconsole.log(api.ver); // v0.0.1\napi._otherSec = 3; // 私有变量不能被修改\nconsole.log('_secret' in api); //false\nconsole.log('ver' in api); //true\n```\n\n### 使用示例 - 抽离校验模块\n```javascript\nfunction Animal() {\n return createValidator(this, animalValidator);\n}\nvar animalValidator = {\n name: function(name) {\n // 动物的名字必须是字符串类型的\n return typeof name === 'string';\n }\n};\n\nfunction createValidator(target, validator) {\n return new Proxy(target, {\n set: function(target, key, value) {\n if (validator[key]) {\n // 符合验证条件\n if (validator[key](value)) {\n target[key] = value;\n } else {\n throw Error(`Cannot set ${key} to ${value}. Invalid.`);\n }\n } else {\n target[key] = value\n }\n }\n });\n}\n\nvar dog = new Animal();\ndog.name = 'dog';\nconsole.log(dog.name);\ndog.name = 123; // Uncaught Error: Cannot set name to 123. Invalid.\n```\n\n## Reflect\n\n### 概念\nReflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。**这些方法与 `proxy handler` 的方法相同**。Reflect 不是一个函数对象，因此它是不可构造的。\n\n与大多数全局对象不同 Reflect 并非一个构造函数，所以不能通过 new 运算符对其进行调用，或者将 Reflect 对象作为一个函数来调用。**Reflect 的所有属性和方法都是静态的**（就像 Math 对象）。\n\n### api 有哪些？\n- Reflect.apply(target, thisArgument, argumentsList): 对一个函数进行调用操作，同时可以传入一个数组作为调用参数。和 Function.prototype.apply() 功能类似。\n - 举例\n ```javascript\n const ages = [11, 33, 12, 54, 18, 96];\n \n // 旧写法\n const youngest = Math.min.apply(Math, ages);\n const oldest = Math.max.apply(Math, ages);\n const type = Object.prototype.toString.call(youngest);\n \n // 新写法\n const youngest = Reflect.apply(Math.min, Math, ages);\n const oldest = Reflect.apply(Math.max, Math, ages);\n const type = Reflect.apply(Object.prototype.toString, youngest, []);\n ```\n\n- Reflect.construct(target, argumentsList[, newTarget]): 对构造函数进行 new 操作，相当于执行 new target(...args)。\n - Reflect.construct方法等同于new target(...args)，这提供了一种不使用new，来调用构造函数的方法。\n ```javascript\n function Greeting(name) {\n this.name = name;\n }\n \n // new 的写法\n const instance = new Greeting('张三');\n \n // Reflect.construct 的写法\n const instance = Reflect.construct(Greeting, ['张三']);\n ```\n\n- Reflect.defineProperty(target, propertyKey, attributes): 和 Object.defineProperty() 类似。如果设置成功就会返回 true\n\n- Reflect.deleteProperty(target, propertyKey): 作为函数的delete操作符，相当于执行 delete target[name]。该方法返回一个布尔值。\n - Reflect.deleteProperty方法等同于delete obj[name]，用于删除对象属性。\n ```javascript\n const myObj = { foo: 'bar' };\n \n // 旧写法\n delete myObj.foo;\n \n // 新写法\n Reflect.deleteProperty(myObj, 'foo');\n ```\n 该方法返回一个布尔值。如果删除成功或删除的属性不存在，则返回true，如果删除失败，删除的属性依然还在，则返回false。\n\n- Reflect.get(target, propertyKey[, receiver]): 获取对象身上某个属性的值，类似于 target[name]。\n - Reflect.get方法查找并返回target的name属性，如果没有，则返回undefined。\n ```javascript\n var myObject = {\n foo: 1,\n bar: 2,\n get baz() {\n return this.foo + this.bar;\n },\n }\n \n Reflect.get(myObject, 'foo') // 1\n Reflect.get(myObject, 'bar') // 2\n Reflect.get(myObject, 'baz') // 3\n ```\n \n - 读取函数的this绑定的receiver\n ```js\n var myObject = {\n foo: 1,\n bar: 2,\n get baz() {\n return this.foo + this.bar;\n },\n };\n \n var myReceiverObject = {\n foo: 4,\n bar: 4,\n };\n \n Reflect.get(myObject, 'baz', myReceiverObject) // 8\n ```\n \n - 如果第一个参数不是对象，则Reflect.get则会报错。 \n\n\n- Reflect.getOwnPropertyDescriptor(target, propertyKey): 类似于 Object.getOwnPropertyDescriptor()。如果对象中存在该属性，则返回对应的属性描述符，否则返回 undefined。\n\n- Reflect.getPrototypeOf(target): 类似于 Object.getPrototypeOf()。\n\n- Reflect.has(target, propertyKey): 判断一个对象是否存在某个属性，和 in 运算符的功能完全相同。\n - Reflect.has对应 name in obj 里面的in操作\n ```javascript\n var myObject = {\n foo: 1,\n };\n \n // 旧写法\n 'foo' in myObject // true\n \n // 新写法\n Reflect.has(myObject, 'foo') // true\n ```\n 如果第一个参数不是对象，Reflect.has和in都会报错。\n\n- Reflect.isExtensible(target): 类似于 Object.isExtensible().\n\n- Reflect.ownKeys(target): 返回一个包含所有自身属性（不包含继承属性）的数组。(类似于 Object.keys(), 但不会受enumerable 影响).\n\n- Reflect.preventExtensions(target): 类似于 Object.preventExtensions()。返回一个Boolean。\n\n- Reflect.set(target, propertyKey, value[, receiver]): 将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。\n - Reflect.set方法设置target对象的name属性等于value。\n ```javascript\n var myObject = {\n foo: 1,\n set bar(value) {\n return this.foo = value;\n },\n }\n \n myObject.foo // 1\n \n Reflect.set(myObject, 'foo', 2);\n myObject.foo // 2\n \n Reflect.set(myObject, 'bar', 3)\n myObject.foo // 3\n ```\n \n - 如果name属性设置的赋值函数，则赋值函数的this绑定receiver。\n ```javascript\n var myObject = {\n foo: 4,\n set bar(value) {\n return this.foo = value;\n },\n };\n \n var myReceiverObject = {\n foo: 0,\n };\n \n Reflect.set(myObject, 'bar', 1, myReceiverObject);\n myObject.foo // 4\n myReceiverObject.foo // 1\n ```\n\n- Reflect.setPrototypeOf(target, prototype): 设置对象原型的函数。返回一个 Boolean，如果更新成功，则返回 true。\n\n\n\n\n",{"_58":653,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/8/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/8/timeline",{"_58":656,"_60":61,"_62":657,"_64":658,"_66":659,"_68":660,"_70":661,"_72":662,"_74":663,"_76":664,"_78":665,"_111":666,"_124":125,"_126":24,"_127":-5,"_128":668,"_130":669,"_152":145,"_146":671,"_148":672,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":673,"_164":674,"_170":675,"_172":676,"_184":678,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/7","https://api.github.com/repos/pro-collection/interview-question/issues/7/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/7/comments","https://api.github.com/repos/pro-collection/interview-question/issues/7/events","https://github.com/pro-collection/interview-question/issues/7",1611650109,"I_kwDOJGDC6c5gD9Q9",7,"es6 数据结构 Set 了解多少？",{"_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},[667],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":670,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-06T15:19:33Z","2023-09-16T08:43:22Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"## Set \r\n\r\n### 基本概念\r\nSet 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。\r\n\r\nSet对象是值的集合，你可以按照插入的顺序迭代它的元素。Set 中的元素只会出现一次，即 Set 中的元素是唯一的。\r\n\r\n另外，NaN 和 undefined 都可以被存储在 Set 中，NaN 之间被视为相同的值（NaN 被认为是相同的，尽管 NaN !== NaN）。\r\n\r\n### 有哪些属性和方法\r\n操作方法： \r\n`add(value)`：添加某个值，返回 Set 结构本身。 \r\n`delete(value)`：删除某个值，返回一个布尔值，表示删除是否成功。 \r\n`has(value)`：返回一个布尔值，表示该值是否为Set的成员。 \r\n`clear()`：清除所有成员，没有返回值。\r\n\r\n遍历方法： \r\n`keys()`：返回键名的遍历器 \r\n`values()`：返回键值的遍历器 \r\n`entries()`：返回键值对的遍历器 \r\n`forEach()`：使用回调函数遍历每个成员\r\n`Set.prototype[@@iterator]()`：返回一个新的迭代器对象，该对象包含 Set 对象中的按插入顺序排列的所有元素的值。\r\n\r\n**`Set.prototype[@@iterator]()`** 较为特殊，细说一下：\r\n@@iterator 属性的初始值和 values 属性的初始值是同一个函数。\r\n```js\r\nconst mySet = new Set();\r\nmySet.add('0');\r\nmySet.add(1);\r\nmySet.add({});\r\n\r\nconst setIter = mySet[Symbol.iterator]();\r\n\r\nconsole.log(setIter.next().value); // \"0\"\r\nconsole.log(setIter.next().value); // 1\r\nconsole.log(setIter.next().value); // Object\r\n```\r\n\r\n### 一些实用场景\r\n```js\r\n// 判断是会否属于： B 是否属于 A\r\nfunction isSuperset(set, subset) {\r\n for (let elem of subset) {\r\n if (!set.has(elem)) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n}\r\n\r\n// 合集\r\nfunction union(setA, setB) {\r\n let _union = new Set(setA);\r\n for (let elem of setB) {\r\n _union.add(elem);\r\n }\r\n return _union;\r\n}\r\n\r\n// 交集\r\nfunction intersection(setA, setB) {\r\n let _intersection = new Set();\r\n for (let elem of setB) {\r\n if (setA.has(elem)) {\r\n _intersection.add(elem);\r\n }\r\n }\r\n return _intersection;\r\n}\r\n\r\n// 对称差分\r\nfunction symmetricDifference(setA, setB) {\r\n let _difference = new Set(setA);\r\n for (let elem of setB) {\r\n if (_difference.has(elem)) {\r\n _difference.delete(elem);\r\n } else {\r\n _difference.add(elem);\r\n }\r\n }\r\n return _difference;\r\n}\r\n\r\n// 属于 A 但是不属于 B\r\nfunction difference(setA, setB) {\r\n let _difference = new Set(setA);\r\n for (let elem of setB) {\r\n _difference.delete(elem);\r\n }\r\n return _difference;\r\n}\r\n\r\n//Examples\r\nlet setA = new Set([1, 2, 3, 4]),\r\n setB = new Set([2, 3]),\r\n setC = new Set([3, 4, 5, 6]);\r\n\r\nisSuperset(setA, setB); // => true\r\nunion(setA, setC); // => Set [1, 2, 3, 4, 5, 6]\r\nintersection(setA, setC); // => Set [3, 4]\r\nsymmetricDifference(setA, setC); // => Set [1, 2, 5, 6]\r\ndifference(setA, setC); // => Set [1, 2]\r\n```\r\n\r\n\r\n## WeakSet \r\n### 基本概念\r\nWeakSet 对象允许你将弱保持对象存储在一个集合中。\r\n\r\nWeakSet 对象是一些对象值的集合。且其与 Set 类似，WeakSet 中的每个对象值都只能出现一次。在 WeakSet 的集合中，所有对象都是唯一的。\r\n\r\n它和 Set 对象的主要区别有：\r\n\r\n- WeakSet 只能是对象的集合，而不能像 Set 那样，可以是任何类型的任意值。\r\n- WeakSet 持弱引用：集合中对象的引用为弱引用。如果没有其它的对 WeakSet 中对象的引用，那么这些对象会被当成垃圾回收掉。\r\n\r\n这也意味着 WeakSet 中没有存储当前对象的列表。正因为这样，**WeakSet 是不可枚举的**。\r\n\r\n\r\n## 实例方法\r\n\r\n- WeakSet.prototype.add(value): 将 value 添加到 WeakSet 对象最后一个元素的后面。\r\n\r\n- WeakSet.prototype.delete(value): 从 WeakSet 中移除 value。此后调用 WeakSet.prototype.has(value) 将返回 false。\r\n\r\n- WeakSet.prototype.has(value): 返回一个布尔值，表示 value 是否存在于 WeakSet 对象中。\r\n\r\n\r\n### 使用场景 - 检测循环引用\r\n```js\r\n// 对传入的 subject 对象内部存储的所有内容执行回调\r\nfunction execRecursively(fn, subject, _refs = new WeakSet()) {\r\n // 避免无限递归\r\n if (_refs.has(subject)) {\r\n return;\r\n }\r\n\r\n fn(subject);\r\n if (typeof subject === \"object\") {\r\n _refs.add(subject);\r\n for (const key in subject) {\r\n execRecursively(fn, subject[key], _refs);\r\n }\r\n }\r\n}\r\n\r\nconst foo = {\r\n foo: \"Foo\",\r\n bar: {\r\n bar: \"Bar\",\r\n },\r\n};\r\n\r\nfoo.bar.baz = foo; // 循环引用！\r\nexecRecursively((obj) => console.log(obj), foo);\r\n```\r\n\r\n\r\n------------------------\r\n> 补充：2023.09.16\r\n\r\n下面是 JavaScript Set 数据结构的常用 API：\r\n\r\n| API | 描述 |\r\n| ---------------------- | ------------------------------------------------ |\r\n| `Set.prototype.add()` | 向 Set 中添加一个新的元素 |\r\n| `Set.prototype.delete()` | 从 Set 中删除一个元素 |\r\n| `Set.prototype.has()` | 判断 Set 中是否存在某个元素 |\r\n| `Set.prototype.clear()` | 清空 Set 中的所有元素 |\r\n| `Set.prototype.size` | 返回 Set 中的元素个数 |\r\n| `Set.prototype.keys()` | 返回一个包含 Set 中所有键的迭代器 |\r\n| `Set.prototype.values()` | 返回一个包含 Set 中所有值的迭代器 |\r\n| `Set.prototype.entries()` | 返回一个包含 Set 中所有键值对的迭代器 |\r\n| `Set.prototype.forEach()` | 对 Set 中的每个元素执行指定的操作 |\r\n\r\n以上是 Set 数据结构的常用 API，可以通过这些 API 对 Set 进行添加、删除、查询、遍历等操作。",{"_58":677,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/7/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/7/timeline",{"_58":680,"_60":61,"_62":681,"_64":682,"_66":683,"_68":684,"_70":685,"_72":686,"_74":687,"_76":688,"_78":689,"_111":690,"_124":125,"_126":24,"_127":-5,"_128":692,"_130":693,"_152":137,"_146":695,"_148":696,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":697,"_164":698,"_170":699,"_172":700,"_184":702,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/6","https://api.github.com/repos/pro-collection/interview-question/issues/6/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/6/comments","https://api.github.com/repos/pro-collection/interview-question/issues/6/events","https://github.com/pro-collection/interview-question/issues/6",1611650002,"I_kwDOJGDC6c5gD9PS",6,"如何检测对象是否循环引用？",{"_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},[691],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":694,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-06T15:19:30Z","2025-05-31T13:47:14Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"## 检测循环引用\r\n\r\n例如下面的场景，已经出现循环引用了，如何检测？ \r\n```js\r\nconst foo = {\r\n foo: \"Foo\",\r\n bar: {\r\n bar: \"Bar\",\r\n },\r\n};\r\n\r\nfoo.bar.baz = foo; // 循环引用！\r\n```\r\n\r\n解答：使用 WeakSet 特性解决；\r\n```js\r\n// 对传入的 subject 对象内部存储的所有内容执行回调\r\nfunction execRecursively(fn, subject, _refs = new WeakSet()) {\r\n // 避免无限递归\r\n if (_refs.has(subject)) {\r\n return;\r\n }\r\n\r\n fn(subject);\r\n if (typeof subject === \"object\") {\r\n _refs.add(subject);\r\n for (const key in subject) {\r\n execRecursively(fn, subject[key], _refs);\r\n }\r\n }\r\n}\r\n\r\nconst foo = {\r\n foo: \"Foo\",\r\n bar: {\r\n bar: \"Bar\",\r\n },\r\n};\r\n\r\nfoo.bar.baz = foo; // 循环引用！\r\nexecRecursively((obj) => console.log(obj), foo);\r\n```\r\n\r\n参考：[#35 ](https://github.com/yanlele/interview-question/issues/35)",{"_58":701,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/6/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/6/timeline",{"_58":704,"_60":61,"_62":705,"_64":706,"_66":707,"_68":708,"_70":709,"_72":710,"_74":711,"_76":712,"_78":713,"_111":714,"_124":125,"_126":24,"_127":-5,"_128":716,"_130":717,"_152":145,"_146":719,"_148":720,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":721,"_164":722,"_170":723,"_172":724,"_184":726,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/5","https://api.github.com/repos/pro-collection/interview-question/issues/5/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/5/comments","https://api.github.com/repos/pro-collection/interview-question/issues/5/events","https://github.com/pro-collection/interview-question/issues/5",1611649908,"I_kwDOJGDC6c5gD9N0",5,"Map 和 Object 有哪些主要的区别？",{"_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},[715],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":718,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-06T15:19:27Z","2023-03-06T15:19:28Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"不过 Map 和 Object 有一些重要的区别，在下列情况中使用 Map 会是更好的选择：\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

	Map	Object
意外的键	`Map` 默认情况不包含任何键。只包含显式插入的键。	\n 一个 `Object` 有一个原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。 \n \n 备注：虽然可以用 `Object.create(null)` 来创建一个没有原型的对象，但是这种用法不太常见。 \n \n
键的类型	一个 `Map` 的键可以是任意值，包括函数、对象或任意基本类型。	一个 `Object` 的键必须是一个 `String` 或是 `Symbol`。
键的顺序	\n `Map` 中的键是有序的。因此，当迭代的时候，一个 `Map` 对象以插入的顺序返回键值。 \n	\n 虽然 `Object` 的键目前是有序的，但并不总是这样，而且这个顺序是复杂的。因此，最好不要依赖属性的顺序。 \n \n 自 ECMAScript 2015 规范以来，对象的属性被定义为是有序的；ECMAScript 2020 则额外定义了继承属性的顺序。参见 OrdinaryOwnPropertyKeys\n 和\n EnumerateObjectProperties 抽象规范说明。但是，请注意没有可以迭代对象所有属性的机制，每一种机制只包含了属性的不同子集。（`for-in`\n 仅包含了以字符串为键的属性；`Object.keys`\n 仅包含了对象自身的、可枚举的、以字符串为键的属性；`Object.getOwnPropertyNames`\n 包含了所有以字符串为键的属性，即使是不可枚举的；`Object.getOwnPropertySymbols`\n 与前者类似，但其包含的是以 `Symbol` 为键的属性，等等。）\n \n
Size	`Map` 的键值对个数可以轻易地通过 `size` 属性获取。	`Object` 的键值对个数只能手动计算。
迭代	`Map` 是可迭代的的，所以可以直接被迭代。	\n `Object` 没有实现迭代协议，所以使用 JavaSctipt 的 for...of 表达式并不能直接迭代对象。 \n \n 备注： \n \n 对象可以实现迭代协议，或者你可以使用 `Object.keys` 或 `Object.entries`。 \n \n for...in\n 表达式允许你迭代一个对象的可枚举属性。\n \n \n \n
性能	\n 在频繁增删键值对的场景下表现更好。 \n	\n 在频繁添加和删除键值对的场景下未作出优化。 \n
序列化和解析	\n 没有元素的序列化和解析的支持。 \n （但是你可以使用携带 replacer 参数的 `JSON.stringify()` 创建一个自己的对 `Map` 的序列化和解析支持。参见 Stack Overflow 上的提问：How do you JSON.stringify an ES6 Map?） \n	\n 原生的由 `Object` 到 JSON 的序列化支持，使用 `JSON.stringify()`。 \n 原生的由 JSON 到 `Object` 的解析支持，使用 `JSON.parse()`。 \n

\n",{"_58":725,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/5/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/5/timeline",{"_58":728,"_60":61,"_62":729,"_64":730,"_66":731,"_68":732,"_70":733,"_72":734,"_74":629,"_76":735,"_78":736,"_111":737,"_124":125,"_126":24,"_127":-5,"_128":739,"_130":740,"_152":145,"_146":742,"_148":743,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":744,"_164":745,"_170":746,"_172":747,"_184":749,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/4","https://api.github.com/repos/pro-collection/interview-question/issues/4/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/4/comments","https://api.github.com/repos/pro-collection/interview-question/issues/4/events","https://github.com/pro-collection/interview-question/issues/4",1611649797,"I_kwDOJGDC6c5gD9MF","ES6 Map 数据结构了解多少？",{"_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},[738],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":741,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-06T15:19:24Z","2023-03-06T15:19:25Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"## 基本概念\n\nMap 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。\n\nMap 对象是键值对的集合。Map 中的一个键只能出现一次；它在 Map 的集合中是独一无二的。Map 对象按键值对迭代——一个 for...of 循环在每次迭代后会返回一个形式为 [key，value] 的数组。迭代按插入顺序进行，即键值对按 set() 方法首次插入到集合中的顺序（也就是说，当调用 set() 时，map 中没有具有相同值的键）进行迭代。\n\n## api\n\n**静态属性**\n- size 属性：size属性返回 Map 结构的成员总数。\n\n**实例方法**\n- set(key, value)：set方法设置key所对应的键值，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。\n\n- get(key)：get方法读取key对应的键值，如果找不到key，返回undefined。\n\n- has(key)：has方法返回一个布尔值，表示某个键是否在 Map 数据结构中。\n\n- delete(key)：delete方法删除某个键，返回 true 。如果删除失败，返回 false 。\n\n- clear()：clear方法清除所有成员，没有返回值。\n\n- forEach()：遍历 Map 的所有成员。\n\n**迭代方法**\n- keys()：返回键名的遍历器。\n- values()：返回键值的遍历器。\n- entries()：返回所有成员的遍历器。\n- `Map.prototype[@@iterator]()`：返回一个新的迭代对象，其为一个包含 Map 对象中所有键值对的 [key, value] 数组，并以插入 Map 对象的顺序排列。\n \n \n## 复制或合并 Maps\nMap 能像数组一样被复制：\n```js\nconst original = new Map([\n [1, 'one'],\n]);\n\nconst clone = new Map(original);\n\nconsole.log(clone.get(1)); // one\nconsole.log(original === clone); // false. 浅比较不为同一个对象的引用\n```\n\n\nMap 对象间可以进行合并，但是会保持键的唯一性。\n```js\nconst first = new Map([\n [1, 'one'],\n [2, 'two'],\n [3, 'three'],\n]);\n\nconst second = new Map([\n [1, 'uno'],\n [2, 'dos']\n]);\n\n// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的。\n// 展开语法本质上是将 Map 对象转换成数组。\nconst merged = new Map([...first, ...second]);\n\nconsole.log(merged.get(1)); // uno\nconsole.log(merged.get(2)); // dos\nconsole.log(merged.get(3)); // three\n```\n\n\nMap 对象也能与数组合并：\n```js\nconst first = new Map([\n [1, 'one'],\n [2, 'two'],\n [3, 'three'],\n]);\n\nconst second = new Map([\n [1, 'uno'],\n [2, 'dos']\n]);\n\n// Map 对象同数组进行合并时，如果有重复的键值，则后面的会覆盖前面的。\nconst merged = new Map([...first, ...second, [1, 'eins']]);\n\nconsole.log(merged.get(1)); // eins\nconsole.log(merged.get(2)); // dos\nconsole.log(merged.get(3)); // three\n```\n",{"_58":748,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/4/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/4/timeline",{"_58":751,"_60":61,"_62":752,"_64":753,"_66":754,"_68":755,"_70":756,"_72":757,"_74":758,"_76":759,"_78":760,"_111":761,"_124":125,"_126":24,"_127":-5,"_128":763,"_130":764,"_152":145,"_146":766,"_148":767,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":768,"_164":769,"_170":770,"_172":771,"_184":773,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/3","https://api.github.com/repos/pro-collection/interview-question/issues/3/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/3/comments","https://api.github.com/repos/pro-collection/interview-question/issues/3/events","https://github.com/pro-collection/interview-question/issues/3",1611649701,"I_kwDOJGDC6c5gD9Kl",3,"ES6 Generator 了解多少？",{"_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},[762],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":765,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-03-06T15:19:21Z","2023-03-06T15:19:22Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"## Generator 基本概念\n\nES6中的 Generator（生成器）是一种特殊类型的函数，它可以被暂停和恢复。这意味着在调用Generator函数时，它不会立即执行，而是返回一个可暂停执行的Generator对象。在需要的时候，可以通过调用.next()方法来恢复函数的执行。这使得我们能够编写更具表现力和灵活性的代码。\n\nGenerator函数使用特殊的语法：在函数关键字后面添加一个星号(*)。Generator函数中可以使用一个新的关键字yield，用于将函数的执行暂停，并且可以将一个值返回给调用者。\n\n以下是一个简单的 Generator 函数的例子：\n\n```js\nfunction* generateSequence() {\n yield 1;\n yield 2;\n yield 3;\n}\n\nlet generator = generateSequence();\n\nconsole.log(generator.next().value); // 1\nconsole.log(generator.next().value); // 2\nconsole.log(generator.next().value); // 3\n```\n在上面的例子中，generateSequence()是一个Generator函数，它定义了一个简单的数列生成器。在函数中，使用了yield关键字，以便能够暂停函数执行。最后，我们通过调用generator.next()方法来恢复函数的执行，并逐步返回生成器中的每一个值。\n\n\nGenerator函数也可以接收参数，并且可以在每次迭代时使用不同的参数值。这使得它们能够以更灵活的方式生成数据。\n\n以下是一个带参数的Generator函数的例子：\n```js\nfunction* generateSequence(start, end) {\n for (let i = start; i <= end; i++) {\n yield i;\n }\n}\n\nlet generator = generateSequence(1, 5);\n\nconsole.log(generator.next().value); // 1\nconsole.log(generator.next().value); // 2\nconsole.log(generator.next().value); // 3\nconsole.log(generator.next().value); // 4\nconsole.log(generator.next().value); // 5\n```\n\nGenerator是一种非常有用的工具，它能够帮助我们编写更灵活和表达力强的代码。它们在异步编程、迭代器和生成器等场景中得到了广泛的应用。\n\n\n## 与 async/await 有啥关系？\nGenerator 和 async/await 都是 ES6 中引入的异步编程解决方案，它们本质上都是利用了 JavaScript 中的协程（coroutine）。\n\nGenerator 和 async/await 都是 JavaScript 中用于异步编程的方式，它们的本质相同，都是利用了生成器函数的特性来实现异步操作。\n\n在 ES5 中，JavaScript 使用回调函数实现异步编程，但是这样会导致回调嵌套过深，代码可读性差、难以维护。Generator 和 async/await 的出现解决了这个问题，它们让异步编程更加像同步编程，使代码可读性和可维护性得到了大幅提升。\n\n**Generator 可以使用 yield 语句来暂停函数执行，并返回一个 Generator 对象，通过这个对象可以控制函数的继续执行和结束。而 async/await 则是基于 Promise 实现的语法糖，可以使异步代码看起来像同步代码，代码结构更加清晰明了。**\n\n在使用上，Generator 和 async/await 都需要通过一些特定的语法来实现异步操作，不同的是 async/await 通过 await 关键字等待 Promise 对象的解决，而 Generator 则是通过 yield 关键字暂停函数执行，并返回一个 Generator 对象，通过 next 方法控制函数的继续执行和结束。另外，async/await 可以更好地处理 Promise 的错误，而 Generator 需要使用 try/catch 语句来捕获错误。\n\nGenerator 和 async/await 可以互相转换，这意味着我们可以使用 Generator 来实现 async/await 的功能，也可以使用 async/await 来调用 Generator 函数。\n\n```js\nfunction* gen() {\n yield 1;\n yield 2;\n yield 3;\n}\n\nasync function test() {\n for await (const x of gen()) {\n console.log(x);\n }\n}\n\ntest(); // 输出 1, 2, 3\n```\n\n在上面的代码中，`for await...of` 循环语句可以遍历 `Generator` 函数生成的迭代器，从而实现异步迭代。注意在调用 for await...of 时需要使用 yield* 关键字来进行委托。\n\n\nGenerator 函数使用 await 调用示例：\n```js\nfunction* generator() {\n const result1 = yield asyncTask1();\n const result2 = yield asyncTask2(result1);\n return result2;\n}\n\nasync function runGenerator() {\n const gen = generator();\n const result1 = await gen.next().value;\n const result2 = await gen.next(result1).value;\n const finalResult = await gen.next(result2).value;\n console.log(finalResult);\n}\n\nrunGenerator();\n```\n\n",{"_58":772,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/3/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/3/timeline",{"_58":775,"_60":61,"_62":776,"_64":777,"_66":778,"_68":779,"_70":780,"_72":781,"_74":137,"_76":782,"_78":783,"_111":784,"_124":125,"_126":24,"_127":-5,"_128":786,"_130":787,"_152":145,"_146":799,"_148":800,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":801,"_164":802,"_170":803,"_172":804,"_184":806,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/2","https://api.github.com/repos/pro-collection/interview-question/issues/2/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/2/comments","https://api.github.com/repos/pro-collection/interview-question/issues/2/events","https://github.com/pro-collection/interview-question/issues/2",1611649536,"I_kwDOJGDC6c5gD9IA","async/await 原理，手写 async 函数？",{"_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},[785],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":788,"_68":789,"_62":790,"_70":791,"_72":792,"_74":758,"_76":793,"_122":794,"_140":795,"_142":796,"_144":145,"_124":125,"_146":797,"_148":798,"_150":-5,"_151":-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","高","高级别面试问题",{"_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-03-06T15:19:16Z","2023-03-26T10:12:56Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"## async/await 的本质\n\nasync/await 是 ECMAScript 2017（ES8）中引入的一个语言特性，用于处理异步编程。async/await 实际上是对 Promise 的封装，通过让开发者以同步的方式编写异步代码，使得代码更加易读和易于维护。\n\nasync/await 是一种更加高级的异步编程方式，它使用了 Promise 作为底层实现，可以更好地处理异步编程中的错误和异常，避免了回调地狱和代码可读性差的问题。\n\n## 手写 async/await 实现\n\nasync/await 的实现可以通过封装 Promise 和 Generator 函数来实现，下面是一个简单的手写实现示例：\n```js\nfunction delay(ms) {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve();\n }, ms);\n });\n}\n\nfunction* generator() {\n console.log(\"start\");\n yield delay(1000);\n console.log(\"after 1 second\");\n yield delay(2000);\n console.log(\"after 2 more seconds\");\n}\n\nfunction async(generatorFunc) {\n const iterator = generatorFunc();\n\n function handle(iteratorResult) {\n if (iteratorResult.done) {\n return Promise.resolve(iteratorResult.value);\n }\n\n return Promise.resolve(iteratorResult.value).then((res) => {\n return handle(iterator.next(res));\n });\n }\n\n return handle(iterator.next());\n}\n\nasync(function () {\n return generator();\n}).then(() => {\n console.log(\"all done\");\n});\n```\n\n",{"_58":805,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/2/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/2/timeline",{"_58":808,"_60":61,"_62":809,"_64":810,"_66":811,"_68":812,"_70":813,"_72":814,"_74":153,"_76":815,"_78":816,"_111":817,"_124":125,"_126":24,"_127":-5,"_128":819,"_130":820,"_152":153,"_146":822,"_148":823,"_151":-5,"_156":157,"_106":-5,"_158":-5,"_159":824,"_164":825,"_170":826,"_172":827,"_184":829,"_186":-5,"_187":-5,"_188":153},"https://api.github.com/repos/pro-collection/interview-question/issues/1","https://api.github.com/repos/pro-collection/interview-question/issues/1/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1/events","https://github.com/pro-collection/interview-question/issues/1",1611649456,"I_kwDOJGDC6c5gD9Gw","Promise 了解多少？",{"_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},[818],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":300,"_68":301,"_62":302,"_70":303,"_72":304,"_74":153,"_76":305,"_122":306,"_140":821,"_142":308,"_144":145,"_124":125,"_146":309,"_148":310,"_150":-5,"_151":-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-03-06T15:19:13Z","2023-03-08T15:28:22Z",{"_161":145,"_162":145,"_163":145},{"_166":145,"_167":145,"_168":145,"_169":145},"# Promise 对象\r\n\r\n### 1、Promise 的含义\r\nPromise 是异步编程的一种解决方案，比传统的解决方案 —— 回调函数和事件 —— 更合理和更强大。它由社区最早提出和实现， ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。\r\n\r\nPromise对象有以下两个特点。 \r\n\r\n**（ 1 ）对象的状态不受外界影响。**\r\nPromise对象代表一个异步操作，**有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled ）和Rejected（已失败）**。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是 “ 承诺 ” ，表示其他手段无法改变。 \r\n \r\n**（ 2 ）一旦状态改变，就不会再变，任何时候都可以得到这个结果。**\r\nPromise对象的状态改变，**只有两种可能：从Pending变为Resolved和从Pending变为Rejected**。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（ Event ）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。 \r\n有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。 \r\nPromise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。 \r\n\r\n### 2、基本用法\r\n\r\n实例1：基本用法 \r\n```javascript\r\n var promise = new Promise(function(resolve, reject) {\r\n \t// ... some code\r\n if (/* 异步操作成功 */){\r\n resolve(value);\r\n } else {\r\n reject(error);\r\n }\r\n });\r\n```\r\n\r\n实例2：只要一new Promise后就会立即执行。 \r\n```javascript\r\n let promise = new Promise(function(resolve, reject) {\r\n console.log('Promise');\r\n resolve();\r\n });\r\n promise.then(function() {\r\n console.log('Resolved.');\r\n });\r\n console.log('Hi!');\r\n // Promise\r\n // Hi!\r\n // Resolved\r\n```\r\n\r\n实例3：下面是一个用 Promise 对象实现的 Ajax 操作的例子。（非常经典） \r\n```javascript\r\n var getJSON = function (url) {\r\n var promise = new Promise(function (resolve, reject) {\r\n var client = new XMLHttpRequest();\r\n client.open(\"GET\", url);\r\n client.onreadystatechange = handler;\r\n client.responseType = \"json\";\r\n client.setRequestHeader(\"Accept\", \"application/json\");\r\n client.send();\r\n \r\n function handler() {\r\n if (this.readyState !== 4) {\r\n return;\r\n }\r\n if (this.status === 200) {\r\n resolve(this.response);\r\n } else {\r\n reject(new Error(this.statusText));\r\n }\r\n };\r\n });\r\n return promise;\r\n };\r\n \r\n getJSON(\"/posts.json\").then(function (json) {\r\n console.log('Contents: ' + json);\r\n }, function (error) {\r\n console.error(' 出错了 ', error);\r\n });\r\n```\r\n\r\n### 3、Promise.prototype.then()\r\n\r\nPromise 实例具有then方法，也就是说，then方法是定义在原型对象 Promise.prototype 上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是 Resolved 状态的回调函数，第二个参数（可选）是 Rejected 状态的回调函数。 \r\nthen方法返回的是一个新的 Promise 实例（注意，不是原来那个 Promise 实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。 \r\n```javascript\r\n getJSON(\"/posts.json\").then(function(json) {\r\n return json.post;\r\n }).then(function(post) {\r\n // ...\r\n });\r\n```\r\n\r\n采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个 Promise 对象（即有异步操作），这时后一个回调函数，就会等待该 Promise 对象的状态发生变化，才会被调用。 \r\n```javascript\r\n getJSON(\"/post/1.json\").then(function (post) {\r\n return getJSON(post.commentURL);\r\n }).then(function funcA(comments) {\r\n console.log(\"Resolved: \", comments);\r\n }, function funcB(err) {\r\n console.log(\"Rejected: \", err);\r\n });\r\n```\r\n\r\n上面代码中，第一个then方法指定的回调函数，返回的是另一个 Promise 对象。这时，第二个then方法指定的回调函数，就会等待这个新的 Promise 对象状态发生变化。如果变为 Resolved ，就调用funcA，如果状态变为 Rejected ，就调用funcB。 \r\n\r\n\r\n### 4、Promise.prototype.catch() \r\nPromise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。 \r\n实例： \r\n```javascript\r\n getJSON(\"/posts.json\").then(function (posts) {\r\n // ...\r\n }).catch(function (error) {\r\n // 处理 getJSON 和前一个回调函数运行时发生的错误\r\n console.log(' 发生错误！ ', error);\r\n });\r\n```\r\n\r\n跟传统的try/catch代码块不同的是，如果没有使用catch方法指定错误处理的回调函数， Promise 对象抛出的错误不会传递到外层代码，即不会有任何反应。 \r\n```javascript\r\n var someAsyncThing = function () {\r\n return new Promise(function (resolve, reject) {\r\n // 下面一行会报错，因为 x 没有声明\r\n resolve(x + 2);\r\n });\r\n };\r\n someAsyncThing().then(function () {\r\n console.log('everything is great');\r\n });\r\n```\r\n\r\n### 5、Promise.all() \r\nPromise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。 \r\nvar p = Promise.all([p1, p2, p3]); \r\n上面代码中，Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 对象的实例。 \r\n\r\n实例： \r\n```javascript\r\n Promise.all([checkLogin(),getUserInfo()]).then(([res1,res2])=>{\r\n console.log(`result1:${res1.result}, result2:${res2.userID}`)\r\n });\r\n```\r\n\r\n### 6、Promise.race() \r\nPromise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个 promise 解决或拒绝，返回的 promise 就会解决或拒绝。\r\n\r\n\r\n### 7、Promise.resolve() \r\n有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。 \r\n```javascript\r\n var jsPromise = Promise.resolve($.ajax('/whatever.json')); \r\n```\r\n\r\n### 8、Promise.reject() \r\nPromise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。它的参数用法与Promise.resolve方法完全一致。 \r\n\r\n\r\n### 9、两个有用的附加方法 \r\nES6 的 Promise API 提供的方法不是很多，有些有用的方法可以自己部署。下面介绍如何部署两个不在 ES6 之中、但很有用的方法。 \r\n#### 9.1、done() \r\nPromise 对象的回调链，不管以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为 Promise 内部的错误不会冒泡到全局）。因此，我们可以提供一个done方法，总是处于回调链的尾端，保证抛出任何可能出现的错误。 \r\n```javascript\r\n asyncFunc()\r\n .then(f1)\r\n .catch(r1)\r\n .then(f2)\r\n .done();\r\n```\r\n\r\n#### 9.2、finally() \r\nfinally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。它与done方法的最大区别，它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。 \r\n```javascript\r\n server.listen(0)\r\n .then(function () {\r\n // run test\r\n })\r\n .finally(server.stop);\r\n```\r\n\r\n### 10、Promise的使用 \r\n使用 Generator 函数管理流程，遇到异步操作的时候，通常返回一个Promise对象。 \r\n```javascript\r\n function getFoo() {\r\n return new Promise(function (resolve, reject) {\r\n resolve('foo');\r\n });\r\n }\r\n \r\n var g = function* () {\r\n try {\r\n var foo = yield getFoo();\r\n console.log(foo);\r\n } catch (e) {\r\n console.log(e);\r\n }\r\n };\r\n \r\n function run(generator) {\r\n var it = generator();\r\n \r\n function go(result) {\r\n if (result.done) return result.value;\r\n return result.value.then(function (value) {\r\n return go(it.next(value));\r\n }, function (error) {\r\n return go(it.throw(error));\r\n });\r\n }\r\n \r\n go(it.next());\r\n }\r\n \r\n run(g);\r\n```\r\n\r\n\r\n### 参考文章\r\n- [超详细的 Promise 理解与实现](https://juejin.im/post/6857934319886893064)\r\n- [前端 Promise 常见的应用场景](https://juejin.im/post/6844904131702833159)\r\n- [Promise 执行过程的正确理解姿势](https://juejin.im/post/6844903974563233799)\r\n- [【JavaScript】必须要会的手写Promise](https://juejin.im/post/6844904142087913486)\r\n- [深度揭秘 Promise 微任务注册和执行过程](https://juejin.im/post/6844903987183894535)\r\n\r\n\r\n### 其他Promise相关文档\r\n- [Promise原理与实现](/books/专题知识库/05、基础知识点专题/other/09、Promise原理与实现/README.md)\r\n- [超详细的 Promise 理解与实现](https://juejin.im/post/6857934319886893064)\r\n- [前端 Promise 常见的应用场景](https://juejin.im/post/6844904131702833159)\r\n- [Promise 执行过程的正确理解姿势](https://juejin.im/post/6844903974563233799)\r\n- [【JavaScript】必须要会的手写Promise](https://juejin.im/post/6844904142087913486)\r\n",{"_58":828,"_175":153,"_176":153,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145,"_183":145},"https://api.github.com/repos/pro-collection/interview-question/issues/1/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1/timeline","pagination",{"_832":663,"_161":663},"value","actionData","errors"]