前端面试

如何写一个继承？

同步和异步有什么区别？

同步，我的理解是一种线性执行的方式，执行的流程不能跨越。一般用于流程性比较强的程序，我们做的用户登录功能也是同步处理的，必须用户通过用户名和密码验证后才能进入系统的操作。

异步，是一种并行处理的方式，不必等待一个程序执行完，可以执行其它的任务。在程序中异步处理的结果通常使用回调函数来处理结果。在JavaScript中实现异步的方式主要有Ajax和H5新增的Web Worker。

从输入URL到页面加载发生了什么

总体来说分为以下几个过程:
1、DNS解析
2、TCP连接
3、发送HTTP请求
4、服务器处理请求并返回HTTP报文
5、浏览器解析渲染页面
6、连接结束

说一下对Cookie和Session的认知，Cookie有哪些限制？

Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；
Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。

单个Cookie的最大大小
每个主机/域名路径的最大Cookie数
每个主机/域名的最大Cookie数
给定浏览器中所有Cookie的最大数量/最大总大小

描述一下XSS和CRSF攻击？防御方法？(联动上面Cookie）

XSS（Cross Site Scripting）跨站脚本
XSS其实就是Html的注入问题，攻击者的输入没有经过严格的控制进入了数据库，最终显示给来访的用户，导致可以在来访用户的浏览器里以浏览用户的身份执行Html代码。
数据流程为：攻击者的Html输入—>web程序—>进入数据库—>web程序—>用户浏览器。

一般的防御措施：
　　1.永远不相信用户的输入。需要对用户的输入进行处理，只允许输入合法的值，其它值一概过滤掉。
2.HttpOnly防止劫取Cookie
浏览器将禁止页面的Javascript访问带有HttpOnly属性的Cookie。
目前主流浏览器都支持，HttpOnly解决是XSS后的Cookie支持攻击。

如何写一个大数阶乘？递归的方法会出现什么问题？

将一个数字的每一位（个位、十位、百位、千位……）拆分出来，构成一个数组。
每次计算时，针对每一位进行数学运算，并遵循逢十进一的原则，修改数组中每一个数组元素的内容。
在完成所有运算之后，可以通过数组的join方法，将每一位连接起来，组成“字符串”输出~

使用递归实现的，对于大于170的数字，阶乘数已超出范围，会显示为Infinity。

Vue组件

组件：页面中的某一部分
创建全局组件：Vue.component创建的组件叫做全局组件。调用全局组件的时候可以通过属性传参。
创建局部组件
不能直接在父组件的模板里调用，必须在Vue实例中通过components先声明。
事件监听：通过watch，监听某一个数据的变化，一旦数据发生变化，就可以在侦听器里执行相应的逻辑。
父组件通过属性的方式向子组件传递参数；子组件通过发布订阅模式的方式向父组件传递参数。
v-text v-text=" "，双引号是划定界限的符号 把数据作为文本输出
v-html v-html=" " 不转义数据并输出
v-on v-on:事件名称="函数（方法）"，v-on：可以简写为@， 给模板上的标签绑定事件
v-bind v-bind：属性="数据项"，简写为“:” 进行属性绑定
v-model v-model="" 双向数据绑定
v-if v-if="数据" 控制dom存在与否，一次性操作选v-if
v-show v-show="数据" 控制dom显示与否，多次操作选v-show，
v-for v-for=“(item,index) of items” ：key="index" js for in 是遍历 key, 而 for of遍历value。在 vue 里面应该没区别 控制一组数据，循环显示在页面上

---

Vue属性 格式 用处
el el： 指定挂载点
data data：{} 存放vue实例的数据
methods methods：{} 定义函数，它需要手动调用才能执行，而不像computed那样，可以自动执行预先定义的函
computed computed：{} 计算属性是以Vue的依赖追踪机制为基础的，其试图处理这样的一件事情：当某一个数据（依赖数据）发生变化的时候，所有依赖这个数据的相关数据会自动发生变化，也就是自动调用相关的函数去实现数据的变动
watch watch：{} 监听数据或者属性的变化

CSS的定位即position属性的值有4种：static,relative,absolute,fixed

1. static是默认值，元素位于文档流中，正常显示，忽略元素的top,bottom,left,right属性。需要注意的一点是z-index属性在这个定位方式下始终为0.如果其他定位方式的漂浮元素要位于static定位的内容之下，必须使用负数的z-index属性才行。
2. relative是保留元素在文档流中占用的位置和尺寸，元素在static模式的位置下为起点由top,left几个属性确定相对移动的距离。
3. absolute模式文档流中不再给元素保留空间，元素相对于网页的左上角定位。
4. fixed和absolute差不多，但是它相对的是窗口的左上角，也就是文档比较长出现滚动的时候，fixed定位的元素不会跟随文档滚动。但是如果在多frame页面里面，它相对的是所在frame的左上角，而不是一些地方讲的浏览器左上角。