佛系前端面试题记录--第三周

1.title 与 h1的区别、b 与 strong 的区别、i 与 em 的区别？
2.用纯CSS创建一个三角形的原理是什么?
3.css 伪类与伪元素区别
4.relative和absolute的区别
5.在 CSS 样式中 px、em 、rem的区别
6.css选择器类型
7.JavaScript 原型，原型链？有什么特点？
8.JavaScript 写一个从0到59依次循环的计时器
9.js里 ```==```和 ```===```有什么区别
10.JS中闭包是什么
11.js中的同步和异步的区别
12.let ，const ，var 有什么区别
13.JS执行上下文和执行栈的理解
14.Ajax是什么？简述 JavaScript AJAX 的原理

1.title 与 h1的区别、b 与 strong 的区别、i 与 em 的区别？

（1）title标签：写在网页的head部分，是展示给搜索引擎看的，搜索引擎的搜索结果中展示的标题就是这个title标签里的内容。title权重比h1高。
h1标签：写在文章正文的标题部分，是展示给用户看的。h1标签建议在网页的出现频次为1，也就是说一个网页中，最好只会出现一个h1标签。

（2）b 与 strong 的区别：一个是物理元素，一个是逻辑元素。

物理元素，又叫实体标签，它所做的是一种物理行为，告诉浏览器我要加粗这段文字，从单词Bold中也可以看出来，英文中仅仅是加粗的意思，并没有其他作用。总结来说就是一句话：物理元素就是告诉浏览器该怎么显示出来。

逻辑元素，从英文字面上Strong就可以看出它是强调的意思，所以我们用这个逻辑元素)来向浏览器传达一个强调某段文字重要性的消息，并非是通知浏览器应该如何显示。说明此文字较为重要，也有利于搜索引擎收录。

b标签和strong标签给我们的主观感受都是加粗，但对搜索引擎来说b标签和普通的文字并没有什么区别，而strong标签却是起强调作用的。也就是说如果你想让搜索引擎认为你的某句话很重要时那就用strong标签。如果只是想让用户看到加粗的效果，那就用b标签。

（3）i 与 em 的区别
同理如em标签也是针对搜索引擎来起作用的（逻辑元素），i标签只是让用户看到展示的是斜体（物理元素）。

2.用纯CSS创建一个三角形的原理是什么?

采用的是均分原理,把矩形分为4等份,这4等份其实都是边框

代码的实现

第一步保证元素是块级元素

第二步设置元素的边框

第三步不需要显示的边框使用透明色

.square{  width:0;  height:0;  margin:0 auto;  border:6px solid transparent;  border-top: 6px solid red;  }

3.css 伪类与伪元素区别

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的虚拟元素。

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

伪类与伪元素的区别

这里通过两个例子来说明两者的区别。
下面是一个简单的html列表片段：

<ul><li>我是第一个</li><li>我是第二个</li>
</ul>

如果想要给第一项添加样式，可以在为第一个

添加一个类，并在该类中定义对应样式：

<ul><li class="first-item">我是第一个</li><li>我是第二个</li>
</ul>li.first-item {color: orange
}

如果不用添加类的方法，我们可以通过给设置第一个

的 :first-child伪类 来为其添加样式。这个时候，被修饰的
元素依然处于文档树中。
```
li:first-child {color: orange
}
```
下面是另一个简单的html段落片段：

Hello World!
如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该span元素的样式：
```
Hello World!.first {font-size: 5em;}
```
如果不创建一个元素，我们可以通过设置

的 ::first-letter伪元素 来为其添加样式。这个时候，看起来好像是创建了一个虚拟的元素并添加了样式，但实际上文档树中并不存在这个元素。
```
Hello World!p::first-letter {font-size: 5em;
}
```
从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(: : )，:hover和:active等伪类使用单冒号(: )。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。

然而，除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。

下面是根据用途分类的伪类总结图和根据冒号分类的伪元素总结图

(作者：向建峰_Javan
链接：http://www.imooc.com/article/details/id/254506
来源：慕课网)

4.relative和absolute的区别

（1）文档流不同

relative 不脱离文档流，absolute 脱离文档流。

（2）分级不同

relative 参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右）定位，并且可以通过z-index进行层次分级。

absolute通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

（3）定位不同

absolute是绝对定位，绝对定位就是相对于父元素的定位，不受父元素内其他子元素的影响；而relative是相对定位，相对定位是相对于同级元素的定位，也就是上一个同级元素。

5.在 CSS 样式中 px、em 、rem的区别

（1）px

px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素，利用px设置字体大小及元素宽高等比较稳定和精确。px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。

（2）em
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如果当前对行内文本没有进行人为字体设置，那么就相对于浏览器默认的字体大小。
特点：
1、em不是固定不变的；
2、em继承父类的字体大小。
注意：
1、任何浏览器的默认字体大小都是16px，1em=10px ；
2、在写CSS中的时候，在body选择器中声明Font-size=62.5%，那么1em=10px；
3、因为em继承父类的字体大小，那么需要重新计算你定义的字体大小，避免重复计算了。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

举例
```
html { font-size: 100%; }
.parent {height: 1em; /* 此时height等于16px */
}
.child { font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */ height: 1em; /* 此时实际height等于10px */
}
```
所以em的缺点就显示出来了：进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误。

（3）rem

rem是CSS3新增的一个相对单位，我们前面说的em是相对于父类进行设置字体大小的，这就存在一个问题，就是我们在设置任何元素的字体大小时，都需要知道他父类的字体大小，就会打来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
比如假设，我们设置html的字体大小的值为 html｛font-size:62.5%;｝那px和rem之间的换算就是px直接除以10就得到rem了，不用像em一样去定义父元素的参考值了
打个比方：
```
html{
font-size:62.5%/*1 0÷16*100 */
}
h4{
font-size:1.2rem; /* 12px */
}
p{
font-size:2.3rem; /* 24px */
}
```
兼容性：
IE8以下的版本不支持，几乎支持其他所有的浏览器。应对方法也很简单，加一个绝对单位的声明就可以了。
举个例子：
```
p {font-size:14px; font-size:.1.4rem;}
```
6.css选择器类型

标签选择器

作用：选中页面中的所有指定元素

语法：标签名{}

id选择器

作用：通过元素的id属性值钻中唯一一个元素

语法：#id{}

css类选择器

作用：通过元素的class属性值选中一组元素

语法：.class{}

可以同时为一个元素设置多个class属性值，多个值之间用空格隔开

选择器分组(并集选择器)

作用：通过选择器分组可以同时选中多个选择器对应的元素

语法：选择器1,选择器2,选择器N{}

例：选中id为p3、class属性值包含p2、h1标签
```
#p3,.p2,h1{background-color: yellow;
}
```
通配选择器

作用:选中页面中所有的元素

语法：*{}

交集选择器（复合选择器）

作用：可以选择同时满足多个选择器的元素

语法：选择器1.选择器2.选择器N{}

注意：因为id可以唯一确定一个元素，因此不要对id使用交集选择器

例：选中class属性值包含p4的span
```
span.p4{background-color:#4169E1;
}
```
后代元素选择器

作用：选中指定元素的后代元素

语法：祖先元素后代元素{}

例：选中div中的span
```
div span {color: chartreuse;
}
```
子元素选择器(IE6及以下的浏览器不支持)

作用：选中指定父元素的指定子元素

语法：父元素>子元素

例：选中div中的span
```
div>span{background-color: yellow;
}
```
伪类选择器

伪类选择器用来表示元素的一种特殊的状态。

当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类给连接定义的样式

正常链接：a:link{}

访问过的链接：a:visited{}(只能定义颜色)

鼠标滑过的连接：a:hover{}

正在点击的链接：a:active{}

否定伪类：

作用：从选种的元素中剔除某些元素

语法： :not(选择器)

例：为所有的p元素设置一个背景颜色，除了class为hello或hello2的元素
```
p:not(.hello):not(.hello2){background-color: antiquewhite;
}
```
属性选择器

作用：可以根据元素中的属性或属性值来选取指定的元素

语法：

[属性名]选取具有指定属性的元素

[属性名=属性值 ]选取含有指定属性值的元素

[属性名^=属性值]选取属性值以指定内容开头的元素

[属性名$=属性值]选取属性值以指定内容结尾的元素

[属性值*=属性值]选取属性值包含指定内容的元素
```
/*为具有title属性的p元素设置背景颜色*/
p[title] {color: darkorchid;
}/*为title属性值为hello的元素设置一个背景颜色*/
p[title=hello] {background-color: cornflowerblue;
}/*为title属性是ab开头的元素设置一个背景颜色*/
p[title^="ab"] {background-color: chartreuse;
}
p[title$="d"] {font-size: 28px;
}
```
7.JavaScript 原型，原型链？有什么特点？

我们来看一个例子
```
［javascript］ view plain copyfunction a（）{this.name = ‘a’;}
```
当创建一个函数，它会发生什么呢？

第一、它会创建1个函数对象 也就是a 本身

第二、它会创建1个原型对象@a（用@来表示）

第三、函数对象会有一个prototype指针，它指向了对应的原型对象，这里就指向了@a

第四、@a对象中有一个construtor指针，指向它的构造函数，这里就指向了a

这个prototype属性究竟有什么用呢？

其实prototype 属性表示当前函数能够控制的范围（或者说它指明了当前函数是谁的构造函数），这里a就是@a原型对象的构造函数，所以我们会看见有这种写法
```
　　［javascript］ view plain copyfunction a（）{this.name = ‘a’;}var a1 = new a（）;
```
这就和其他常见语言相似了，new 就是调用原型对象（通过prototype指针）里面构造函数（constructor）创建一个新的对象实例。

那么修改了prototype指向对象里面的属性，也就影响了所有以它为模板创建的实例，我们可以这样来验证
```
　　［javascript］ view plain copyfunction a（）{this.name = ‘a’;}var a1 = new a（）;a.prototype.age = 1;alert（a1.age）;
```
结果：1

那为什么a1对象可以直接访问到age属性呢？a1对象里面我并没有定义age属性啊，

那是因为所有实例里面都会有一个引用_proto_（在firfox，chrome下可以直接访问，ie不支持）指向了这个原型，这里就是指向了@a
```
［javascript］ view plain copyfunction a（）{this.name = ‘a’;}var a1 = new a（）;alert（a1._proto_ == a.prototype）
```
结果：true

在访问属性的时候，会先在a1对象内部中寻找，如果没有，就会顺着_proto_指向的对象里面去寻找，这里会到@a中寻找，找到就返回值，没有找到就返回undefined，用个成语来形容，就是顺藤摸瓜嘛！

至此原型链的含义就出来了，由于原型对象也有一个_proto_指针，又指向了另一个原型，一个接一个，就形成了原型链。Object.prototype是最顶层的原型，所以如果修改了Object.prototype的属性，那么就影响了所有的对象。

JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。

原型链，简单理解就是原型组成的链，对象的__proto__它的是原型，而原型也是一个对象，也有__proto__属性，原型的__proto__又是原型的原型，就这样可以一直通过__proto__想上找，这就是原型链，当向上找找到Object的原型的时候，这条原型链就算到头了

原型链实现了继承。原型链存在两个问题：
（1）包含引用类型值的原型属性会被所有实例共享。
（2）在创建子类型时，无法向超类型的构造函数中传递参数

作者：jokerW
链接：https://www.imooc.com/article/275399?block_id=tuijian_wz
来源：慕课网

8.JavaScript 写一个从0到59依次循环的计时器
```
<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body>
</body>
<script type="text/javascript">window.onload=function(){var i=0;var time=document.getElementById('time');function retime(){setInterval(function(){if(i>=59){i=0;}elsei=i+1;time.innerText=i;},1000)}retime()}
</script>
</html>
```
9.js里 ==和 ===有什么区别

==是关系运算符; ===是全等运算符。

”==”与”===”是不同的,一个是判断值是否相等,一个是判断值及类型是否完全相等。第一个是相等符；第二个全等符；

其中第一个在比较的时候，会进行类型转换，而第二个则不会，如：
alert(‘55’ == 55); //true

alert(‘55’ === 55); //false

10.JS中闭包是什么

什么是闭包

闭包是有权访问另一个函数作用域的变量的函数。
简单的说，Javascript允许使用内部函数—即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。

变量的作用域

要理解闭包，首先要理解变量的作用域。
变量的作用域无非就是两种：全局变量和局部变量。

Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

其中内部函数中可以访问外部函数的变量，是因为内部函数的作用域链中包含了外部函数的作用域；

也可以理解为：内部函数的作用范围辐射到了外部函数的作用范围。

闭包有3个特性：

①函数嵌套函数

②函数内部可以引用函数外部的参数和变量

③参数和变量不会被垃圾回收机制回收

闭包的作用
闭包常常用来「间接访问一个变量」。换句话说，「隐藏一个变量」。

在这段代码中，a()中的返回值是一个匿名函数，这个函数在a()作用域内部，所以它可以获取a()作用域下变量name的值，将这个值作为返回值赋给全局作用域下的变量b,实现了在全局变量下获取到局部变量中的变量的值

再来看一个闭包的经典例子

一般情况下，在函数fn执行完后，就应该连同它里面的变量一同被销毁，但是在这个例子中，匿名函数作为fn的返回值被赋值给了fn1，这时候相当于fn1=function(){var n = 0 … }，并且匿名函数内部引用着fn里的变量num，所以变量num无法被销毁，而变量n是每次被调用时新创建的，所以每次fn1执行完后它就把属于自己的变量连同自己一起销毁，于是乎最后就剩下孤零零的num，于是这里就产生了内存消耗的问题

闭包作为参数传递

在这段代码中，函数fn1作为参数传入立即执行函数中，在执行到fn2(30)的时候，30作为参数传入fn1中，这时候if(x>num)中的num取的并不是立即执行函数中的num，而是取创建函数的作用域中的num这里函数创建的作用域是全局作用域下，所以num取的是全局作用域中的值15，即30>15，打印30

最后总结一下闭包的好处与坏处

好处

①保护函数内的变量安全，实现封装，防止变量流入其他环境发生命名冲突

②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）

③匿名自执行函数可以减少内存消耗

坏处

①其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；

②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响

11.js中的同步和异步的区别

js是一门单线程语言，所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。如果一个任务耗时过长，那么后面的任务就必须一直等待下去，会拖延整个程序，常见浏览器无反应，可能就是一段代码死循环，造成程序卡住在这个位置，无法继续。

于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

同步任务指的是，在主线程上排队执行的任务，形成一个执行栈（execution context stack）。只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务， 只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。这就是JavaScript的运行机制。这个过程会不断重复。

可以简单地理解为：可以改变程序正常执行顺序的操作就可以看成是异步操作。例如setTimeout和setInterval函数,Ajax通信等

具体来说，异步运行机制如下：

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

回调函数
所谓"回调函数"（callback），就是那些会被主线程挂起来的代码。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应,异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。例如ajax的success，complete，error也都指定了各自的回调函数，这些函数就会加入“任务队列”中，等待执行。

更多异步操作方法详见这里。

12.let ，const ，var 有什么区别

1.提出时间

var是ES5提出的，let和const是ES6提出的。

2.是否存在变量提升

var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。

let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错。
```
console.log(f) //undefined
var f = 1 ;console.log(g) //ReferenceError: g is not defined
let g = 2;console.log(h) //ReferenceError: g is not defined
const h = 2;
```
3.是否存在暂时性死区

let和const存在暂时性死区。即只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。
```
var tmp = 123;
if (true) {tmp = 'abc'; // ReferenceErrorlet tmp;
}
//以上代码if后面{}形成了块级作用域，由于使用let声明了tmp，则这个变量就绑定了块区域，在声明之前使用，会报错。
```
在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。
总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

4.是否允许重复声明变量

var允许重复声明变量。let和const在同一作用域不允许重复声明变量。

5.是否存在块级作用域

var不存在块级作用域。let和const存在块级作用域。
到底什么叫块级作用域呢，
ES5中作用域有：全局作用域、函数作用域。没有块作用域的概念。因此也有一系列的问题。
```
//1,内层变量可能覆盖外层变量的问题
var a = 2;
function fun(){console.log(a) //undefinedif(false){var a = 3;//变量提升带来的，尽管存在块级作用域，但是var声明的变量会跨越这个域。}
}
fun()
//2,用来计数的循环变量泄露为全局变量。
var s = 'hello';
for (var i = 0; i < s.length; i++) {console.log(s[i]);
}
console.log(i); // 5 i循环结束后，泄露成了全局变量
```
ECMAScript 6(简称ES6)中新增了块级作用域。块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。
```
//1,解决内层变量可能覆盖外层变量的问题
var b = 2;
function fun1(){console.log(b) //2 访问的外层变量if(false){let b = 3;//不存在变量提升，变量存在于块级作用域之中。}
}
fun1()
//2,解决用来计数的循环变量泄露为全局变量。
var s1 = 'hello';
for (let j = 0; j < s1.length; j++) {console.log(s1[j]); //j存在于块级作用域之中，和其绑定
}
console.log(j); // 报错 j is not defined
```
6.是否能修改声明的变量

var和let可以。
const声明一个只读的常量。一旦声明，常量的值就不能改变。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

参考 https://blog.csdn.net/qq_43004614/article/details/90697463

13.JS执行上下文和执行栈的理解

1.什么是执行上下文

简而言之，执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念， JavaScript 中运行任何的代码都是在执行上下文中运行

2.执行上下文的类型
执行上下文总共有三种类型：

（1）全局执行上下文：这是默认的、最基础的执行上下文。不在任何函数中的代码都位于全局执行上下文中。它做了两件事：1. 创建一个全局对象，在浏览器中这个全局对象就是 window 对象。2. 将 this 指针指向这个全局对象。一个程序中只能存在一个全局执行上下文。

（2）函数执行上下文：每次调用函数时，都会为该函数创建一个新的执行上下文。每个函数都拥有自己的执行上下文，但是只有在函数被调用的时候才会被创建。一个程序中可以存在任意数量的函数执行上下文。每当一个新的执行上下文被创建，它都会按照特定的顺序执行一系列步骤，具体过程将在本文后面讨论。

（3）Eval 函数执行上下文：运行在 eval 函数中的代码也获得了自己的执行上下文，但由于 Javascript 开发人员不常用 eval 函数，所以在这里不再讨论。

3.执行上下文的生命周期
执行上下文的生命周期包括三个阶段：创建阶段 → 执行阶段 → 回收阶段
详情见这里

4.执行上下文栈
函数多了，就有多个函数执行上下文，每次调用函数创建一个新的执行上下文，那如何管理创建的那么多执行上下文呢？

JavaScript 引擎创建了执行上下文栈来管理执行上下文。可以把执行上下文栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。

举例
```
var color = "blue";
function changeColor() {var anotherColor = "red";function swapColors() {var tempColor = anotherColor;anotherColor = color;color = tempColor;}swapColors();
}
changeColor();
```
上述代码运行按照如下步骤：
- 当上述代码在浏览器中加载时，JavaScript 引擎会创建一个全局执行上下文并且将它推入当前的执行栈
- 调用 changeColor 函数时，此时 changeColor 函数内部代码还未执行，js 执行引擎立即创建一个changeColor 的执行上下文（简称 EC），然后把这执行上下文压入到执行栈（简称 ECStack）中。
- 执行 changeColor 函数过程中，调用 swapColors 函数，同样地，swapColors 函数执行之前也创建了一个 swapColors 的执行上下文，并压入到执行栈中。
- swapColors 函数执行完成，swapColors 函数的执行上下文出栈，并且被销毁。 changeColor
 函数执行完成，changeColor 函数的执行上下文出栈，并且被销毁。
 
 第二个例子
 
 ①：主函数创建（全局）执行上下文
 ②：创建consle.log(bar(6))的执行上下文
 ③：由于②中调用了bar（6）函数，于是创建bar（6）函数执行上下文，入栈，然后执行该函数，x=6 y=3
 ④：由于③中返回的是foo（18）函数，于是创建foo（18）函数执行上下文，入栈，然后执行foo函数，a=5 b=18
 ⑤：foo函数执行完毕，返回值为100， foo函数执行上下文出栈
 ⑥：bar（6）出栈
 ⑦：consle.log(bar(6))出栈
 ⑧：函数执行完毕，全局上下文在浏览器关闭时出栈
14.Ajax是什么？简述 JavaScript AJAX 的原理

Ajax是什么

Ajax是一种不用刷新整个页面便可与服务器通讯的办法。Asynchronous JavaScript and XML的缩写，是JavaScript、XML、CSS、DOM等多个技术的组合

Ajax优点

咱们的网页如果想要刷新局部内容。那么需要重新载入整个网页。用户体验不是很好。就是为了解决局部刷新的问题。保持其他部分不动，只刷新某些地方。

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。

Ajax技术之主要目的在于局部交换客户端及服务器之间的数据。

Ajax原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

什么是XmlHttpRequest对象

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET

请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。

尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。

XMLHttpRequest 对象是名为 AJAX的 Web 应用程序架构的一项关键功能。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

如何创建 XMLHttpRequest 对象？
```
variable=new XMLHttpRequest();
```
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
```
variable=new ActiveXObject("Microsoft.XMLHTTP");
```
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject 。一个比较常用的创建XMLHttpRequest 对象的方法：
```
 //创建XMLHttpRequest对象function CreateXmlHttp() {var xmlhttp;if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlhttp = new XMLHttpRequest();}else {// IE6, IE5 浏览器执行代码xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}return xmlhttp;}
```
参考：https://blog.csdn.net/weixin_37580235/article/details/81459282