网站导航

溶剂萃取仪

当前位置:主页 > 产品展示 > 溶剂萃取仪 >

四月前端面试题总结:前端面试总结(下篇):米乐m6手机版登录入口

产品时间:2022-07-27 17:29

简要描述:

接着昨天的前端面试题总结写的哈,有在找事情的同伴,建议仔细阅读!10.什么是原型链原型:每个javascript建立的时候都市关联另一个工具,这个工具就是原型,工具会从原型继续属性结构函数可以通过prototype去寻找他关联的原型,A.prototype就是它关联的原型工具,原型工具可以通过结构器constructor来寻找与自身关联的结构函数function A () {}A.prototype.constructor === A //true原型链:原型链是由原型工具...

详细介绍
本文摘要:接着昨天的前端面试题总结写的哈,有在找事情的同伴,建议仔细阅读!10.什么是原型链原型:每个javascript建立的时候都市关联另一个工具,这个工具就是原型,工具会从原型继续属性结构函数可以通过prototype去寻找他关联的原型,A.prototype就是它关联的原型工具,原型工具可以通过结构器constructor来寻找与自身关联的结构函数function A () {}A.prototype.constructor === A //true原型链:原型链是由原型工具

米乐m6手机版登录入口

接着昨天的前端面试题总结写的哈,有在找事情的同伴,建议仔细阅读!10.什么是原型链原型:每个javascript建立的时候都市关联另一个工具,这个工具就是原型,工具会从原型继续属性结构函数可以通过prototype去寻找他关联的原型,A.prototype就是它关联的原型工具,原型工具可以通过结构器constructor来寻找与自身关联的结构函数function A () {}A.prototype.constructor === A //true原型链:原型链是由原型工具组成,每个工具都有__proto__属性,指向该结构函数的原型,__proto__将工具毗连起来组成了原型链原型链查找机制:当查找工具的属性时,如果实例工具不存在该属性,沿着原型链向上一级查找,直到找到object.prototype(也就是工具原型object.prototype为null),停止查找到返回undefinedfunction A () {}new A().__proto__ === A.prototype //true原型上的属性和方法被实例共享function A () {}A.prototype.name = 'a'var a = new A()var b = new A()a.name === b.name // truea.__proto__.name === b.__proto__.name // trueinstanceOf原理:instamceOf可以判断实例工具的__proto__属性与结构函数的prototype是不是同一地址(如果网页中有多个全局情况就会禁绝确)function _instanceOf(obj, type) { var obj = obj.__proto__ var type = type.prototype while(true) { if (obj == null) { return false } if (obj == type) { return true } obj = obj.__proto__ }}var a = [1, 2, 3]_instanceOf(a, Array)11.深拷贝和浅拷贝浅拷贝只是复制引用,新旧工具共享一块内存,一般把第一层拷贝到一个工具上,改变其中一个另一个也会改变var obj = { name: 'a', age: 18, arr: [1, 2]}function shallowCopy(obj) { var newObj = {}; for (var prop in obj) { if (obj.hasOwnProperty(prop)) { // 过滤掉原型上的属性 newObj[prop] = obj[prop]; } } return newObj;}var obj1 = shallowCopy(obj)var obj2 = objobj1.name = 'b'obj2.age = 20obj2.arr[0] = 3obj1.arr[0] = 4console.log(obj) // {name: "a", age: 20, arr: [4, 2]}console.log(obj1) // {name: "b", age: 18, arr: [4, 2]}console.log(obj2) // {name: "a", age: 20, arr: [4, 2]}我们通过浅拷贝获得obj1,改变obj1的name,obj不会发生改变,通过赋值获得obj2,obj2改变age值obj的值也会被改变。说明赋值获得的工具只是改变了指针,浅拷贝是建立了新工具。我们通过obj2和obj1都改变的值,发现obj,ob1,obj2都发生了改变,所以无论是浅拷贝还是赋值都市改变原始数据(浅拷贝只拷贝了一层工具的属性)深拷贝:复制并建立一个一摸一样的工具(递归复制了所有层级),不共享内存,改变其中一个另一个不会改变var obj = { name: 'a', age: 18, arr: [1, 2]}function copy (obj) { var newobj = Array.isArray(obj) ? [] : {}; if(typeof obj !== 'object'){ return; } for(var i in obj){ if (obj.hasOwnProperty(i)) { newobj[i] = typeof obj[i] === 'object' ? copy(obj[i]) : obj[i]; } } return newobj}var copyObj = copy(obj)copyObj.arr[0] = 3console.log(copyObj) //{name: "a", age: 20, arr: [3, 2]}console.log(obj) //{name: "a", age: 20, arr: [1, 2]}12.实现继续原型链继续(在实例化一个类时,新建立的工具复制了父类结构函数的属性和方法,并将__proto__指向父类的原型工具,当在子类上找不到对应的属性和方法时,将会在父类实例上去找。

)function Big () { this.age = [1, 2, 3]}Big.prototype.getAge = function () { return this.age}function Small() {}Small.prototype = new Big()var small = new Small()console.log(small.age) // [1, 2, 3]console.log(small.getAge()) // [1, 2, 3]缺点1:引用缺陷(修改其中一个Small实例的父类变量会影响所有继续Big的实例)small.age[0] = 12var small1 = new Small()console.log(small1.age) // [12, 2, 3]console.log(small.age) // [12, 2, 3]缺点2:无法为差别的实例初始化继续来的属性function Big (name) { this.age = [1, 2, 3] this.name = name}Big.prototype.getAge = function () { return this.age}function Small() {}Small.prototype = new Big('small')var small = new Small()var small1 = new Small()console.log(small1.name) // smallconsole.log(small.name) // small结构函数继续(在子类的结构函数中执行父类的结构函数,并为其绑定子类的this,让父类的结构函数把成员属性和方法都挂到子类的this上)function Big (name) { this.age = [1, 2, 3] this.name = name}Big.prototype.getAge = function () { return this.age}function Small(name) { Big.apply(this, arguments)}var small = new Small('small')var small1 = new Small('small1')console.log(small.name) // smallconsole.log(small1.name) // small1small.age[0] = 12console.log(small.age) // [12, 2, 3]console.log(small1.age) // [1, 2, 3]缺点:无法会见原型上的方法small.getAge() //small.getAge is not a function组合式继续(将原型链继续和结构函数继续组合到一起, 综合了原型链继续和结构函数继续的优点)function Big (name) { this.age = [1, 2, 3] this.name = name}Big.prototype.getAge = function () { return this.age}function Small(name) { Big.apply(this, arguments)}Small.prototype = new Big()var small = new Small('small')var small1 = new Small('small1')console.log(small.name) // smallconsole.log(small1.name) // small1small.age[0] = 12console.log(small.age) // [12, 2, 3]console.log(small1.age) // [1, 2, 3]console.log(small.getAge()) // [12, 2, 3]console.log(small1.getAge()) // [1, 2, 3]小缺点:挪用了两次父类结构函数寄生组合式继续(在组合继续的基础上淘汰一次多余的挪用父类结构函数)function Big (name) { this.age = [1, 2, 3] this.name = name}Big.prototype.getAge = function () { return this.age}function Small(name) { Big.apply(this, arguments)}// 对父类原型举行拷贝,否则子类原型和父类原型指向同一个工具,修改子类原型会影响父类Small.prototype = Object.create(Big.prototype) var small = new Small('small')var small1 = new Small('small1')console.log(small.name) // smallconsole.log(small1.name) // small1small.age[0] = 12console.log(small.age) // [12, 2, 3]console.log(small1.age) // [1, 2, 3]console.log(small.getAge()) // [12, 2, 3]console.log(small1.getAge()) // [1, 2, 3]注意:对父类原型举行拷贝后赋值给子类原型,因此Small上的constructor属性被重写,需要修复Small.prototype.constructor = Dog;extends继续(class和extends是es6新增的,class建立一个类,extends实现继续)class Big { constructor(age) { this.age = age; } getAge () { return this.age }}class Small extends Big { constructor(age) { super(age) }}var small = new Small([1, 2, 3])var small1 = new Small([12, 2, 3])small.age[0] = 13console.log(small.age) // [13, 2, 3]console.log(small.getAge()) // [13, 2, 3]console.log(small1.age) // [12, 2, 3]console.log(small1.getAge()) // [12, 2, 3]浏览器网络1.常用http状态码200 乐成状态码301 永久重定向,302 暂时重定向400 请求语法错误, 401 请求需要http认证,403 不允许会见资源,404 资源未找到500 服务器内部错误,502 会见时堕落,503 服务器忙,无法响应2.https原理http协议:客户端浏览器与web服务器之间的应用层通讯协议https协议:HTTP+SSL/TLS,http下加入SSL层,https宁静基础时SSL,用于宁静的HTTP数据传输https优势:内容经由对称加密,每个毗连会生成唯一的加密密钥,内容经由完整性校验,第三方无法伪造身份使用对称加密(加密息争密使用的是同一个密钥)被中间人拦截,中间人可以获取密钥,就可以对传输的信息举行窥视和窜改使用非对称密钥(双方必须协商一对密钥,一个私钥和一个公钥)用私钥加密的数据,只有对应的公钥才气解密,用公钥加密的数据,只有对应的私钥才气解密,毛病:RSA算法很慢非对称密钥+对称密钥(联合两者优点)客户端获取公钥确认服务器身份通过SSL证书,客户端接受到服务端发来的SSL证书给客户端。3.前端宁静XSS攻击:注入恶意代码来攻击。

攻击者在目的网站上注入恶意代码,被攻击者登陆网站执行这些恶意代码,这些剧本可以读取 cookie,session tokens,或者其它敏感的网站信息,对用户举行钓鱼欺诈(打开新标签跳转,新标签存在恶意代码,跳转到伪造的页面),网页植入广告等。XSS攻击防御手段:克制JavaScript读取某些敏感cookie,限制输入内容和长度控制,检测是否有恶意代码注入CSRF攻击:诱导用户进入第三方,获取到登录凭证,冒充用户对被攻击的站点执行操作,导致账号被挟制防御CSRF攻击:验证token(请求服务器时,返回token,每个请求需要加上token),5.浏览器缓存浏览器每次提倡请求,都市在浏览器缓存中查找请求效果缓和存标识,浏览器每次拿到的数据会将效果和标识存入浏览器中强制缓存:当浏览器向服务器提倡请求时,服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求效果一起返回给浏览器,控制强制缓存的字段划分是Expires和Cache-Control,其中Cache-Control优先级比Expires高。

协商缓存:强制缓存失效后,浏览器携带缓存标识向服务器提倡请求,由服务器凭据缓存标识决议是否使用缓存的历程。(协商缓存生效,服务器返回304,资源未更新,协商缓存失效,服务器返回200,资源更新重新缓存)详情可以看这篇文章彻底明白浏览器的缓存机制框架1.什么是vue生命周期每个vue实例在被建立之前都要经由一系列初始化历程,这个历程就是vue生命周期。(开始建立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列历程)beforeCreate: 完成实例初始化,this指向被建立的实例,data,computed,watch,mothods方法和数据都不行以会见created: 实例建立完成,data,computed,watch,methods可被会见,未挂载dom,可对data举行操作,操作dom需放到nextTick中beforeMount: 有了el,找到对应的template编译成render函数mounted: 完成挂载dom和渲染,可以对dom举行操作,并获取到dom节点,可以提倡后端请求拿到数据beforeUpdate: 数据更新之前会见现有dom,可以手动移除已添加事件的监听updated: 组件dom已完成更新,可执行依赖的dom 操作,不要操作数据会陷入死循环activated: keep-alive缓存组件激活时挪用deactivated keep-alive移除时挪用beforeDestroy: 实例销毁之前挪用,可以销毁定时器destroyed: 组件已经被销毁2.第一次页面加载会触发哪几个钩子会触发beforeCreate, created, beforeMount, mounted3.created和mounted的区别created:在模板渲染成html前挪用,即通常初始化某些属性值,然后再渲染成视图。

mounted:在模板渲染成html后挪用,通常是初始化页面完成后,再对html的dom节点举行一些需要的操作。4.hash模式和history模式在vue的路由设置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的。hash 虽然泛起在 URL 中,但不会被包罗在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

history使用了HTML5中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记载栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记载举行修改的功效。

米乐m6手机版登录入口

只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立刻向后端发送请求。history模式需要后台设置支持5.computed和watch区别computed: 依赖的属性值发生改变才会重新盘算,得出最后的值watch: 当依赖的data的数据变化,执行回调(可以视察数据的某些变化,来做一些事情)6.vue中key的作用key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。

7.vue的两个焦点点数据驱动:ViewModel,保证视图的一致性组件系统:组件化,封装可复用的组件,页面上每个独立的区域都可以看成一个组件,组件可以自由组合成页面8.SPA首屏加载慢如何解决使用路由懒加载使用SSR渲染优化webpack打包体积图片使用CDN加速9.vue克制弹窗后的屏幕转动主要是是写一个点击泛起弹窗克制屏幕转动的方法,关闭弹窗屏幕可以正常转动methods : { //克制转动 stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//克制页面滑动 }, /取消滑动限制/ move(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='';//泛起转动条 document.removeEventListener("touchmove",mo,false); }}10.Vuex中actions和mutations的区别action主要处置惩罚的是异步的操作,mutation必须同步执行,而action就不受这样的限制,也就是说action中我们既可以处置惩罚同步,也可以处置惩罚异步的操作action改变状态,最后是通过提交mutation末端如果有错误或者不严谨的地方,请务必给予指正,十分谢谢。有在学习前端的同伴,留言回复:前端,领取全套视频教程!。


本文关键词:四,月前,端面,试题,总结,前端,面试,下篇,米乐,米乐m6网页版登录入口

本文来源:米乐m6官网登录入口-www.rdfz-xs.cn

 


产品咨询

留言框

  • 产品:

  • 留言内容:

  • 您的单位:

  • 您的姓名:

  • 联系电话:

  • 常用邮箱:

  • 详细地址:

推荐产品

如果您有任何问题,请跟我们联系!

联系我们

Copyright © 2002-2022 www.rdfz-xs.cn. 米乐m6官网登录入口科技 版权所有 备案号:ICP备81181821号-4

地址:新疆维吾尔自治区阿克苏地区永平县会时大楼4501号

在线客服 联系方式 二维码

服务热线

0204-90696999

扫一扫,关注我们