面试真题大汇总

前言
这几次面试的是工资略微高的,也就是说不是初级前端了,我发现这些企业技术负责人都不用我再去写面试题了,可能是人家觉得你都面试中高级了,基础就不考试你了吧。
下边是面试经过被问到的

面试题
1、讲解一下Function.prototype.bind()的认知?

打开火狐的js文档你会发现,js内置(类)对象Function,有3个自己的(静态)原型方法。碰巧的是这3个方法,均与函数内部的上下文this有关。
call、apply、bind都是为了改变某个函数运行时的上下文而存在的,也就是改变函数内部this的指向,
当然都可以借助此特性来实现es6之前的继承,在特定的作用域中调用这些方法,能改变制定函数的作用域,实际上是改变函数体内 this 的值 。

改变函数作用域,修改函数运行时的this指针

function People(name){
    this.name=name;
    this.say=function (time,msg) {
        console.log(time+':'+this.name+'说'+msg)
    }
}

var xm=new People('小明');
var xh=new People('小红');

//用call实现
xm.say.call(xh,2018,'你好啊')

//用apply
xm.say.apply(xh,[2018,'你好啊'])

//用bind
xm.say.bind(xh)(2018,'你好啊')
View Code


实现继承

function People(){
    this.say=function () {
        console.log(this.name+'说:我是人类')
    }
}

//利用call实现继承
function Stu(name) {
    People.call(this)//会执行一遍People内部代码,其中执行的上下文对象是这个函数的this,本质上相当于把People内代码copy到Stu里边
    this.name=name
    this.test=function () {
        console.log('测试')
    }
}
stu.say()
stu.test()
View Code
function People(){
    this.say=function () {
        console.log(this.name+'说:我是人类')
    }
}

function Stu(name) {
    this.name=name
    this.test=function () {
        console.log('测试')
    }
    // People.bind(this)()//写法二

}

var stu=new Stu('小明');
People.bind(stu)()// 写法一:函数A.bind(对象a)(arg)这样的话,函数A内部的调用对象就是对象a了,这样写法有点死板,写法2是动态的
stu.say()
stu.test()
View Code

 2、观察一下代码,说出执行结果?

    setTimeout(function(){
        console.log(1)
    });
    new Promise(function(resolve,reject){
        resolve()
        console.log(2);
    }).then(function(){
        console.log(3)
    });
    console.log(4);
  //2、4、1、3

上述代码运行:
同步和异步任务分别进入不同的执行"场所"。
同步的进入主线程,异步的进入Event Table并注册函数。
当指定的事情完成时,Event Table会将这个函数移入Event Queue。
主线程内的任务执行完毕为空,会去Event Queue(队列)读取对应的函数,进入主线程执行。
上述过程会不断重复,也就是常说的Event Loop(循环)。

任务队列又分为宏任务队列和微任务队列。宏任务队列可以有多个,微任务队列只有一个。
从执行步骤来看,我们发现微任务,受到了特殊待遇:js异步机制,就是遇到宏任务先执行,完成后再执行微任务

宏任务:setTimeout,setInterval。
微任务:Promise,process.nextTick


3、说一下你对http的认知
http协议 是网络协议五层中的最后一层‘应用层’的具体协议。
HTTP是超文本传输协议的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的过程。客户端连上web服务器后,若想获得web服务器中的某个web资源,需遵守一定的通讯格式,HTTP协议用于定义客户端与web服务器通迅的格式。
因为chrome和firefox都做了优化,所以这个格式在某个浏览器 显示都不太一样,fire还好一些,提供了原始数据展示。
一般情况下 浏览器喜欢把请求行和响应行融合为一体,chrome叫做General,火狐如下即可看到




HTTP请求报文:由3部分组成(请求行+请求头+请求体)
请求行:
①是请求方法,GET和POST是最常见的HTTP方法,除此以外还包括DELETE、HEAD、OPTIONS、PUT、TRACE。
②为请求对应的URL地址,它和报文头的Host属性组成完整的请求URL。
③是协议名称及版本号。

请求头:
是HTTP的报文头,简称头部(request的header),报文头包含若干个属性,格式为“属性名:属性值”,服务端据此获取客户端的信息
请求头可能会有如下参数

// Accept(比如Accept:text/plain)
// 请求报文可通过一个“Accept”报文头属性告诉服务端 客户端接受什么类型的响应。
// 如下报文头相当于告诉服务端,俺客户端能够接受的响应类型仅为纯文本数据啊,你丫别发其它什么图片啊,视频啊过来,那样我会歇菜的~~~
// Accept属性的值可以为一个或多个MIME类型的值(描述消息内容类型的因特网标准, 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据)
// cookie(比如:Cookie:userName=xm)
// 客户端的Cookie就是通过这个报文头属性传给服务端的哦!
// Referer(比如Referer: https://y.qq.com/)
// 表示这个请求是从哪个URL过来的,假如你通过google搜索出一个商家的广告页面,你对这个广告页面感兴趣,鼠标一点发送一个请求报文到商家的网站,这个请求报文的Referer报文头属性值就是http://www.google.com。
// Cache-Control(比如cache-control: max-age=600)
// 对缓存进行控制,如一个请求希望响应返回的内容在客户端要被缓存一年,或不希望被缓存就可以通过这个报文头达到目的。
// Content-Type给服务器的数据类型
// 1、application/json
// 发送给服务器的数据,会对数据进行JSON序列化
// 2、application/x-www-form-urlencoded
// 发送给服务器的数据,会将数据转化成query string,在浏览器network里参数会放到Form Data里

请求体:
也叫报文体,它将一个页面表单中的组件值通过param1=value1&param2=value2的键值对形式编码成一个格式化串,它承载多个请求参数的数据。不但报文体可以传递请求参数,请求URL也可以通过类似于“/chapter15/user.html? param1=value1&param2=value2”的方式传递请求参数。

HTTP的响应报文也由三部分组成(响应行+响应头+响应体)

响应行:
①报文协议及版本;
②状态码及状态描述;

响应头:
响应报文头,也是由多个属性组成;

响应体:
响应报文体,即我们真正要的“干货”



参考:https://blog.csdn.net/heyue_99/article/details/74689057





 

原文地址:https://www.cnblogs.com/dshvv/p/9855555.html