面试题

　　这篇博文中的面试题是我在掘金上看到的，没有答案。于是希望通过这篇文章补充答案，加深记忆。

　　原文链接：2016各大互联网公司前端面试汇总

　　据原文作者所说：2016年行业整体对前端的需求是供大于求的。不过大公司对于前端的要求越来越高，而小公司相对来说要求较低，能够快速上手即可。在过去的一年里，前端发展依旧很迅速，会React的或者React Native的会很吃香，而传统IE6的兼容性几乎不再考察。下面是一些知名企业的前端面试问题。（题目部分先后，部分题目是老生常谈，也罗列出来了）

　　

百度篇

1.写出JavaScript运行结果：

for(var i=0; i<10; i++){} alert(i);  

Answer：10。因为JavaScript中没有块级作用域，所以最终i为10，并且为全局变量。如果这里的var修改为let（ES6中关键字），则将报错（i未被定义）。

2.Cookie、sessionStrorage、localStorage的区别

Answer:

　　共同点：它们都是保存在浏览器端的，且同源的。（同源策略规定：不同域的客户端脚本在没有明确授权的情况下，不能读写对方的资源。其中同源是指同协议，同域名，同端口。对方的资源是指web页面，包括cookie、http消息头、dom树等。因此不同源，是不可能读取对方的cookie资源的。）

　　区别：（1）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。（2）cookie数据还有路径(path)的概念，可以限制cookie只属于某个路径下。(3)存储大小限制也不同，cookie数据不能超过4k，因为每次http请求都会携带cookie，所以cookie只能保存很小的数据，如会话标识。而sessionStorage和localeStorage虽然也有存储大小的限制，但比cookie大的多，可以达到5M或更大。(4)数据有效期不同。sessionStorage仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localeStorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前有效，就是窗口或浏览器关闭。(5)作用域不同。sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage在所有的同源窗口中都是共享的；cookie同样也是在所有的同源窗口中共享。

3.JSONP原理

Answer:

　　很简单，就是利用<script>标签没有跨域限制的"漏洞"（历史遗迹）来达到与第三方通讯的目的。当需要通讯是，本站脚本建立一个<script>元素，地址指向第三方的API网址，形如: <script src="http://www.example.net/api?param1=1&param2=2"></script> 。并在本站提供一个回调函数用于接收数据(函数名可约定，或通过地址参数传递)。第三方产生的响应为json数据的包装(故称之为jsonp，即 json padding),形如:callback({"name":"hax","gender":"male"})，即在第三方API中调用本站的回调函数，这样浏览器会调用callback函数，并传递解析后json对象作为参数，本站脚本可在callback函数里处理所传入的数据。（"历史遗迹"的意思就是：如果在今天重新设计的话，也许就不会允许这样简单的跨域了，比如可能像XHR一样按照CORS规范要求服务器发送特定的http头）。

　　注：引用自贺师俊在知乎中的回答。

4.简述css盒模型

Answer:

　　所有的HTML元素可以看作盒子，在css中，"box model"这一术语是用来设计和布局中使用。css盒模型本质上是一个盒子，封装周围的HTML元素，它包括:外边距、边框、填充和实际内容。

　　css盒模型根据width以及height的定义不同一般可分为标准盒模型和IE5.X和6中在怪异模式中的非标准盒模型。

　　标准盒模型：width=实际内容

　　非标准盒模型：width=border-left-width+padding-left+实际内容+padding-right+border-right-width

5.说说get和post请求的区别

Answer:

　   相同点：两者均是在客户机和服务器之间进行请求-响应时最常用的HTTP请求方法。

　　不同点：(1)GET - 从指定的资源请求数据

　　　　　　　 POST - 向指定的资源提交要被处理的数据　　

　　　　　　(2)查询字符串(名称/值对)是在GET请求的URL中发送的：如/test/demo_form.php?name1=value1&name2=value2；在POST请求中是在请求的HTTP消息主体中发送的，如：

POST /test/demo_form.php HTTP/1.1
Host: w3cschool.cc
name1=value1&name2=value2　　

　　　　　　（3）

                    

6.下面代码的运行结果：

var a = {n: 1}  
var b = a;  
a.x = a = {n: 2}; 
console.log(a.x);  
console.log(b.x);

Answer:

　　console.log(a.x);//undefined

　　console.log(b.x);//Object

　　思路：第一步：创建一个a对象，然后变量指针b指向变量指针a指向的对象。

　　　　   第二步：赋值方向：对于A=B=C，方向为B=C，A=B。且.运算符的优先级高于=运算符。因此先在变量指针a和b所指向的对象中创建一个x属性，然后将{n:2}对象复制给a，于是变量指针a指向了这个新的对象（变量指针b仍指向原来的对象），接着把a赋值给起初是a和b共同指向的对象。

　　　　　结论：因此可以得到a.x为undefined的结果，因为a指向了一个新对象，故无x属性，而b.x是由a赋值的，所以b.x是一个对象{n:2}。

　　http://www.cnblogs.com/xxcanghai/p/4998076.html