前端面试题

拾忆
2021-02-01 / 0 评论 / 4,311 阅读 / 正在检测是否收录...

面试题资源来源:牛客网

说一下类的创建和继承

类的创建方式:

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有如下几点不同:

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

transition和animation的区别

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

tcp为什么要建立连接


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

说说前端中的事件流

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

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

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

TCP有哪些应用场景

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

补充400和401、403状态码

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

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

  • 如何进行:利用现有应用程序,将(恶意)的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相关问题

状态码含义
1xx指示信息--表示请求已接收,继续处理
100 Continue初始的请求已经接受,客户应当继续发送请求的其余部分
101 Switching Protocols服务器将遵从客户的请求转换到另外一种协议
2xx成功--表示请求已被成功接收、理解、接受
200一切正常,对GET和POST请求的应答文档跟在后面
201 Created服务器已经创建了文档,Location头给出了它的URL
202 Accepted已经接受请求,但处理尚未完成
203 Non-Authoritative Information文档已经正常地返回,但一些应答头可能不正确,因为使用的是文档的拷贝
204 No Content没有新文档,浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而Servlet可以确定用户文档足够新,这个状态代码是很有用的
205 Reset Content没有新的内容,但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容
206 Partial Content客户发送了一个带有Range头的GET请求,服务器完成了它
3xx重定向--要完成请求必须进行更进一步的操作
300 Multiple Choices客户请求的文档可以在多个位置找到,这些位置已经在返回的文档内列出。如果服务器要提出优先选择,则应该在Location应答头指明
301 Moved Permanently客户请求的文档在其他地方,新的URL在Location头中给出,浏览器应该自动地访问新的URL
302 Found类似于301,但新的URL应该被视为临时性的替代,而不是永久性的。注意,在HTTP1.0中对应的状态信息是“Moved Temporatily”。出现该状态代码时,浏览器能够自动访问新的URL,因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如,如果浏览器错误地请求http://host/~user(缺少了后面的斜杠),有的服务器返回301,有的则返回302。严格地说,我们只能假定只有当原来的请求是GET时浏览器才会自动重定向
303 See Other类似于301/302,不同之处在于,如果原来的请求是POST,Location头指定的重定向目标文档应该通过GET提取
304 Not Modified客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用
305 Use Proxy客户请求的文档应该通过Location头所指明的代理服务器提取
307 Temporary Redirect和302(Found)相同。许多浏览器会错误地响应302应答进行重定向,即使原来的请求是POST,即使它实际上只能在POST请求的应答是303时 才能重定向。由于这个原因,HTTP 1.1新增了307,以便更加清除地区分几个状态代码:当出现303应答时,浏览器可以跟随重定向的GET和POST请求;如果是307应答,则浏览器只能跟随对GET请求的重定向
4xx客户端错误--请求有语法错误或请求无法实现
400 Bad Request请求出现语法错误
401 Unauthorized客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头,浏览器据此显示用户名字/密码对话框,然后在填写合适的Authorization头后再次发出请求
403 Forbidden资源不可用。服务器理解客户的请求,但拒绝处理它。通常由于服务器上文件或目录的权限设置导致
404 Not Found无法找到指定位置的资源。这也是一个常用的应答
405 Method Not Allowed请求方法(GET、POST、HEAD、DELETE、PUT、TRACE等)对指定的资源不适用
406 Not Acceptable指定的资源已经找到,但它的MIME类型和客户在Accpet头中所指定的不兼容
407 Proxy Authentication Required类似于401,表示客户必须先经过代理服务器的授权
408 Request Timeout在服务器许可的等待时间内,客户一直没有发出任何请求。客户可以在以后重复同一请求
409 Conflict通常和PUT请求有关。由于请求和资源的当前状态相冲突,因此请求不能成功
410 Gone所请求的文档已经不再可用,而且服务器不知道应该重定向到哪一个地址。它和404的不同在于,返回407表示文档永久地离开了指定的位置,而404表示由于未知的原因文档不可用
411 Length Required服务器不能处理请求,除非客户发送一个Content-Length头
412 Precondition Failed请求头中指定的一些前提条件失败
413 Request Entity Too Large目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求,则应该提供一个Retry-After头
414 Request URI Too LongURI太长
416 Requested Range Not Satisfiable服务器不能满足客户在请求中指定的Range头
5xx服务器端错误--服务器未能实现合法的请求
500 Internal Server Error服务器遇到了意料不到的情况,不能完成客户的请求
501 Not Implemented服务器不支持实现请求所需要的功能。例如,客户发出了一个服务器不支持的PUT请求
502 Bad Gateway服务器作为网关或者代理时,为了完成请求访问下一个服务器,但该服务器返回了非法的应答
503 Service Unavailable服务器由于维护或者负载过重未能应答。例如,Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头
504 Gateway Timeout由作为代理或网关的服务器使用,表示不能及时地从远程服务器获得应答。(HTTP 1.1新)505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本
2

评论 (0)

取消