讯飞易听说前端面试(2019/02/16)
开学随便投的，在准备教师资格证，没有复习就去了，真的是凉凉，一问三不知
面试一开始面试管让我自我介绍，哇，当时只会说面试官您好，我叫卓文智，现在想想真的很丢人。理所当然地，一面就凉了。
1. JavaScript数据类型
值类型(基本类型): 字符串(String), 数字(Number), 布尔(Boolean), 对空(Null), 未定义(Undefined),代表(Symbol)
`注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。 `
引用数据类型:对象(Object),数组(Array),函数(Function)
2. 闭包概念
闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。
3. 解释this变量，call 和 apply 的作用，区别
`apply()`方法调用一个具有给定`this`值的函数，以及作为一个数组（或类似数组对象）提供的参数。
`bind()`方法创建一个新的函数，在调用时设置`this`关键字为提供的值，并在调用新函数时，将给定的参数列表作为原函数的参数序列的前若干项
`call()`方法调用一个函数，其具有一个指定的`this`的值和分别地提供参数(参数的列表)
`call()`方法和 apply() 方法类似 ，区别在于call()方法接受的是参数列表而apply()方法接受的是一个参数数组`
4. 为什么要对对象进行深度克隆，如何实现
当一个变量向另一个变量复制引用类型的值时，同时也会将存储在变量对象中的值复制一份放到为新变量分配的空间中。不同的是，这个值实际上是一个指针，而这个指针指向存储在堆中的一个对象。复制操作结束后，两个变量实际上引用同一个对象。因此改变其中一个变量就会影响另一个变量。
涉及`JS的数据类型、数据存储、内存管理`
每一个数据都需要一个内存空间，分为栈内存(stack)和堆内存(heap)
基础数据类型和栈内存
基础数据类型都有固定大小，保存在栈内存中，由系统自动分配空间。我们可以直接操作保存在栈内存中的值，基础数据类型都是按值访问的，他们的值存储在变量访问的位置
引用数据类型和堆内存
引用数据类型都是保存在堆内存中，大小不固定，动态填充。在操作对象时，实际上是在操作对象的引用而不是实际的对象。因此，引用类型的值都是按引用访问的。
5. position取值和含义
position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。
取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。
`absolute`生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
`fixed`生成固定定位的元素，相对于浏览器窗口进行定位。
`relative`生成相对定位的元素，相对于其正常位置进行定位。
`static`默认值。没有定位，元素出现在正常的流中。
`sticky`粘性定位，该定位基于用户滚动的位置。
`inherit`规定应该从父元素继承 position 属性的值。
`initial`设置该属性为默认值
6. 块级元素和行内元素区别
行内元素与块级元素直观上的区别
行内元素会在一条直线上排列，都是同一行的，水平方向排列
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
行内元素与块级元素属性的不同，主要是盒模型属性上
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效（是有效的，只是不像块级元素会影响其他行）
7. 简述盒模型，以及不同浏览器的差异
标准盒模型和IE盒模型的区别
W3C标准下padding、border所占的空间不在width、height范围内，而IE盒模型width包括content尺寸＋padding＋border的总和
8. CSS中的float机制以及使用方式
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
`元素怎样浮动`
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
9. 如何实现元素的垂直和水平居中
- CSS3的transform
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
flex盒子布局
display的table-cell
10. 描述CSS中的float机制以及使用方式
工作原理
W3C:浮动的框可以向左或右移动，直到它的外缘遇到包含框或者另一个浮动框的边缘。浮动框不属于普通文档流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框(通常是文本)的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动的高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素,也就表现出高度为0（高度塌陷）。
float属性:left| right |none
清除浮动
clear:left| right |both |none
闭合浮动：使元素闭合，从而减少浮动带来的影响
方法一（差）：添加额外标签
在浮动元素末尾添加一个新标签，例如：
<div style=”clear:both;”></div>(清除float:left 和 float:right的影响)优点：通俗易懂，容易掌握
缺点：将添加很多无意义的空标签，有违结构与表现的分离，后期维护会是噩梦。
方法二（差）：使用br标签及自身html属性
这个方法有些小众，br 有 clear=“all | left | right | none” 属性
<br clear=”all” />(清除float:left 和 float:right的影响)<br clear=”left “ />(清除float:left的影响，如果是float:right造成的浮动影响这样写无用)<br clear=”right” />(清除float:right的影响，如果是float:left造成的浮动影响这样写无用)优点：比空标签方式语义稍强，代码量较少
缺点：同样有违结构与表现的分离，不推荐使用
方法三（差）：父元素设置overflow属性
通过设置父元素overflow值设置为hidden;在IE6中还需要触发hasLayout，例如zoom：1;
优点：不存在结构和语义化问题，代码量极少
缺点：overflow:hidden; 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；不要使用
overflow:auto; 多层嵌套后，firefox与IE 可能会出现显示错误；不要使用
方法四（差）：父元素也设置浮动
优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用
方法五（差）：父元素设置display:table
优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用
方法六（可）：使用:after伪元素
:after 伪元素在元素之后添加内容。
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:”.”生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:”XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”,有些版本可能content 里面内容为空,不推荐这样做的,firefox直到7.0 content:”” 仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。
通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。
闭合浮动的原理：
以上方法，分为两类：
在浮动元素末尾添加一个空元素 (方法一，二，六)
设置父元素overflow 或者 display:table 来闭合浮动 (方法三，四，五)
为什么设置父元素overflow 或者 display:table 可以闭合浮动?
原理为:Block formatting contexts （块级格式化上下文），以下简称 BFC。
如何触发BFC?float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block)
position（absolute，fixed）
fieldset元素
BFC的特性：块级格式化上下文会阻止外边距叠加
当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。
块级格式化上下文不会重叠浮动元素
根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题——可以看这个测试用例）。
块级格式化上下文通常可以包含浮动
通俗地来说：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。
overflow:hidden或者auto可以闭合浮动，就是因为父元素创建了新的BFC。
11. jquery 里绑定事件有几种方法，区别
12. 事件冒泡和事件捕获的概念，如何实现事件委托
13. domReady, onload, 前写js，这三者的区别，如何选择
14. 如何使用js改变元素的样式
15. http协议有几种方法
16. 请简述浏览器缓存机制
17. 简述XSS和CSRF攻击以及对应的防范措施
18. 请实现indexOf功能
19. 网站性能优化
代码
function Text () {
var a = 0
console.log(a)
console.log(this.a)
var a
console.log(a)
}
三条语句执行结果是什么
Text()
new Text()
setTimeout(Text, 100)
