面试题集

请描述下JS的原型链是什么？
答：说白了，其实就是有限的实例对象和原型之间组成有限链，就是用来实现共享属性和继承的。
JS怎么实现继承的？有哪几种方式，分别有什么区别，你觉得哪种方式最好？
答：通过Object.create函数，这个函数有个特性：创建出来的对象的原型指向传进去的参数。
- Cat.prototype = Object.create(Animal.prototype);
- Cat.prototype.constructor = Cat;
请描述下this对象是什么，不同场景的区别。
答：this是当前执行上下文对象。
1. 在全局作用域下，它指向window。
2. 在函数调用时，谁调用的就指向谁。
3. 在通过apply或call调用时，this指向第一个参数。
4. 在通过bind返回的函数里，this始终指向在bind函数生成时传进去的第一个参数。
CSS怎么实现水平垂直居中？
- 水平居中：
  行内元素：通过设置父元素的text-align: center;
  定宽块状元素：设置自己的左右margin为auto
  不定宽块元素：
  1. 加入 table 标签
  2. 设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
  3. 通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
  4. 设置自己的 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，然后设置自己的 transform: translate(-50%, 0); 向左位移50%，即达到居中的目的
- 垂直居中：
  父元素高度确定的单行文本：通过设置父元素的 height 和 line-height 高度一致来实现
  父元素高度确定的多行文本（方法一）：包裹一层 table (包括tbody、tr、td)标签，利用td默认的 vertical-align：middle 特性来实现
  父元素高度确定的多行文本（方法二）：可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
  还有一种方式：通过设置 position: relative; top:50%，transform: translate(0, -50%)，也可以达到垂直居中的效果。
请描述下CSS的transform、translate、transition分别是什么？
- transform：变形属性，像rotate、scale、skew、translate 都是该属性的变形函数值，例如可以设置：transtform: rotate(90deg);
- translate：是位移变形函数，例如可以设置：transform: translate(-50%, -50%);
- transition：过渡属性，例如可以设置：transition: width 3s ease-in 1s;
如何理解闭包？
- 定义和用法：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其他变量，如果返回的这个函数在外部被执行，就产生了闭包。
- 表现形式：使函数外部能够调用函数内部定义的变量
- 范例：
```
function add () {
    var count = 0;
    return function () {
        count += 1;
        alert(count);
    }
}
```

用ES6去除数组重复元素？

var arr = [1, 2, 3, 2, 1, 4, 5, 4];
var arr2 = [...new Set(arr)];

请描述下let和var的区别？

let不允许重复定义，var允许
let没有变量提升，var有
let有块级作用域，var没有，例如for循环中的i定义：

for (var i = 0; i < 10; i ++) {
    // ...
}
console.log(i); // 输入10

---------------------------------------

for (let i = 0; i < 10; i ++) {
    // ...
}
console.log(i); // ReferenceError: i is not define.

浏览器是如何渲染页面的？有哪些步骤？
1. 解析HTML文件，创建DOM树。(自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）)
2. 解析CSS。
3. 将HTML和CSS合并，构建渲染树（Render Tree）。
4. 绘制渲染树。
一个网站经过哪些流程上线？
答：市场调研、需求讨论、功能模块划分、技术选型（前后端）、版本迭代（开发、测试、部署（域名解析）、发布）
css权值？
!important: 10000
style: 1000
id: 100
class: 10
tag: 1
*: 0
css中em和rem的区别？
em 是基于父元素的font-size样式比例
rem 是基于html的font-size样式比例
[扩展链接](https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&srcqid=2307799849209245210&tn=02003390_1_hao_pg&wd=css rem 自适应&oq=css权值&rsv_pq=df1b940a00003fb1&rsv_t=afadPSy4sK/OB7GDsi3Y9ftu06PuSCRVbw75B5Vosh18Q+66gr3X1GGfzZpANSI4UtaZLl7QPZ4&rqlang=cn&rsv_enter=1&rsv_sug3=11&rsv_sug1=10&rsv_sug7=100&rsv_sug2=1&prefixsug=rem使用&rsp=2&inputT=5039&rsv_sug4=5040)
伪类和伪元素的区别？
伪类：用于向某些选择器添加特殊的效果
伪元素：用于将特殊的效果添加到某些选择器
:和::的区别？

伪类
:: 伪元素
怎么实现一个倒三角？
用border，给border的左、下、右的颜色设为透明（transparent）
描述下js事件流？
捕获、目标、冒泡
preventDefault
stopPropagation
traget
currentTarget
扩展链接
描述下你是怎么理解h5的？
简单理解就是HTML(超文本标记语言)的第五次重大修改的版本，04年正式提出，07正式被w3c接纳，相比html4，主要增加了新元素互操作性，主要是针对移动设备和多媒体，更好的语义化和SEO，有更完善的标签和更强大的API。