前端笔试题

1.  立即执行的匿名函数的用法 

(function(){
 })();

     后面的括号里可以填入参数。

在一个表达式后面加上括号（），该表达式会立即执行，但是在一个语句后面加上括号（），是完全不一样的意思，只是分组操作符。

    自执行匿名函数和立即执行的函数表达式区别：

     自执行函数：function foo() { foo();}

     自执行的匿名函数：var foo = function(){ arguments.callee()}

     立即执行的匿名函数：（function () {}()) ; /  (function(){})();

  2. 闭包的作用

• 读取函数内部的变量

  function f1(){
     var n = 1;
     return function(){
       alert(n)};
  
  }
  var result = f1(); result();//1
      

• 将变量的值始终保存在内存中

        一般来讲，当函数执行完毕后，函数内部局部活动对象就会被销毁，内存中仅保存全局作用域——js的内存回收机制

       如果这个函数内部又嵌套了另一个函数，而这个函数有可能在外部被调用到的，并且这个内部函数又使用了外部函数的某些变量的话，这种内存回收机制就会出现问题。如果在外部函数返回后，又直接调用了内部函数，那么内部函数就无法读取到她所需要的外部函数中变量的值了，所以js解释器在遇到函数定义的时候，会自动把函数和他可能使用的变量一起保存起来，也就是构建一个闭包，这些变量不会被内存回收器回收。直到内部函数被销毁或不再被调用才会销毁这个闭包，而没有任何一个闭包引用的变量才会被回收。

function createFunction(){
     var result = new Array();
     for( var i = 0; i<10; i++){
         result[i] = function(){
            return i;
         };
     }
     return result;
}

var aa = createFunction();
alert(aa[0]());//10
alert(aa[1]());//10

在这个函数中，我们直接将闭包赋值给数组。这个函数会返回一个函数数组。表面上来看，似乎每个函数都应该返回自己的索引，即位置0的函数返回0，位置1的函数返回1一次类推。但实际上，如同上面例子，每个函数都返回了10。因为每个函数的作用域链中都保存createFunctions()函数的活动对象，所以它们引用的都是同一个变量i。当createFunctions()函数返回后，变量i的值死10，此时每个函数都引用着保存变量i的同一个变量对象。所以在每个函数内部i的值都是10。

     function createFunction1(){
         var result = new Array();
         for( var i = 0; i <10; i++){
             result[i] = function(num){
                 return function(){
                     return num;
                 };
             }(i);
         }
         return result;
     }
 
     var bb = createFunction1();
     alert(bb[0]());//0
     alert(bb[1]());//1

    从createFunctions1()这个函数的执行结果来看，每个函数都返回各自不同的索引值了，是什么原因呢？
    在createFunctions1()这个函数中，我们没有直接将闭包赋值给数组，而是定义了一个匿名函数，并将立即执行该匿名函数的结果赋值给数组。对于立即执行的匿名函数来说，由于外部无法引用它内部的变量，因此在执行完后很快就会被释放。所以这里的匿名函数有一个参数num，也就是最终的函数要返回的值。在调用每个匿名函数时，我们传入了变量i。由于函数是按值传递的，所以会将变量i的当前值赋值给参数num，而这个匿名函数内部，又创建并返回了一个返回num的闭包。这样一来，result数组中的每个函数都有自己num的一个副本，因此就可以返回各自不同的数值了

3. DOM事件流包括哪些阶段

    “DOM2级事件”规定事件流包括事件捕获阶段，处于目标阶段和事件冒泡阶段。

    延申：事件流描述的是从页面中接收事件的顺序。

               事件冒泡：IE的事件流叫做事件冒泡，由最具体的元素接收，逐级向上创博到较为不具体的节点。

               事件捕获：不太具体的节点更早地接收到事件，而最具体的节点最后接收。

   DOM事件流中，实际目标在捕获阶段不会接收到事件。在捕获阶段，事件从document到再到后停止。下个阶段是“处于目标”阶段，于是时间在目标元素上发生，并在时间处理中被堪称冒泡阶段的一部分，冒泡阶段发生，事件又传播回文档。

   

4.正则表达式

5. css布局，实现一个宽度占30%的正方形

    方法一：在保持元素宽高比恒定的情况下，要使得元素可以和父元素同比例缩放，会用到padding。

                  需要知道的是，一个元素的padding，如果值是一个百分比，那这个百分比就是相对于其父元素而言。

div {
   float: left;
   margin: 10px 5%;
   padding-bottom:20%;
   width: 20%;
   height: 0;
}

   方法二：  用vh单位

.ui-square-nerd {
   width: 20%;
   height: 0 ;
   padding-bottom: 20%;
   background: blue;
}
.ui-square {
  margin-top: 30px;
  width: 20vh;
  height: 20vh;
  background: green;
}

6. html 响应码

    200：请求成功，浏览器会把响应体内容（通常html）显示在浏览器中

    404：请求的资源没有找到，说明客户端错误的请求了不存在的资源

    500：请求资源找到了，但服务器内部出现了错误

    302：重定向，当响应码为302时，表示服务器要求浏览器重新再发一个请求，服务器会发送一个响应头Location,它指定了新请求的URL地址；

    304：当用户第一次请求index.html时，服务器会添加一个名为Last-Modified响应头，这个头说明了html的最后修改时间，浏览器会把html的内容和最后响应时间缓存下来。当用户第二次请求时，在请求中包含一名if-modified-since请求头，他的值就是第一次请求时服务器通过last-modified响应头发送给浏览器的值，即index-html最后的修改时间，意义就是在告诉服务器，我这里浏览器缓存的Index最后修改时间，你看看是否一样，如果还是，就不用再响应了，直接应用缓存的内容。如果这种情况，发响应码304 ，表示无需再次发送，如果对比不同，则响应200
 

7.CSRF攻击及其应对方法

    CSRF：跨站请求伪造。攻击者盗用了你的身份，以你的名义发送恶意请求

    防御方法：1. 验证HTTP Rederer字段

                      2.在请求地址中添加token并验证

                      3.在HTTP头中自定义属性并验证

8. XSS

    跨站脚本攻击 ，注入恶意的脚本

    防御：1.在输入流中截住form data中的恶意脚本

               2.html encode,对用户输入进行编码，对标签进行转换