如果一个构造函数绑定了一个对象,那么用这个构造函数创建的实例会继承对象的属性吗?为什么?没有继承,因为根据这个绑定的四个规则,new绑定的优先级高于bind显示绑定。当通过new调用构造函数时,会创建一个新对象,这个新对象会代替bind的对象绑定,作为这个函数的this,如果这个函数没有返回对象,就返回这个新创建的对象TCP和UDP使用场景TCP应用场景:效率要求比较低,准确率要求比较高的场景。由于在传输过程中需要进行数据确认、重传、排序等操作,效率没有UDP高。比如:文件传输(精度要求高,但速度可以相对慢一些),接受邮件,远程登录。UDP应用场景:效率要求比较高,精度要求比较低的场景。例如:QQ聊天、在线视频、VoIP(即时通讯,速度要求高,但偶尔中断问题不大,这里不能使用重传机制)、广播通信(广播、组播)。POST和PUT请求的区别PUT请求是向服务器发送数据,修改数据的内容,但是不会增加数据的类型等,也就是说无论多少次PUT执行操作,结果没有什么不同。(可以理解为更新数据的时间)POST请求是向服务器发送数据,请求会改变数据和其他资源的类型,会创建新的内容。(可以理解为创建数据)闭包的应用场景Curriedbind模块Newoperator是做什么的?1.首先新建一个对象2.设置原型,将对象的原型设置为函数的原型对象3.让函数的this指向这个对象,执行构造函数的代码(给这个新对象添加属性)4.判断函数的返回值类型。如果是值类型,则返回创建的对象。如果是引用类型,则返回该引用类型的目标代码输出结果constasync1=async()=>{console.log('async1');setTimeout(()=>{console.log('timer1')},2000)awaitnewPromise(resolve=>{console.log('promise1')})console.log('async1end')return'async1success'}console.log('scriptstart');async1().then(res=>console.log(res));console.log('scriptend');Promise.resolve(1).then(2).then(Promise.resolve(3)).catch(4).then(res=>console.log(res))setTimeout(()=>{console.log('timer2')},1000)输出结果如下:scriptstartasync1promise1scriptend1timer2timer1代码的执行过程如下:首先执行正时皮带,打印Executescriptstart;遇到定时器timer1,加入宏任务队列;然后执行Promise并打印出promise1。由于Promise没有返回值,所以下面的代码不会被执行;然后执行同步代码并打印出脚本结束;continue执行下面的Promise,.then和.catch期望参数是一个函数,这里传入一个数字,所以会发生值穿透,resolve(1)的值会传给最后的then,和1将直接打印;到第二个定时器,加入microtask队列,执行microtask队列,依次执行两个定时器,但是由于定时器时间的关系,两秒后会打印出timer2,四秒后再打印出timer1。WebSocket的理解WebSocket是HTML5提供的一种用于浏览器和服务器之间全双工通信的网络技术,属于应用层协议。它基于TCP传输协议,重用了HTTP握手通道。浏览器和服务器只需要完成一次握手,两者之间就可以直接建立持久连接,进行双向数据传输。WebSocket的出现解决了半双工通信的弊端。它最大的特点是服务端可以主动向客户端推送消息,客户端也可以主动向服务端推送消息。WebSocket原理:客户端通知(notify)一个事件(event),带有所有接收者ID(recipientsID)给WebSocket服务器,服务器收到后立即通知所有活跃(active)的客户端,接收者ID中只有IDsequence中的客户端会处理这个事件。WebSocket的特点如下:支持双向通信,实时性更强,可以发送文本,也可以发送二进制数据''基于TCP协议,服务端实现比较容易,数据格式比较轻,性能开销小,通信效率高。同源限制,客户端可以与任何服务器通信。协议标识为ws(加密后为wss),服务器URL为URL。对HTTP协议有很好的兼容性。默认的端口也是80和443,而且握手阶段使用的是HTTP协议,所以在握手的时候不容易屏蔽,可以通过各种HTTP代理服务器。Websocket的使用方法如下:在客户端://在index.html中直接写WebSocket,设置服务端的端口号为9999letws=newWebSocket('ws://localhost:9999');//在客户端触发ws.onopen=function(){console.log("Connectionopen.");ws.send('hello');};//从服务器向客户端发送消息触发器ws.onmessage=function(res){console.log(res);//打印MessageEvent对象console.log(res.data);//打印收到的消息};//在客户端Triggerws.onclose=function(evt){console.log("Connectionclosed.");};实现模板字符串解析描述:实现将模板字符串变量中的{{}}替换的功能。核心:使用字符串替换方法str.replace(regexp|substr,newSubStr|function)将字符串替换为正则匹配。实现:functionrender(template,data){//模板字符串正则性/\{\{(\w+)\}\}/,添加g作为全局匹配方式,每次匹配都会调用下面的函数letcomputed=template.replace(/\{\{(\w+)\}\}/g,function(match,key){//match:匹配子串;key:匹配字符串returndata[key];});returncomputed;}//testlettemplate="我是{{name}},年龄{{age}},性别{{sex}}";letdata={name:"张三",age:18}console.log(呈现(模板,数据));//我是张三,18岁,性别未定义常用CSS布局单位常用布局单位包括像素(px)、百分比(%)、em、rem、vw/vh。(1)像素(px)是页面布局的基础。一个像素表示终端(电脑、手机、平板等)屏幕上可以显示的最小区域。像素分为两种:CSS像素和物理像素:CSS像素:CSS中用于Web开发人员的抽象单位;物理像素:只与设备的硬件密度有关,任何设备的物理像素都是固定的。(2)百分比(%)。当浏览器的宽度或高度发生变化时,百分比单位可以使浏览器中组件的宽度和高度随着浏览器的变化而变化,从而达到响应式的效果。一般认为子元素的百分比是相对于直接父元素的。(3)em和rem比px更灵活。它们都是相对长度单位。它们的区别:em是相对于父元素的,rem是相对于根元素的。em:文本的相对长度单位。相对于当前对象中文本的字体大小。当前内联文本的字体大小如果没有手动设置,是相对于浏览器的默认字体大小(默认16px)。(相对于父元素的font-size的倍数)。rem:rem是CSS3添加的相对单位,是根元素(html元素)font-size的倍数。作用:可以使用Rem实现简单的响应式布局。可以使用html元素中的字体大小与屏幕的比例来设置font-size的值,这样当屏幕分辨率改变时元素也会随之改变。(4)vw/vh是与视窗相关的单位,vw表示相对于视窗的宽度,vh表示相对于视窗的高度。除了vw和vh之外,还有两个相关单位vmin和vmax。vw:相对于窗口的宽度,窗口的宽度为100vw;vh:相对于窗口的高度,窗口的高度为100vh;vmin:vw和vh中较小的值;vmax:vw和vh中的较大值;vw/vh和percentage很像,两者的区别:percentage(%):大部分是相对于祖先元素的,也有一些是相对于自身的,比如(border-radius,translate等)vw/vm:相对于窗口的大小,我们来说说for...in和for...of的区别?for...of遍历获取对象的键值,for...in获取对象的键名;for...in遍历整个对象原型链,性能很差,不推荐,而for...of只遍历当前对象,不遍历原型链;对于数组遍历,for...in会返回数组中所有可枚举属性(包括原型链可枚举属性),for...of只返回数组下标对应的属性值;总结:for...in循环主要是遍历对象,不是遍历数组;for....of循环可用于遍历数组、类数组对象、字符串、Sets、Maps和Generator对象。页面上有多个图像。HTTP的加载性能如何?在HTTP1下,浏览器对一个域名最多可以建立6个TCP连接,所以会请求多次。可以通过部署多个域名来解决。这样可以增加并发请求数,加快页面图片的获取速度。在HTTP2下,可以瞬间加载很多资源,因为HTTP2支持多路复用,可以在一个TCP连接中发送多个HTTP请求。new操作符的实现原理new操作符的执行过程:(1)首先创建一个新的空对象(2)设置原型,将对象的原型设置为函数的原型对象。(3)让函数的this指向这个对象,执行构造函数的代码(为这个新对象添加属性)(4)判断函数的返回值类型,如果是值类型,返回创建的目的。如果是引用类型,则返回该引用类型的对象。具体实现:functionobjectFactory(){letnewObject=null;让构造函数=Array.prototype.shift.call(arguments);让结果=空;//判断参数是否为函数if(typeofconstructor!=="function"){console.error("typeerror");返回;}//创建一个新的空对象,其原型为构造函数的原型对象newObject=Object.create(constructor.prototype);//指向新创建的对象,并执行函数result=constructor.apply(newObject,arguments);//判断返回对象letflag=result&&(typeofresult==="object"||typeofresult==="function");//判断返回结果返回标志?result:newObject;}//使用方法objectFactory(constructor,initializationparameters);arrayflattening数组扁平化就是将多层数组如[1,[2,[3]]]扁平化为一层[1,2,3]。使用Array.prototype.flat可以直接将多层数组扁平化为一层:[1,[2,[3]]].flat(2)//[1,2,3]现在是实现扁平化的效果。ES5实现:递归。functionflatten(arr){var结果=[];对于(vari=0,len=arr.length;i
