前端面试必问问题及答案

• 写出javascript运行结果

  for(var i=0; i<10; i++){} alert(i); 1 10 这个没什么好解释的

• cookie、sessionStorage、localStorage的区别
  它们的区别在于存储的有效期和作用域的不同。
  cookie默认的有效期很短暂，只能持续Web浏览器的会话期间，一旦用户关闭浏览器，Cookie保持的数据就会丢失。cookie的作用域通过文档源和文档路径确定，默认情况下，cookie和创建它的Web页面有关，并对该Web页面以及和该Web页面同目录或者子目录的其他Web页面可见。cookie存储空间比较小。
  localStorage存储的数据是永久性的，如果不手动删除会一直保存在客户端中。作用域限制在文档源级别（文档源通过协议，主机名和端口号三者确定），同源的文档间共享同样的localStorage数据，它们可以互相读取对方的数据，甚至可以覆盖对方的数据。
  sessionStorage存储的数据存在会话期，一旦窗口或者浏览器标签页关闭，通过sessionStorage存储的数据也会被删除。作用域也是限定在文档源中，不同于localStorage的是sessionStorage的作用域还限定在窗口中，即使是同源的文档流在不同的标签页中，它们也是无法共享数据的。
  sessionStorage、localStorage存储空间比cookie大很多。

• JSONP原理
  JSONP只能处理GET请求跨域问题，不能处理POST请求跨域问题

• 简述css盒模型
  CSS盒子模型是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型包含：内容（content），填充(padding)，边框(border)，外边距(margin)属性，这些属性可以看成我们日常中见到的盒子来理解，盒子包含上下左右四条边，即盒子有边框，盒子里的东西称之为内容，该内容与盒子四个边之间存在填充，多个盒子之间存在外边距。

• 说说get和post请求的区别
  get请求：一般用于获取信息；使用url传递参数，所有内容是可见的；对所发送的信息数量有限制，一般在20000个字符。
  post请求：一般用于修改服务器上的资源；对所发送的信息数量没有限制，例如发送表单数据，新建，修改，删除等操作。

• 运行结果

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

  因为.运算符优先级高于=赋值运算符，且赋值是从右到左的，即如果存在连续赋值语句A=B=C,则连等赋值运算结果是，B=C,A=B,但是**虽然连续赋值语句的值等于拆开的赋值语句，但是js中还是不能拆开写！**js内部为了保证赋值语句的正确，会在一条赋值语句执行前，先把所有要赋值的引用地址取出一个副本，再依次赋值，所以a.x=a={n:2}执行的逻辑是：
  1）在执行前先将a和a.x中a的引用地址都取出来 2）在内存中创建一个新的对象{n:2}
  3）执行a={n:2}，将a的引用指向{n:2}
  4）执行a.x=a，此时a已经指向了新对象，而a.x因为在执行前保留了原引用，所以a.x的a依然指向原先的{n:1}对象，所以给原对象新增一个属性x，内容为{n:2}也就是现在a
  5）语句执行结束，原对象由{n:1}变成{n:1,x:{n:2}}，而原对象因为无人再引用他，所以被GC回收，当前a指向新对象{n:2}
  6）所以就有了文章开头的运行结果，再执行a.x，自然就是undefined了

• 说说类的创建、继承和闭包。 类的创建使用function创建，例如：

  function Student(name,id){ this.name=name;//类属性 this.id=id;
  this.say=function(){ alert(“hello”); };//类方法 }//构造函数 var p=new
  Student(“张三”，123)；//创建Student类的一个对象

  上述中每个对象都有name和id属性值，是不可继承的，每个对象都有唯一的属性。js的继承机制使用prototype原型：

  Student.prototype={ print:function(x){return this.x},
  toString:function(){return this.name+this.id} };
  通过上述方法Student类中所有的对象都继承print方法和toString方法。
  闭包：闭包就是能够读取其他函数内部变量的函数。参见这里的解释，很详细

• 一个页面从输入 URL 到页面加载完的过程中都发生了什么事情？越详细越好(考察知识广度)
  1）输入网址后
  2）浏览器查找域名的IP地址
  3）浏览器给Web服务器发送一个HTTP请求
  4）网站服务永久重定向响应
  5）浏览器跟踪重定向地址，发送另一个获取请求，服务器处理请求并返回一个HTML响应
  6）浏览器开始显示HTML
  7）浏览器发送请求以获取嵌入在HTML中的对象，在浏览器显示HTML时，会注意到获取其他地址内容的标签，这是浏览器会发送一个获取请求获得这些文件，这些文件包含CSS/JS/图片等资源，这些资源的地址都有经历一个和HTML读取类似的过程，所以浏览器会在DNS中查找这些域名，发送请求，重定向等

  浏览器渲染：
  1)获取HTML，构建DOM树
  2）根据css文件，构建render树,render树种不包含元素的几何信息和定位
  3)构建布局render树，布局render树包含几何信息和定位信息
  4）绘制render树

• 什么是 “use strict”? 使用它的好处和坏处是什么？
  use strict是JavaScript在严格模式下运行，消除JavaScript语法的一些不合理，不严谨之处，消除代码的不安全处，提高编译器效率增加运行速度。

  坏处是：同样的代码，在”严格模式”中，可能会有不一样的运行结果；一些在”正常模式”下可以运行的语句，在”严格模式”下将不能运行。现在网站的JS都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被压缩后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。严格模式的用法

• 创建一个1-100的数组，按顺序递增

  var a=[]; for(var i=1;i<=100;i++) { a.push(i); }

• 说说前端跨域的解决方式 可以使用代理服务器，JSONP方式和CORS机制解决跨域问题

• JavaScript实现继承的常用方法有哪些？你推荐的是哪一种？ 有5中继承方式： 1）使用对象冒充实现继承
  原理：让父类的构造函数成为子类的方法，然后调用该子类的方法，通过this关键字给所有属性和方法赋值
  2）使用call方法改变函数上下文，该继承方式不能实现原型链 原理：改变函数内部的函数上下文this，使它指向传入函数的具体对象
  3)使用apply方法 call和apply方法能实现多继承 4)使用原型链方法
  原理：使子类原型对象指向父类的实例，弊端是不能实现多继承 5)混合模式实现继承 结合call和apply方法和原型链方法实现继承
  我推荐使用原型链的方式实现继承