前端常见面试题总结---第三篇

谁借莪１个温暖的怀抱￠ 2022-09-24 12:28 167阅读 0赞

**1 http状态码有那些？分别代表是什么意思？**

1.  100-199 用于指定客户端应相应的某些动作
2.  200-299 用于表示请求成功
3.  300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
4.  400-499 用于指出**客户端的错误**  
    400：语义有误，当前请求无法被服务器理解  
    401：当前请求需要用户验证  
    403：服务器已经理解请求，但是拒绝执行它
5.  500-599 用于支持服**务器错误**  
    503：服务不可用  
    **2 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？**

分为4个步骤：  
1. 当发送一个 URL 请求时，浏览器都会**开启一个线程**来处理这个请求，同时在远程 DNS 服务器上启动一个 **DNS 查询**。这能使浏览器获得请求对应的 IP 地址。

1.  浏览器与远程 Web 服务器通过 **TCP 三次握手协商来建立一个 TCP/IP 连接**。  
    该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
2.  一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器**发送 HTTP 的 GET 请求**。远程服务器找到资源并使用 **HTTP 响应返回该资源**，值为 200 的 HTTP 响应状态表示一个正确的响应。
3.  此时，Web 服务器提供资源服务，客户端开始下载资源。

请求返回后，浏览器会解析 HTML 生成 DOM Tree，其次会根据 CSS 生成 CSS Rule Tree，而 javascript 又可以根据 DOM API 操作 DOM

**3 javascript对象的几种创建方式**  
1. 工厂模式

//根据接受的参数来构建一个包含所有必要信息的Person对象
    function createPerson(name,age,job){ 
     var o=new Object();
     o.name=name;
     o.age=age;
     o.job=job;
     o.sayName=function(){ 
     alert(this.name);
     };
     return o;
    }
    
    var person1=createPerson("lwg",20,"student");
    var person2=createPerson("xiaoliu",20,"engineer");

1.  构造函数模式

//构造函数以大写字母开始
    function Person(name,age,job){ 
     this.name=name;
     this.age=age;
     this.job=job;
     this.sayName=function(){ 
      alert(this.name);
     };
    }
    var person1=new Person("lwg",20,"student");

要创建Person的新实例，**必须使用new操作符**，这种方式调用构造函数实际上会经历4个步骤：  
（1）创建一个新对象；  
（2）将构造函数的作用域赋值给新对象（this指向这个新对象）；  
（3）执行构造函数中的代码（为这个新对象添加属性）；  
（4）返回新对象；

**构造函数的模式和工厂模式的区别：**  
没有显式的创建对象，直接将属性和方法赋值给了this对象，没有return语句。  
3. 原型模式  
创建的每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象。

function Person(){
    }
    Person.prototype.name="lwg";
    Person.prototype.age=20;
    Person.prototype.job="student";
    Person.prototype.sayName=function(){
      alert(this.name);
    };
    var person1=new Person();
    person1.sayName();

4.混合构造函数和原型模式

实例属性都是在构造函数中定义，所有实例共享属性和方法是在原型中定义的。

5.动态原型模式

6.寄生构造函数模式

function Person(name,age,job){ 
    var o=new Object();
    o.name=name;
    o.age=age;
    o.job=job;
    o.sayName=function(){ 
     alert(this.name);
    };
    return o;
    }
    var friend=new Person("lwg",20,"student");
    friend.sayName();

7.稳妥构造函数模式

function Person(name,age,job){ 
    var o=new Object();
    o.sayName=function(){ 
    alert(name);
    };
    //返回对象
    return o;
    }

**4 javascript继承的 6 种方法**  
1. 原型链继承  
利用原型让一个引用类型继承另一个引用类型的属性和方法

2.借用构造函数继承

function SuperType(){ 
     this.color=["red","blue","green"];
    }
    function SubType(){ 
     SuperType.call(this);
    }
    var instance1=new SubType();
    instance1.colors.push("black");
    alert(instance1.colors);// red blue green black

3.组合继承(原型+借用构造)

4.原型式继承  
![这里写图片描述][20160731163436033]  
5.寄生式继承  
![这里写图片描述][20160731163521409]  
6.寄生组合式继承  
![这里写图片描述][20160731163551488]

[20160731163436033]: /images/20220719/9c59bda6307c4f4285e0d15fe9d68e70.png
[20160731163521409]: /images/20220719/2aac8e23298e4dbfbca2896f5f262dfa.png
[20160731163551488]: /images/20220719/09179449a45245afaebe508afafcd9cf.png