前端面试题整理（js）

1、HTTP协议的状态消息都有哪些？

HTTP状态码是什么：

Web服务器用来告诉客户端，发生了什么事。

状态码分类：

1**：信息提示。请求收到，继续处理
2**：成功。操作成功收到，分析、接受
3**：重定向。完成此请求必须进一步处理
4**：客户端错误。请求包含一个错误语法或不能完成
5**：服务器错误。服务器执行一个完全有效请求失败

状态码详解：

100（继续）：服务器收到的请求不完整，但服务器没有拒绝请求，客户端应重新发送一个完整的请求。

101（切换协议）：服务器改用别的协议了

200（成功）：服务器已成功处理了请求

201（已创建）：请求成功并且服务器创建了新的资源

202（已接受）： 服务器已接受请求，但尚未处理

203 （非授权信息） ：服务器已成功处理了请求，但返回的信息可能来自另一来源。

204 （无内容）： 服务器成功处理了请求，但没有返回任何内容。

205 （重置内容）： 服务器成功处理了请求，但没有返回任何内容。

206 （部分内容）： 服务器成功处理了部分 GET 请求。

300 （多种选择）： 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。

301 （永久移动）： 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。

302 （临时移动）： 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

303 （查看其他位置）： 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。

304 （未修改）： 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。

305 （使用代理）： 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。

307 （临时重定向）： 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

400 （错误请求）： 服务器不理解请求的语法。 

401 （未授权）： 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。

403 （禁止）： 服务器拒绝请求。

404 （未找到）： 服务器找不到请求的网页。

405 （方法禁用）： 禁用请求中指定的方法。

406 （不接受）： 无法使用请求的内容特性响应请求的网页。

407 （需要代理授权）： 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。

408 （请求超时）： 服务器等候请求时发生超时。

409 （冲突）： 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。

410 （已删除）： 如果请求的资源已永久删除，服务器就会返回此响应。

411 （需要有效长度）： 服务器不接受不含有效内容长度标头字段的请求。

412 （未满足前提条件）： 服务器未满足请求者在请求中设置的其中一个前提条件。

413 （请求实体过大）： 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。

414 （请求的 URI 过长）： 请求的 URI（通常为网址）过长，服务器无法处理。

415 （不支持的媒体类型）： 请求的格式不受请求页面的支持。

416 （请求范围不符合要求）： 如果页面无法提供请求的范围，则服务器会返回此状态代码。

417 （未满足期望值）： 服务器未满足"期望"请求标头字段的要求。

500 （服务器内部错误） 服务器遇到错误，无法完成请求。 

501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。

502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。

503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。

504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。

505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

常见的状态码（只要记住这些就可以了）：

200——服务器已成功处理了请求

301——请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。

404——服务器找不到请求的网页。

500——服务器遇到错误，无法完成请求。

503——服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。

504——服务器作为网关或代理，但是没有及时从上游服务器收到请求。

2、AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

AJAX的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器相应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给AJAX引擎自己来做，只有确定需要从服务器读取新数据时再由AJAX引擎代为向服务器提交请求。

跨域问题，可以实用jquery的jsonp来处理：

$(document).ready(function(){
   var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
       +"?id=1&callback=?';
   $.ajax({
     url:url,
     dataType:'jsonp',//重点
     processData: false, 
     type:'get',
     success:function(data){
       alert(data.name);
     },
     error:function(XMLHttpRequest, textStatus, errorThrown) {
       alert(XMLHttpRequest.status);
       alert(XMLHttpRequest.readyState);
       alert(textStatus);
     }});
   });

 

3、同步和异步的区别? 

举个例子：普通B/S模式（同步）——AJAX技术（异步）

同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
 

4、简述JavaScript封装。

JS封装就是尽量把使用的方式简单化，内部逻辑和使用解耦。通俗的说就是使用的时候只需要知道参数和返回值，其他条件尽量不要使用人员进行设置。

函数形式：

function taojiaqu(a,b){
    //内部对a,b进行处理
}

对象形式：

function taojiaqu(a,b){
    this.x=a;
    this.y=b;
}
var tjq = new taojiaqu(1,2);//通过面向对象的方式
alert(tjq.x)

闭包形式：

function tjq(a,b){
    var k = 1;
    return function tt(){
        k++;
        return k;
    }
}
var u = kk(1,2);
u();//闭包实现累加 k=2
u();//闭包实现累加 k=3
alert(u());//弹出4

 

5、JavaScript继承。

对象冒充：

function tjq(username){
    this.username = username; 
    this.hello = function(){ 
        alert(this.username); 
    }
}
function taojiaqu(username,password){ 
    //通过以下3行实现将tjq的属性和方法追加到taojiaqu中，从而实现继承 
    //1：this.method是作为一个临时的属性，并且指向tjq所指向的对象， 
    //2：执行this.method方法，即执行tjq所指向的对象函数 
    //3：销毁this.method属性，即此时taojiaqu就已经拥有了tjq的所有属性和方法 
    this.method = tjq; 
    this.method(username);//最关键的一行 
    delete this.method; 

    this.password = password; 
    this.world = function(){ 
          alert(this.password); 
    } 
} 
var parent = new tjq("tjq"); 
var child = new taojiaqu("taojiaqu","123456"); 
parent.hello(); //弹出tjq
child.hello(); //弹出taojiaqu
child.world(); //弹出123456

call()方法方式：

function tjq(username){
    this.username = username; 
    this.hello = function(){ 
        alert(this.username); 
    }
}
function taojiaqu(username,password){ 
    //语法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
    //定义：调用一个对象的一个方法，以另一个对象替换当前对象。 
    tjq.call(this,username);

    this.password = password;
    this.world = function(){ 
          alert(this.password); 
    } 
} 
var parent = new tjq("tjq"); 
var child = new taojiaqu("taojiaqu","123456"); 
parent.hello(); //弹出tjq
child.hello(); //弹出taojiaqu
child.world(); //弹出123456

apply方法方式：

function tjq(username){
    this.username = username; 
    this.hello = function(){ 
        alert(this.username); 
    }
}
function taojiaqu(username,password){ 
    //语法：apply([thisObj[,argArray]]) 
    //定义：应用某一对象的一个方法，用另一个对象替换当前对象。
    //跟call基本一个意思，只是第二个参数必须是数组
    tjq.apply(this,[username]);

    this.password = password;
    this.world = function(){ 
          alert(this.password); 
    } 
} 
var parent = new tjq("tjq"); 
var child = new taojiaqu("taojiaqu","123456"); 
parent.hello(); //弹出tjq
child.hello(); //弹出taojiaqu
child.world(); //弹出123456

原型链方式：

function tjq(){}
tjq.prototype.username='taojiaqu';
tjq.prototype.sayUsername=function(){
    alert(this.username);
}
function taojiaqu(){}
taojiaqu.prototype=new tjq();//将tjq中将所有通过prototype追加的属性和方法都追加到taojiaqu，从而实现了继承
taojiaqu.prototype.password='123456';
taojiaqu.prototype.sayPassword=function(){
    alert(this.password);
}
var parent = new taojiaqu(); 
parent.sayUsername(); //弹出taojiaqu
parent.sayPassword(); //弹出123456

混合方式（原型链+call()）：

function tjq(username){
    this.username=username;
}
tjq.prototype.sayUsername=function(){
    alert(this.username);
}
function taojiaqu(username){
    tjq.call(this,username);//将tjq属性继承过来
    this.password='123456';
    this.sayPassword=function(){
        alert(this.password);
    }
}
taojiaqu.prototype=new tjq();//将tjq原型链方法继承过来
var parent = new taojiaqu('taojiaqu'); 
parent.sayUsername(); //弹出taojiaqu
parent.sayPassword(); //弹出123456

 

6、什么是闭包？

官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：

1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。

2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。

简单的说，javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。

 

以下两端代码都能依次点击弹出0，1，2，3...

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js闭包</title>
    <style>
        *{margin: 0;padding: 0;}
        li{line-height: 30px;background: red;border-bottom: 1px solid #000}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>
<script>
    window.onload=function(){
        var olis=document.getElementsByTagName('li');
        for(var i=0;i<olis.length;i++){
            eventClick(olis,i);
        }
    }
    function eventClick(obj,i){
        return obj[i].onclick=function(){
            alert(i);
        }
    }

</script>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js闭包</title>
    <style>
        *{margin: 0;padding: 0;}
        li{line-height: 30px;background: red;border-bottom: 1px solid #000}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>
<script>
    window.onload=function(){
        var olis=document.getElementsByTagName('li');
        for(var i=0;i<olis.length;i++){
            (function(i){
                olis[i].onclick=function(){
                    alert(i);
                };
            })(i);
        }
    }
</script>

 由于闭包可以把变量参数存于内存当中，即使你跳转页面也还会存在，这就引发了内存泄漏，除非你关闭浏览器，它才会自动释放。