腾讯第一次面试

8月4号下午突然接到腾讯电话，第一次面试没想到这么快！
下面是根据自己的回忆记录下来的面试题，比较确定的答对的题目应该有60~80%吧，但是面试官对一些本来以为不重要的点追问了很久。例如XSS和CSRF。总之，这次面试表现的很一般，也是因为太突然的原因，这段时间一直关注于另一个项目，所以很多东西都忘了点儿，但是相比于之前已经有了很大的进步了，还得抓紧把这些面试内容梳理一下，争取下次能全部答对！

1. 基本数据类型有哪些，如何检测（同时要求解释typeof和instanceof，算是答对了）
2. 如何获取html元素的属性（不确定的答对了）
3. 解释盒模型，都有哪些属性（margin，padding，忘了解释border）
4. Css定位方式有几种，fix和absolute的区别，清楚浮动的方法，（CSS部分忘了太多了，算对了30%吧）
5. 如何添加事件，addEventListener，有几个参数，分别是什么？如果回调函数是匿名的，能删除这个事件吗？（第三个参数忘掉了，回答的是不能删除，但是不明白原理）
6. 异步加载的方法，ajax，怎么实现的，XMLHttpRequest，状态码有什么，分别代表什么意思，200 301 302 4xx 5xx，ajax里面readystate数值为0-4，（状态码的含义忘掉了，其他记得）
7. 数组如何删除，添加元素，怎么复制一个数组（突然想不起来了，复制数组知道会遇见深浅拷贝的问题，但是想不起来没干乱说）
8. XSS攻击是怎么发生的，什么时候回发生，原理是什么，怎么预防，详细一点儿。只能获取cookie吗？（能解释清楚60%）
9. CSRF攻击的原理，详细一点儿？（解释不清楚）
10. 事件委托和事件冒泡相关吗？怎么用事件代理，事件代理中，外层元素绑定了某个事件，如果会被触发几次，也就是console.log几次？（事件代理这种概念可以解释清楚，但是最后一个问题问的好奇怪，不太理解什么意思，觉得就应该是1次呀，不知道为什么这么问，没有想到考点是啥）
11. 闭包是什么，自己怎么用的？（闭包的基本原理能解释清楚，但是自己怎么用的这个不知道怎么说）
12. 原型是什么，prototype属性，构造函数，constructer属性（答的点不是面试官最关心的部分，所以只能是半对）
13. ES5和ES6的区别，（只答出来了两点，箭头函数和promise）
14. 为什么要跨域，能实现跨域的标签，（能解释清楚，link img script）
15. 最近看什么书，（clean code，为了突出想提高代码质量）
16. JSONP的原理，（能解释情况）
17. settimeout和setinterval，用settimeout能实现setinterval吗？哪个定时更加精确。如果同时又两个，定时都为1s，那么谁先发生第一次。（这个问题基本答不上来，因为没见到过这个关注点）
18. vue里面的生命周期？vue是哪种类型的框架，和jquery的区别。（生命周期没记住，MVVM框架，问和jquery框架的区别，我说我用的不是很多，一般只用jquery操作dom元素，所以没把他当框架用，只是当做库来用）

1. 基本数据类型有哪些？怎么检测数据类型？

基本数据类型分为：值类型，引用类型
值类型包括undefined, string, number, boolean
引用类型包括object, function
（面试的时候把undefined说成了null）
基本类型的判断方法为typeof，但是面试官同时在引导我回答instanceof，不知道为什么。

2. html元素的属性是如何获取的。这里面试官给的例子是个下拉菜单，说点击某个下拉项会跳转到某个页面，这个页面的属性是怎么获取的？（根据印象是这样，但是感觉问的好奇怪）然后接着说如果是个a标签的话，它的href属性是怎么拿到的？

ele.href就可以拿到（当时这点不是很确定，不过答对了）

3. 你是怎么理解盒模型的？我表示不好回答之后，面试官说盒模型都有哪些属性？

margin和padding，margin代表元素与其他元素之间的距离，padding代表内容区和边框的距离

正确答案应该是，padding区域，border区域，margin区域都解释一下

4.Css定位方式有几种，fix和absolute的区别，清楚浮动的方法，（原理）

共有static, relative, absolute, fixed（好久没看CSS了，被我说成了float，relative， absolute）

position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

5. 如何添加事件，addEventListener，有几个参数，分别是什么？如果回调函数是匿名的，能删除这个事件吗？

有三个参数：

参数 描述 event 必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。 function 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。 useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值:true - 事件句柄在捕获阶段执行；false- 默认。事件句柄在冒泡阶段执行

这次面试时面试官着重提了第三个参数的含义，一时没想起来，这里划重点。

关于是否能将addEventListener添加的匿名函数移除的问题，并不理解，因此查阅网上的说辞：

通过 addEventListener() 来添加的匿名函数无法
但是有很多人使用各种方法来绕过这个问题，所以推测是无法移除的，不然也不会绕过去

6. 异步加载的方法，怎么实现的，状态码有什么，分别代表什么意思，ajax里面状态？

共4步，不要漏掉了：

• new一个对象，
• 定义它的onreadystatechange，这是异步调用的，
• 然后open，open中填入请求URL地址和方式，
• 最后send

异步加载使用的是ajax，实现方式如下：

var url = "xxx.xxx.xxx"var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {    if (this.readyState == 4 && this.status == 200) {       // Typical action to be performed when the document is ready:       document.getElementById("demo").innerHTML = xhttp.responseText;    }};xhttp.open("GET", url, true);xhttp.send();

---

下面是对于http状态码的总结，要多默写几遍，几乎必考（虽然感觉不是很重要，但是确实每次都考）

状态码 含义 2xx 成功 200 服务器成功处理了请求，并且返回了请求结果 204 服务器成功处理了请求，但是没有返回任何内容 3xx 重定向 301 请求的网页永久移动到了新位置 302 请求的网页临时移动到了新位置 304 网页在上次请求之后没有更新 4xx 都是客户端的错 400 服务器不理解请求的语法 403 服务器拒绝请求 404 服务器找不到请求的页面 410 请求的资源被永久删除了，类似于404，如果资源永久删除，应当使用301指定资源的新位置 5xx 都是服务器的错 500 服务器遇到错误，无法完成请求 503 服务器目前无法使用，通常只是暂时状态

---

下面是W3C中对于readystate的介绍：

Value State Description 0 UNSENT Client has been created. open() not called yet. 1 OPENED open() has been called. 2 HEADERS_RECEIVED send() has been called, and headers and status are available. 3 LOADING Downloading; responseText holds partial data. 4 DONE The operation is complete.

7. 数组如何删除，添加元素，怎么复制一个数组

Array 对象方法

方法 描述 concat() 连接两个或更多的数组，并返回结果。 join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 pop() 删除并返回数组的最后一个元素 push() 向数组的末尾添加一个或更多元素，并返回新的长度。 shift() 删除并返回数组的第一个元素 unshift() 向数组的开头添加一个或更多元素，并返回新的长度。 slice() 从某个已有的数组返回选定的元素 splice() 删除元素，并向数组添加新元素。 reverse() 颠倒数组中元素的顺序。 sort() 对数组的元素进行排序 toSource() 返回该对象的源代码。 toString() 把数组转换为字符串，并返回结果。 toLocaleString() 把数组转换为本地数组，并返回结果。 valueOf() 返回数组对象的原始值

---

数组的复制：

var array = [1,2,3]; var array_shallow = array; // 这是以引用的形式进行的复制，因此更改一个另外一个也会变var array_concat = array.concat(); // 数组中的值类型会直接复制，引用类型的并没有创建新的，没有进行深层复制。var array_slice = array.slice(0);  // 跟上一个完全一样，这两个都是看起来像是深拷贝var obj = { a: 1 };var copy = Object.assign({}, obj);console.log(copy); // { a: 1 }// 下面是使用for...in...的方式进行的浅复制，只能复制到第一层，也就是对象中的对象是引用复制，function shallowClone(copyObj) {  var obj = {};  for ( var i in copyObj) {    obj[i] = copyObj[i];  }  return obj;}// 下面这个方法是最接近深拷贝的var target = JSON.parse(JSON.stringify(source));// 这种方法依然有一些问题，就是正则表达式类型、函数类型等无法进行深拷贝(而且会直接丢失相应的值)

特别说明assign的用法：

Object.assign(a, b, c, d)最后的结果是b c d的所有属性都被叠加在了a里面，也就是可以通过这种方式将多个对象同时复制给一个对象。仅限于可枚举属性。

8. XSS攻击是怎么发生的，什么时候回发生，原理是什么，怎么预防，详细一点儿。只能获取cookie吗？

慕课网的一篇文章写的比较具体易懂，这里也把原文放在这里：

XSS攻击是什么

• XSS是跨站脚本攻击的缩写，是一种网站应用程序的安全漏洞攻击，是代码注入的一种。
• 通常是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。
• 这些恶意网页程序通常是JavaScript，但实际上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。
• 攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。

XSS攻击基本原理——代码注入

在web的世界里有各种各样的语言，于是乎对于语句的解析大家各不相同，有一些语句在一种语言里是合法的，但是在另外一种语言里是非法的。这种二义性使得黑客可以用代码注入的方式进行攻击——将恶意代码注入合法代码里隐藏起来，再诱发恶意代码，从而进行各种各样的非法活动。只要破坏跨层协议的数据/指令的构造，我们就能攻击。
历史悠久的SQL注入和XSS注入都是这种攻击方式的典范。现如今，随着参数化查询的普及，我们已经离SQL注入很远了。但是，历史同样悠久的XSS却没有远离我们。
XSS的基本实现思路很简单——比如持久型XSS通过一些正常的站内交互途径，例如发布评论，提交含有JavaScript的内容文本。这时服务器端如果没有过滤或转义掉这些脚本，作为内容发布到了页面上，其他用户访问这个页面的时候就会运行这些脚本，从而被攻击。

攻击分类举例

• 反射型XSS：反射性XSS，也就是被动的非持久性XSS。诱骗用户点击URL带攻击代码的链接，服务器解析后响应，在返回的响应内容中隐藏和嵌入攻击者的XSS代码，被浏览器执行，从而攻击用户。
  URL可能被用户怀疑，但是可以通过短网址服务将之缩短，从而隐藏自己。
• 持久型XSS：也叫存储型XSS——主动提交恶意数据到服务器，攻击者在数据中嵌入代码，这样当其他用户请求后，服务器从数据库中查询数据并发给用户，用户浏览此类页面时就可能受到攻击。可以描述为:恶意用户的HTML或JS输入服务器->进入数据库->服务器响应时查询数据库->用户浏览器。
• DOM-based XSS：基于DOM的XSS，通过对具体DOM代码进行分析，根据实际情况构造dom节点进行XSS跨站脚本攻击。 注：domxss取决于输出位置，并不取决于输出环境，因此domxss既有可能是反射型的，也有可能是存储型的。dom-based与非dom-based，反射和存储是两个不同的分类标准。

防范

记住一句至理名言——“所有用户输入都是不可信的。”（注意: 攻击代码不一定在中）

• 使用XSS Filter，输入过滤，对用户提交的数据进行有效性验证，仅接受指定长度范围内并符合我们期望格式的的内容提交，阻止或者忽略除此外的其他任何数据。
• 输出转义，当需要将一个字符串输出到Web网页时，同时又不确定这个字符串中是否包括XSS特殊字符，为了确保输出内容的完整性和正确性，输出HTML属性时可以使用HTML转义编码（HTMLEncode）进行处理，输出到

困难和幸运

真正麻烦的是，在一些场合我们要允许用户输入HTML，又要过滤其中的脚本。这就要求我们对代码小心地进行转义。否则，我们可能既获取不了用户的正确输入，又被XSS攻击。
幸好，由于XSS臭名昭著历史悠久又极其危险，现代web开发框架如vue.js、react.js等，在设计的时候就考虑了XSS攻击对html插值进行了更进一步的抽象、过滤和转义，我们只要熟练正确地使用他们，就可以在大部分情况下避免XSS攻击。
同时，许多基于MVVM框架的SPA（单页应用）不需要刷新URL来控制view，这样大大防止了XSS隐患。另外，我们还可以用一些防火墙来阻止XSS的运行。
>
作者： 沐雨一橙风 链接：http://www.imooc.com/article/13553?block_id=tuijian_wz
来源：慕课网 本文原创发布于慕课网 ，转载请注明出处，谢谢合作！

9. CSRF攻击的原理，详细一点儿？

一.CSRF是什么？

　　CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。

二.CSRF可以做什么？

　　你这可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账……造成的问题包括：个人隐私泄露以及财产安全。
　
更多的内容参见这篇文章

10. 事件委托和事件冒泡相关吗？事件代理中，外层元素绑定了某个事件，如果会被触发几次，也就是console.log几次？（这个问的好奇怪，不太理解什么意思，没有想到考点是啥）

详细的分析参见这篇文章：

https://segmentfault.com/a/1190000000470398

11. 闭包是什么，自己怎么用的？

闭包好解释，但是自己怎么用的。。。。

（待完成）

12. 原型是什么，prototype属性，构造函数，constructer属性

13. ES5和ES6的区别，只答出来了两点，箭头函数和promise

14. 能实现跨域的标签，link img script

15. 最近看什么书，clean code

16. JSONP的原理，

17. settimeout和setinterval，用settimeout能实现setinterval吗？哪个定时更加精确。如果同时又两个，定时都为1s，那么谁先发生第一次。

这道题，不是很确定，但是根据查阅的资料显示，setInterval的定时更加精确，因为用的是系统时间

相同点：两个方法都是先触发间隔时间，再触发回调函数

区别：

1.setInterval每隔指定的时间就执行一次表达式，若不停止会一直执行下去

而setTimeout在执行时,是在载入后延迟指定时间后,去执行一次表达式,次数仅为一次

2.将setTimeout包含于被执行函数中,然后在函数外再次使用setTimeout来达到定时执行的目的

这样,函数外的setTimeout在执行函数时再次触发setTimeout从而形成周而复始的定时效果，但是

这样每次时间就相当于延迟时间+函数执行时间，时间越久，误差越大；

而setInterval是间隔时间去执行函数，并不会产生误差，setInterval适用于显示时间，精确度高

第二问经过我的测试，得到的结果让我有点儿吃惊。

谁写在前面谁就先执行，如果interval写在前，那么interval一定先执行，如果timeout写在前面，那么timeout有90%的几率会先执行。

本来以为不论怎么样都是interval先执行。这么来看的话，第一次定时对于timeout和interval来说，都不是很精确，知识interval稍微好点儿，但是也不能保证。根据我的理解，由于时间差太接近，导致异步执行的队列中，如果同时发生，那么队列前面的先执行吧~~~

用setTimeout实现setInterval的方法

setTimeout(function(){    // doSomething    setTimeout(arguments.callee, 1000)},1000)

注意这里不用使用箭头函数的形式，因为箭头函数是没有arguments的