1.什么是闭包?应用场景?
闭包就是函数嵌套函数的特殊形式:
- 函数作为参数被传入
- 函数作为返回值被返回
闭包其实也是自由变量的特殊表现形式:
- 自由变量:没有在当前作用域声明的变量
- 自由变量的值和作用域是在函数定义的时候去欸的那个,不是在函数执行的时候确定
点:
- 可以变量私有化,避免变量的全局污染
- 自由变量值,存储在内存中不会被销毁
应用场景:
- 封装组件,插件库的时候避免变量全局污染
- 创造局部作用域变量,类似于let效果
2.如何实现继承?
1.构造函数绑定:使用 call 或 apply 方法,将父对象的构造函数绑定在子对象上
functionA(name){this.name=name}
functionB(name,age){
A.call(this.age)
this.age = age;
}
B.prototype = Object.create(A.prototype)
B.prototype.constructor = B
2.实例继承:将子对象的 prototype 指向父对象的一个实例
3.拷贝继承:如果把父对象的所有属性和方法,拷贝进子对象
4.原型继承:将子对象的 prototype 指向父对象的 prototype
5.ES6 语法糖 extends:class ColorPoint extends Point {}
3.原型与原型链应用场景
- 每一个对象都有一个隐式原型__proto__
- 每一个构造函数都有一个显示原型_prototype_
- 对象实例的隐式原型等同与,创建该对象的构造函数的显示原型prototype
- 当查找一个对象的方法和属性,先在自身对象属性上查找,找不到,则沿着隐式原型__proto__向上查找,(__proto__.__proto__)Object.prototype.__proto__ 结果为null
应用场景:
- 实现继承
- 创建实例的公共方法:Vue.__prototype__.$http = axios
4.js事件流
冒泡流(默认):
- 最具体的元素先触发事件,依次向上冒泡式的传递
- e.stopPropogation()阻止时间冒泡流
- e.preventDefault()阻止默认事件
捕获流:
最大元素捕获到事件,然后依次传递给最具体的元素
element.addEventListener(callbacak,false)
5.数组去重
1.es6中的set
2.遍历去重:
fliter:当前的index与indexOf(elem)的值不一致,去重
对象key值唯一:用一个临时对象把数组的值,当key存储在对象中,如果对象上已经有key值,说明数组的值是重复的
6.异步同步
异步:向服务器发送请求,必须等请求到内容,才能刷新页面,用户才能看到新内容
同步:向服务器发送请求,内容请求到时,用户不用刷新页面,也可以看到新内容
7.ajax
异步的javaScript和xml
核心对象:XMLHHTTPRequest(xhr)
通过xhr与后端交换数据,通过js实现无刷新更新页面
优点:无刷新更新页面,实现各种懒加载,异步请求,提高首屏渲染速度
缺点:由于内容是动态加载的,SEO搜索引擎不友好
常见库: JQuery.$ajax
axios:不依赖任何DOM
服务端(nodejs)
能够创建实例二次封装
能对请求创建实例二次封装
8.跨域和jsonp
跨域考虑到安全问题,有同源策略
所谓的同源策略,就是端口,域名。协议。三者一致,就算有两个相同的域名访问同一个ip地址,也非同源
如果端口,域名,协议三者有一者不同,就称为跨域
jsonp是解决跨域问题的一种方法,jsonp是利用<script>标签没有同源限制,直接发送给服务器,可以返回带有callback参数的回调函数
9.promise
- ES6新增方法:解决异步操作,回调函数层级过深的问题(回调地狱)
- Promise.race():多个promise请求返回最快的一个
- Promise.all():等多个promise都执行并返回时,才执行then
- Promise.reject():抛出错误
- Promise状态一旦缺点就不会更改:
var p = new Promise( (resolve,reject)=>{ // reject(xxx) // resolve(xxx) } ) p.then( (res)=>{ }) .catch(err=>{ })
10.this指向问题
- 全局window:script setlnterval.setTimeout
- 对象:指的是对象本身
- 构造函数:构造函数的实例
- class 类:类的实例
- 箭头函数:指向上一层的作用域this
- 函数:函数的直接调用者
- call.apply.bind:指向第一个参数
11.对象类型判断
typeof:
值类型:string,number,boolean,undefined,null,symbol
引用类型:function,array,object
instanceof
constructor
Object.prototype.toString.call() //最准
12.浏览器的渲染过程
- 解析HTML构建DOM树
- CSS文件下载完毕,开始构建CSSDOM树
- 合并DOM和CSS树,生成渲染树
- 渲染页面
在地址输入一个地址,按回车:
- 查找ip:浏览器缓存,host文件,本地缓存,dns服务器向上查询,找到域名对应的IP为止
- 得到相应数据:三次握手,四次挥手,建立连接,下载html,根据html下载其他资源
13.前端性能优化
1. 减少 http 请求和大小 (压缩与合并)+ base64 图片
2. 优化首屏的渲染速度 (css放前面,js放后面,避免错误,只加载首屏的必要资源)
3. 按需加载,懒加载,预加载 (js,css,图片,页面,按需 懒 预加载)
4. 让加载更快 启用 CDN ,开启gzip,缓存
14.堆与栈
-
栈:先进后出;由操作系统自动分配释放 ,存放函数的参数值,局部变量的值等。其操作方式类似于数据结构中的栈。
-
堆:队列优先,先进先出;动态分配的空间 一般由程序员分配释放, 若程序员不释放,程序结束时可能由OS回收,分配方式类似于链表
15.实现深拷贝
顾名思义,深拷贝就是完完整整的将一个对象从内存中拷贝一份出来,所以无论用什么办法,必然绕不开开辟一块新的内存空间
- 深拷贝:将对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改不会影响源对象
通常有两种方法实现深拷贝:
1.迭代递归法
2.序列化反序列化
16.React项目中遇到过什么问题?
- 当时我进入一个页面,数据已经能打印了,但视图没更新
- 怎么解决的:一开始是怀疑setState没有更新视图,或者数据没有获取
- 真正原因:数据的请求是异步的,页面跳转了,数据的获取晚于页面的跳转(这个是异步的问题)
- 解决:回调函数,promise解决,subscribe监听数据store仓库中的数据发送变化,更新视图