前端面试题

面试题资源来源：牛客网

说一下类的创建和继承

请讲一下类的创建和继承的具体过程，以及类的继承形式和特点

类的创建方式：

1、工厂模式：在函数里定义一个对象，最后return这个对象。

function app(name,age,job){
    var obj = {
        name: name,
        age: age,
        job: job
    }
    return obj;
  }
var myObj  =  app("bill",32,"engineer");
console.log(myObj.name)   //bill

解决了创建多个相似对象的问题，但没有解决对象识别的问题。也就是说我们无法知道创建出来的对象类型。

2、构造函数模式 构造函数也是函数，只不过可以用来创建对象。要创建构造函数的新实例，必须要用new操作符调用构造函数。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
     }
 }
var person1 = new Person("bill", 23, "doctor");
var person2 = new Person("lily", 20, "student");
//person1 person2

缺点：每个方法都要在每个实例上重新创建一遍。

3、原型模式：让所有的对象实例共享原型属性和方法。 每个函数都有一个prototype属性，这个属性指向通过调用构造函数创建的那个对象实例的原型对象。Func.prototype --> new Func()的原型对象

function Person(){}
Person.prototype.name = "bill";
Person.prototype.age = 32;
Person.prototype.job = "teacher";

var pers1 = new Person();
var pers2 = new Person();
//pers1与pers2共享Person.prototype上的属性和方法，在一个对象上作原型属性的改变会影响另一个对象。

4、动态原型模式：将信息都封装在构造函数内部，通过条件判断，在必要时再初始化原型。

function Person(name, age,job){
    this.name = name;
    this.age = age;
    this.job = job;
 }
if( typeof this.sayName != "function"){
    Person.prototype.sayName = function(){
        alert(this.name!);
     };
 }

5、寄生构造函数模式：除了用构造函数封装对象，并用new调用该构造函数，其它与工厂模式完全相同。

function Person(name,age,job){
    var obj = {
        name: name,
        age: age,
        job: job
    }
    return obj;
  }
var myObj  =  new Person("bill",32,"engineer");
console.log(myObj.name)   //bill

6、稳妥构造函数模式：与寄生构造函数类似，不同点在于：新创建对象的实例方法不引用this；不适用new操作符调用构造函数。

function Person(name,  age, job){
    var obj = new Object();
    obj.sayName = function(){
     alert(name); 
     }
    return obj;
 }
var friend = Person("bill", 43, "student");
friend.sayname() //稳妥构造函数中，只有此方法可以访问到name属性。 

http1.1和1.0的区别

请你讲讲http1.1和1.0的区别

http1.1相比1.0有如下几点不同： http1.1相比1.0有如下几点不同：

• 默认支持长连接;
• 带宽优化，并支持断点续传；
• 新增例如ETag，If-None-Match等更多的缓存控制策略;
• Host头域;
• 新增了24个错误状态响应码，如409（Conflict）表示请求的资源与资源的当前状态发生冲突；410（Gone）表示服务器上的某个资源被永久性的删除； http2.0与1.1相比有如下几点不同：
• 多路复用，可以做到在一个连接并行的处理多个请求；
• header压缩；
• 服务端推送；
• 解析格式不同。HTTP1.0和1.1的解析是基于文本，2.0的协议解析采用二进制格式，实现方便且健壮；

transition和animation的区别

请你谈一下transition和animation的区别

• transition是过度属性，强调过度，他的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
• animation是动画属性，他的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。他也类似于flash的补间动画，但是他可以设置多个关键帧（用@keyframe定义）完成动画。

tcp为什么要建立连接

谈一下，tcp为什么要建立连接？

tcp是提供可靠性连接的，只有支持端到端的连接，才能进行可靠性传输，连接的主要功能在于记录两个端口间的通信状态，不连接则无法记录两个端口通信的状态，则无法知道丢失了哪个数据包，重复收到了哪个数据包，也无法确保数据包之间的到达顺序，还有很多增加可靠性的功能都无法应用。

说说前端中的事件流

请讲一下对于前端中的事件流，你是怎么理解的

事件流是浏览器中页面接收到事件的顺序，从最外层的元素到最里层的元素为事件捕获阶段，从最里层元素传到最外层元素是事件冒泡阶段。之前也分为捕获流和冒泡流，不过现在基本都是冒泡流了。

说一下图片的懒加载和预加载

请讲一下图片的懒加载和预加载不同点，他们的本质是什么？这两种技术对于服务器前段的影响各是什么？

预加载是提前加载，懒加载是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

TCP有哪些应用场景

请说明一下哪种应用场景会使用TCP协议，使用它的意义

tcp协议是面向连接的，可靠的数据传输协议，但是它的传输数据速率相比于udp协议比较慢。它适用于对数据传输可靠性要求比较高的场景，例如文本传输之类的。

补充400和401、403状态码

你知道400和401、403状态码是什么吗？

• 4 开头一般是客户端出现的问题
• 400 错误请求，客户端发送了一条异常请求，可能是域名不存在
• 401 未授权，登陆失败，用户名和密码错误
• 403 请求被拒绝，无权限访问

用setTimeout来实现setInterval

请你讲一下，使用setTimeout()方法来模拟setInterval()与直接使用setInterval()有什么区别

settimeout调用自身

垂直居中的方法

有哪些可以实现垂直居中的方法？

利用flex:

display:flex;
flex-deriction:column;
align-item:center;

利用定位和缩放:

position:aboslute;
left:0;
right:0;
top:0;
bottom:0
margin:auto;
transform:tanslate(-50%,-50); 

前端工程化

什么是"前端工程化"？

前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。

如何做"前端工程化"？

前端工程化就是为了让前端开发能够“自成体系”，个人认为主要应该从模块化、组件化、规范化、自动化四个方面思考。

前端安全性问题

xss跨站脚本攻击原理？如何进行？防御手段？

• 如何进行：如何XSS是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。
• 主要原理：过于信任客户端提交的数据！
• 防御手段：不信任任何客户端提交的数据，只要是客户端提交的数据就应该先进行相应的过滤处理然后方可进行下一步的操作。

Sql脚本注入原理？如何进行？防御手段？

• 如何进行：利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。
• 主要原理：通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令
• 防御手段：使用预编译，绑定变量（推荐）。检查数据类型。过滤特殊字符和语句。页面不错误回显。

前端跨越问题

什么是跨域？

由浏览器同源策略限制的一类请求场景，当不同地址，不同端口，不同级别，不同协议就会构成跨域。 什么是同源策略？ 所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

如何解决跨域？

1. 通过jsonp跨域
2. CORS
3. document.domain + iframe跨域
4. location.hash + iframe
5. window.name + iframe跨域
6. postMessage跨域
7. nginx代理跨域
8. nodejs中间件代理跨域
9. WebSocket协议跨域

前端http相关问题

HTTP常用状态码及其含义？