前端面试题
ajax请求原理
客户端通过XMLHttpRequest向服务器发送一个请求,服务器响应数据,返回给XMLHttpRequest,
在XMLHttpRequest对象的成功回调中通过DOM操作把数据展示在页面。
Ajax请求步骤:
-
创建一个XMLHttpRequest异步对象
-
调用xhr的open方法
-
调用xhr的send方法
-
对请求状态监听
jsonp跨域原理:
1、动态创建一个script标签,添加到body中
2、设置script标签的src属性值,属性值就是一个接口
3、通过接口上的某个参数,向服务器传递一个函数,通过
这个回调函数 接收服务器返回的数据
通过jsonp格式获取的服务器数据 大多都是object类型,不需要转换
同源策略:
客户端请求服务器文件时,保证 协议、域名、端口号完全一致的情况下,
才可以访问服务器数据。
ajax是什么
ajax是一种技术,用来和后台进行数据交互
什么是ajax 异步 的javascript and xml
全称:Asynchronous javascript and xml
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
特点:
按需取数据。
页面无刷新。
减少带宽,降低成本
请求速度快
提升用户体验
闭包
什么是闭包(没有具体的概念,是一种现象)
有权访问另一个函数内部变量的一个函数。
闭包的特点
在函数内部套了一个函数,这个函数是一个返回值,这个函数访问了上层函数的变量。
可以在外部访问另一个函数内部的私有变量
可以延长局部变量的生命周期
有可能造成内存的泄漏
耗费内存资源
变量私有化,避免命名空间的污染。
闭包的原理
利用作用域链的关系,在一个函数中嵌套另一个函数,嵌套的函数中访问上一级作用域中的变量
,并将嵌套的函数作为返回值返回。
浅拷贝(shallowCopy)只是增加了一个指针指向已存在的内存地址,
深拷贝(deepCopy)是增加了一个指针并且申请了一个新的内存,使这个增加的指针指向这个
新的内存
面向对象中new关键字做了什么事
1.创建了一个对象
2.使得构造函数中的this指向了实例对象
3.在实例对象中产生一个__proto__指针(是一个属性),指向构造函数的原型对象。
使得实例对象能够访问原型对象下的属性或方法。
原型链
使用new关键字创建一个实例对象时,实例对象会产生一个__proto__指针
,该指针指向构造函数的原型对象,原型对象也有一个__proto__指针,这个原型对象的指针指
向父类的原型对象,指针之间形成了一种链条关系,也可以把这种关系叫做原型链。
生命周期
beforeCreate: 组件实例刚被创建,组件属性计算之前,如data属性等;
created: 组件实例创建完成,属性已绑定,但DOM还为生成,$el属性还不存在
beforeMount:模板编译/挂载之前
mounted:模板编译/挂载之后(不保证组件已存在document中)
beforeUpdate:组件更新之前
updated:组件更新之后
activated:for keep-alive,组件被激活时调用
deactivated:for keep-alive,组件被移除时调用
beforeDestory:组件销毁前调用
destoryed:组件销毁后调用
js垃圾回收机制:
自动垃圾回收机制就是找出那些不再继续使用的值,然后释放其占用的内存空间。
垃圾回收器每隔固定的时间段就执行一次释放操作。
事件循环机制:
事件循环 一次只执行一个宏任务,一个宏任务中所有的微任务执行完毕才会到下一个宏任务
先执行整体的红任务,再执行异步任务中的微任务,然后执行宏任务
内存泄露
1、当页面中元素被移除或替换时,若元素绑定的事件仍没被移除,在IE中不会作出恰当处理,此时要先手工移除事件,不然会存在内存泄露。
2、对于纯粹的 ECMAScript 对象而言,只要没有其他对象引用对象 a、b,也就是说它们只是相互之间的引用,那么仍然会被垃圾收集系统识别并处理。但是,
在 Internet Explorer 中,如果循环引用中的任何对象是 DOM 节点或者 ActiveX 对象,垃圾收集系统则不会发现它们之间的循环关系与系统中的其他对象是隔离的并释放它们。
最终它们将被保留在内存中,直到浏览器关闭。
3、闭包可以维持函数内局部变量,使其得不到释放。
4、已经删除的属性引用依然存在
5、 6、某些DOM操作
IE系列的特有问题 简单的来说就是在向不在DOM树上的DOM元素appendChild;IE7中,貌似为了改善内存泄露,
IE7采用了极端的解决方案:离开页面时回收所有DOM树上的元素,其它一概不管。
跨域的几种方式
第一: 使用 跨域资源共享(CORS)
第二:使用jsonp
第三: document.domain + iframe (iframe的使用主要是为了ajax通信)
第四: 使用window.name + iframe
第五:使用 window.postMessage方法
第六:flash方式的跨域
第七:WebSocket
this指向
普通函数中指向window
定时器中指向window
事件函数中指向事件源
箭头函数指向父级作用域this
对象中指向调用对象
构造函数中指向实例对象