面试题总结

小程序 (!!!)

1.小程序的登录流程

1.小程序通过微信提供的wx.login()方法获取code
2.再通过wx.request()发送code到我们自己的服务器上
3.之后我们通过使用appid(注2)+appsecret(注3)+code来获取openid(注4)+session_key(注5)
  新用户需要用前三个获取后两个，之后可以将openid保存在数据库中，
  下次该用户登陆的时候直接用openid+session_key登录即可
4.将session_key+openid传到前端进行验证决定是否登录成功


**完整**

1.通过  wx.login()  获取到用户的code判断用户是否授权读取用户信息，调用wx.getUserInfo 读取用户数据。
2.由于小程序后台授权域名无法授权微信的域名，所以需要自身后端调用微信服务器获取用户信息。
3.通过 wx.request() 方法请求业务方服务器，后端把 appid , appsecret  和 code 一起发送到微信服务器。appid 和 appsecret 都是微信提供的，可以在管理员后台找到。
4.微信服务器返回了 openid 及本次登录的会话密钥 session_key。
5.后端从数据库中查找 openid ，如果没有查到记录，说明该用户没有注册，如果有记录，则继续往下走。
6.session_key 是对用户数据进行加密签名的密钥。为了自身应用安全，session_key 不应该在网络上传输。
7.然后生成 session并返回给小程序。
8.小程序把 session 存到  storage 里面。
9.下次请求时，先从 storage 里面读取，然后带给服务端。
10.服务端对比 session 对应的记录，然后校验有效期。

VUE

1.vue2和vue3的响应式原理 (!!!)

Vue2使用Object.defineProperty方法以及对象属性的劫持+发布订阅模式，实现将数据转化为响应式。
  缺点：
	1. 无法检测已有响应式对象的成员添加或删除
	2. 无法检测数组和对象的某些变动（例如数组通过下标修改元素，对象通过key值添加元素）
vue3的响应式采用的是ES6中的Proxy方法实现的。且在响应式数据中手动添加元素也是响应式的。（如数组或者对象）
  优点：
    可以监听数组检测到数组内部数据的变化，
    解决了vue2中无法监听到数组通过下标修改元素和对象通过key值添加元素的缺点。

Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）

2. vue2和vue3的区别 (!!!)

1. 在vue3中新增了`composition-api`（组合API）,入口就是setup函数，在组件创建之前，props被解析之后执行
2. 在vue3中不在支持过滤器`filters`
3. 在vue3中移除了`$on`、`$off`、`$once`、`$destroy`方法
4. 自定以指令的命名必须`v自定以指令名`
5. 自定义指令的钩子函数新增了`created`、`beforeUpdate`、`beforeUnmount`,移除了`update`;
  	bind---->beforeMount
  	unbind---->unmounted
    inseted--->mounted
   	componentUpdated--->updated
6. 全局属性的挂载和使用
   	+ vue2可以直接在vue的原型上挂载
   	+ vue3是`app.config.globalProperites`上挂载自定以属性
   	+ 通过引入`getCurrentInstance`函数中`proxy`来获取
7. vue-router路由的使用
   	+ 编程式导航的路由跳转：引入了`useRouter`函数，通过函数的返回值调用`push`
   	+ 获取路由参数的时候引入了`useRoute`函数，通过`useRoute`函数获取
8. vuex的使用
   	+ 创建store对象时，vue2是`new Vue.Store()`,vue3`createStore()`
   	+ 在组件中使用vuex中的state中的数据时，vue3中引入`useStore`函数

3. vue3的组件传值 (!!!)

父传子
	父组件：<child title="我是父组件中的数据" />
	子组件：defineProps({ title: { type: String } })
子传父：
	子组件：
		const emit = defineEmits(['add'])
		emit('add')
	父组件：
		<child @add="add" />

4.mixin

`Mixin`通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂

在⽇常的开发中，我们经常会遇到在不同的组件中经常会需要⽤到⼀些相同或者相似的代码，这些代码的功能相对独⽴

这时，可以通过 Vue 的 mixin 功能将相同或者相似的代码提出来

5.路由传参

params传值的参数是路由的一部分，所以跳转必须加参数值才能跳转
​query传参和路由配置没有关系获取方式是不一样的 
获取：
	query 是 this.$route.query.参数名 
	params是 this.$route.params.参数名

6.组件上可以添加事件吗？

1.给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件
2，等同于在子组件中：子组件内部处理click事件然后向外发送click事件：$emit("click",fn)

7.vue是什么以及vue的优点 (!!!)

vue是渐进式的前端框架

1：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；

2：双向数据绑定

3：组件化开发

4：视图，数据，结构分离

5：虚拟DOM

6：运行速度更快

8.为什么要学习vue3 (!!!)

- 最火框架，它是国内最火的前端框架之一
- 性能提升，运行速度事vue2.x的1.5倍左右
- 体积更小，按需编译体积比vue2.x要更小
- 类型推断，更好的支持Ts（typescript）这个也是趋势
- 高级给予，暴露了更底层的API和提供更先进的内置组件
- **★组合API (composition api)** ，能够更好的组织逻辑，封装逻辑，复用逻辑

9.vue3中组合api中的方法有哪些 最少说5个 (!!!)

- setup() 是一个新的组件选项，作为组件中使用组合API的起点
- computed()是用来定义计算属性的，计算属性不能修改
- watch()是用来定义侦听器的
- ref()常用于简单数据类型定义为响应式数据
- reactive()可以定义一个复杂数据类型，成为响应式数据

10.单页面应用和多页面应用的优缺点

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中，vue是单页面应用。

**多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

**优点：
	1：用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小。
	2、前后端分离，比如vue项目
	3、完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；

**缺点：
	1、首次加载页面的时候需要加载大量的静态资源，这个加载时间相对比较长。
	2、不利于 SEO优化，单页页面，数据在前端渲染，就意味着没有 SEO。
	3、页面导航不可用，如果一定要导航需要自行实现前进、后退

11.SPA**⾸屏加载速度慢的怎么解决？

什么是⾸屏加载：

⾸屏时间（First Contentful Paint），指的是浏览器从响应⽤户输⼊⽹址地址，到⾸屏内容渲染完成的时间，此时整个⽹⻚不⼀定要全部渲染完成，但需要展示当前视窗需要的内容，⾸屏加载可以说是⽤户体验中 最重要 的环节

加载慢的原因：
⽹络延时问题、资源⽂件体积是否过⼤、资源是否重复发送请求去加载了、加载脚本的时候，渲染内容堵塞了。

常⻅的⼏种SPA⾸屏优化⽅式
​减⼩⼊⼝⽂件积
​静态资源本地缓存
​UI框架按需加载
​图⽚资源的压缩
​组件重复打包
​开启GZip压缩
​使⽤SSR

JS

1. Ajax原理是什么？如何实现？

ajax 全称(Async Javascript and XML) 即异步的 JavaScript 和 XML ，是⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术，可以在不重新加载整个⽹⻚的情况下，与服务器交换数据，并且更新部分⽹⻚
Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后⽤ JavaScript 来操作 DOM ⽽更新⻚⾯
实现 Ajax 异步交互需要服务器逻辑进⾏配合，需要完成以下步骤：
	1.创建 Ajax 的核⼼对象 XMLHttpRequest 对象
	2.通过 XMLHttpRequest 对象的 open() ⽅法与服务端建⽴连接
	3.构建请求所需的数据内容，并通过 XMLHttpRequest 对象的 send() ⽅法发送给服务器端
	4.通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端的通信状态
	5.接受并处理服务端向客户端响应的数据结果
	6.将处理结果更新到 HTML ⻚⾯中

2. 数组的常⽤⽅法有哪些

push() 
	在数组末尾追加任意多个值，返回新的数组⻓度
unshift()
	在数组开头添加任意多个值，返回新的数组⻓度
splice()
	传入三个参数，分别是开始下标、删除的元素数量、插⼊的元素，如果删除数量是0，返回空数组，否则返回删除元素的数组
concat()
	先会创建⼀个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，(原数组不受影响)
pop() 
	⽅法⽤于删除数组的最后⼀项，同时减少数组的 length 值，返回被删除的项
shift() 
	⽅法⽤于删除数组的第⼀项，同时减少数组的 length 值，返回被删除的项
indexOf()
	返回要查找的元素在数组中的位置，如果没找到则返回 -1
find()
	返回第⼀个匹配的元素
reverse()
	将数组元素⽅向反转
sort()
	⽅法接受⼀个⽐较函数，⽤于判断哪个值应该排在前⾯
join() 
	⽅法接收⼀个参数，即字符串分隔符，返回包含所有项的字符串
	
常⽤来迭代数组的⽅法（都不改变原数组）有如下：
	some() 检测数组中的元素是否满足指定条件，有一项为true则返回true
	every() 与some相反，有一项为false则返回false
	forEach() 对数组每⼀项都运⾏传⼊的函数，没有返回值
	filter() 过滤 函数返回 true 的项会组成数组之后返回
	map() 返回由每次函数调⽤的结果构成的数组

3.bind、call、apply 区别？如何实现⼀个bind?

1. apply 、 call 、 bind 三者的区别在于：
	三者都可以改变函数的 this 对象指向，第⼀个参数都是 this 要指向的对象，如果如果没有这个参数或参数为 undefined 或 null ，则默认指向全局 window
	三者都可以传参，但是 apply 是数组，⽽ call 是参数列表，且 apply 和 call 是⼀次性传⼊参数，⽽ bind 可以分为多次传⼊
	bind 是返回绑定this之后的函数， apply 、 call 则是⽴即执⾏
2.实现 bind 的步骤，我们可以分解成为三部分：
	修改 this 指向
	动态传递参数
	兼容 new 关键字

4. Javascript本地存储的⽅式有哪些？区别及应⽤场景

javaScript 本地存储（也称本地缓存）的⽅法主要是以下四种：
	cookie  essionStorage  localStorage   *indexedDB
//区别
    存储⼤⼩： cookie 数据⼤⼩不能超过 4k ， sessionStorage 和 localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得多，可以达到5M或更⼤
    有效时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据；
    sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除； cookie 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭；
    数据与服务器之间的交互⽅式， cookie 的数据会⾃动的传递到服务器，服务器端也可以写cookie 到客户端； sessionStorage 和 localStorage 不会⾃动把数据发给服务器，仅在本地保存
    
//应⽤场景
    标记⽤户与跟踪⽤户⾏为的情况，推荐使⽤ cookie
    适合⻓期保存在本地的数据（令牌），推荐使⽤ localStorage
    敏感账号⼀次性登录，推荐使⽤ sessionStorage
    
   * 存储⼤量数据的情况、在线⽂档（富⽂本编辑器）保存编辑历史的情况，推荐使⽤ indexedDB
    
    
    
（不背）
1.cookie
	cookie是一种会话跟踪技术，用于在进行网页访问的时候，辨别⽤户身份⽽储存在⽤户本地终端上的数据，是为了解决 HTTP ⽆状态导致的问题。类型为「⼩型⽂本数据」（⼀般不超过4KB）。它由⼀个名称（Name）、⼀个值（Value）和其它⼏个⽤于控制 cookie 有效期、安全性、使⽤范围的可选属性组成。
但是 cookie 在每次请求中都会被发送，如果不使⽤ HTTPS 并对其加密，其保存的信息很容易被窃取，在⼀些使⽤ cookie 保持登录态的⽹站上，如果 cookie 被窃取，他⼈很容易 cookie 来假扮成你登录⽹站
cookie 常⽤的属性：
	Expires ⽤于设置 Cookie 的过期时间
	Max-Age ⽤于设置在 Cookie 失效之前需要经过的秒数（优先级⽐ Expires ⾼）
	Domain 指定了 Cookie 可以送达的主机名
	Path 指定了⼀个 URL 路径，这个路径必须出现在要请求的资源的路径中才可以发送 Cookie ⾸部
	Secure 指定是否使用https安全协议发送Cookie(可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改)
	
2.localStorage 
	HTML5 新⽅法，IE8及以上浏览器都兼容
	特点：
	  ⽣命周期：持久化的本地存储，除⾮主动删除数据，否则数据是永远不会过期的
	  存储的信息在同⼀域中是共享的
	  当本⻚操作（新增、修改、删除）了 localStorage 的时候，本⻚⾯不会触发 storage 事件,但是别的⻚⾯会触发 storage 事件。
	  ⼤⼩：5M（跟浏览器⼚商有关系）
	  localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致⻚⾯变卡受同源策略的限制
	缺点：
	  ⽆法像 Cookie ⼀样设置过期时间
	  只能存⼊字符串，⽆法直接存对象
	  
3.sessionStorage
	sessionStorage 和 localStorage 使⽤⽅法基本⼀致，唯⼀不同的是⽣命周期，⼀旦⻚⾯（会话）关
闭， sessionStorage 将会删除数据

4.indexedDB（扩展的前端存储⽅式）
    indexedDB 是⼀种低级API，⽤于客户端存储⼤量结构化数据(包括, ⽂件/ blobs)。该API使⽤索引来实
    现对该数据的⾼性能搜索。
    优点：
        储存量理论上没有上限
        所有操作都是异步的，相⽐ LocalStorage 同步操作性能更⾼，尤其是数据量较⼤时
        原⽣⽀持储存 JS 的对象
        是个正经的数据库，意味着数据库能⼲的事它都能⼲
	缺点：
        操作⾮常繁琐，本身有⼀定⻔槛
    ⽤基本使⽤步骤如下：   
        打开数据库并且开始⼀个事务
        创建⼀个 object store
        构建⼀个请求来执⾏⼀些数据库操作，像增加或提取数据等。
        通过监听正确类型的 DOM 事件以等待操作完成。
		在操作结果上进⾏⼀些操作（可以在 request 对象中找到
		使⽤ indexdb 的使⽤会⽐较繁琐，可以通过使⽤ Godb.js 库进⾏缓存，最⼤化的降低操作难度。

5. 说说你对闭包的理解？闭包使用场景？

闭包概念：
	正常情况下函数外部是访问不到函数内部作⽤域变量的，而闭包就是能够读取其他函数内部变量的函数。
表象判断是不是闭包:
	函数嵌套函数,内部函数被return 内层函数调用外层函数的局部变量
优点：可以隔离作⽤域，不造成全局污染
缺点：由于闭包⻓期驻留内存，⻓期这样会导致内存泄露，每调用一次都会产生一个新的闭包
解决内存泄露：将暴露全外部的闭包变量置为null
适⽤场景：封装组件，for循环和定时器结合使⽤，for循环和dom事件结合，可以在性能优化的过程中,节流防抖函数的使⽤,导航栏获取下标的使⽤

6. 深拷贝浅拷贝的区别？如何实现⼀个深拷贝？

浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，如果原地址发生改变，那么浅拷贝出来的对象也会相应的改变
深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存存放复制的对象，使这个增加的指针指向这个新的内存。
使用深拷贝的情况下，释放内存的时候不会因为出现浅拷贝时释放同一个内存的错误。

深拷贝的几种实现方法:

 1、使用递归的方式实现深拷贝
 2、通过 JSON 字符串实现深拷贝
 3、Object.assign()拷贝
 4、通过jQuery的extend方法实现深拷贝
 5、lodash函数库实现深拷贝
 （随便说两个）

7.说说JavaScript中的数据类型？存储上的差别？

JavaScript 中，我们可以分成两种类型： 基本数据类型 复杂数据类型

基本数据类型 Number String Boolean Undefined null Symbol（ES6）

复杂数据类型	object Array Function

基本类型数据保存在栈内存中

引⽤类型数据保存在堆内存中，引⽤数据类型的变量是⼀个指向堆内存中实际对象的引⽤（地址），存储在栈中

8. 什么是防抖和节流？有什么区别？如何实现？

作⽤：为了减少调⽤频率，节省计算资源，本质上是优化⾼频率执⾏代码的⼀种⼿段。
定义：
	节流: n 秒内只运⾏⼀次，若在 n 秒内重复触发，只有⼀次⽣效
	防抖: n 秒后在执⾏该事件，若在 n 秒内被重复触发，则重新计时
相同点：
	都可以通过使⽤ setTimeout 实现
	⽬的都是，降低回调执⾏频率。节省计算资源
不同点：
	函数防抖，在⼀段连续操作结束后，处理回调，利⽤ clearTimeout 和 setTimeout 实现。
	函数节流，在⼀段连续操作中，每⼀段时间只执⾏⼀次，频率较⾼的事件中使⽤来提⾼性能
	函数防抖关注⼀定时间连续触发的事件，只在最后执⾏⼀次，⽽函数节流⼀段时间内只执⾏⼀次。

**应⽤场景**

防抖在连续的事件，只需触发⼀次回调的场景有：
	搜索框搜索输⼊。只需⽤户最后⼀次输⼊完，再发送请求
	⼿机号、邮箱验证输⼊检测
	窗⼝⼤⼩ resize 。只需窗⼝调整完成后，计算窗⼝⼤⼩。防⽌重复渲染
节流在间隔⼀段时间执⾏⼀次回调的场景有：
	滚动加载，加载更多或滚到底部监听
	搜索框，搜索联想功能

9. 解释下什么是事件代理？应⽤场景

事件代理（也称事件委托，通俗来讲，就是把⼀个元素响应事件的函数委托到另⼀个元素
事件流的都会经过三个阶段： 捕获阶段 -> ⽬标阶段 -> 冒泡阶段，⽽事件委托就是在冒泡阶段完成

事件委托，会把⼀个或者⼀组元素的事件委托到它的⽗层或者更外层元素上，真正绑定事件的是外层元素，⽽不是⽬标元素 

当事件响应到⽬标元素上时，会通过事件冒泡机制从⽽触发它的外层元素的绑定事件上，然后在外层元 素上去执⾏函数

优点 减少整个⻚⾯所需的内存，提升整体性能,动态绑定，减少重复⼯作

10. 说说你对事件循环（Event Loop）的理解？

step1： 主线程读取JS代码，此时为同步环境，形成相应的堆和执行栈；
step2:  主线程遇到异步任务，指给对应的异步进程进行处理（WEB API）;
step3:  异步进程处理完毕（Ajax返回、DOM事件处罚、Timer到等），将相应的异步任务推入任务队列；
step4: 主线程执行完毕，查询任务队列，如果存在任务，则取出一个任务推入主线程处理（先进先出）；
step5: 重复执行step2、3、4；称为事件循环。

执行的大意：同步环境执行(step1) -> 事件循环1(step4) -> 事件循环2(step4的重复)…

11. Javascript如何实现继承?

JS继承实现⽅式也很多，主要分ES5和ES6继承的实现 

ES5是基于prototype来实现的，具体有三种⽅法 

⼀是原型链继承：即 B.prototype=new A() 

⼆是借⽤构造函数继承(call或者apply的⽅式继承)

三是组合继承，是结合第⼀种和第⼆种⽅式

ES6继承是⽬前主流的继承⽅式，⽤class定义类，⽤extends继承类，⽤ super()表示⽗类

12. 说说 JavaScript 中内存泄漏的⼏种情况?

由于疏忽或错误造成程序未能释放已经不再使⽤的内存，就叫做内存泄漏（memory leak）。
1.DOM/BOM 对象泄漏
2.script 中存在对DOM/BOM 对象的引用导致
3.Javascript 对象泄漏
4.通常由闭包导致，比如事件处理回调，导致DOM对象和脚本中对象双向引用，这个时常见的泄漏原因

13.说说new操作符具体⼲了什么？

创建⼀个新的对象 obj
将对象与构建函数通过原型链连接起来(可以访问到构造函数原型链中的属性)
将构建函数中的 this 绑定到新建的对象 obj 上
根据构建函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理

14.说⼀下JavaScript原型，原型链的理解？

1. 每个函数都有一个prototype属性，被称为显示原型 
2. 每个实例对象都会有`_ _proto_ _`属性,其被称为隐式原型
3. 每一个实例对象的隐式原型`_ _proto_ _`属性指向自身构造函数的显式原型prototype
4. 每个prototype原型都有一个constructor（坑死抓可特）属性，指向它关联的构造函数。 

##### 原型链

获取对象属性时，如果对象本身没有这个属性，那就会去他的原型`__proto__`上去找，如果还查不到，就去找原型的原型，一直找到最顶层(`Object.prototype`)为止。Object.prototype对象也有__proto__属性值为null。

15.如何实现上拉加载，下拉刷新？

上拉加载的本质是页面触底，或者快要触底时的动作.

scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增加，初始值是0，它是一个变化的值
clientHeight:它是一个定值，表示屏幕可视区域的高度；
scrollHeight：页面不能滚动时是不存在的，body长度超过window时才会出现，所表示body所有元素的长度


下拉刷新的本质是页面本身置于顶部时，用户下拉时需要触发的动作

监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY；
监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于0表示向下拉动，并借助CSS3的translateY属性使元素跟随手势向下滑动对应的差值，同时也应设置一个允许滑动的最大值；
监听原生touchend事件，若此时元素滑动达到最大值，则触发callback，同时将translateY重设为0，元素回到初始位置

16. 说说ES6新增特性都有哪些？***

ES6新增特性常⽤的主要有：let/const,箭头函数，模板字符串，解构赋值，扩展操作符，模块的导⼊(import)和导出(export default/export),Promise,还有⼀些数组字符串的扩展⽅法,其实有很多，我平时常⽤的就这些

-箭头函数与普通函数的区别**
	1. 箭头函数是匿名函数，不能当成构造函数
	2. 箭头函数没有arguments,如果取得所有参数可以使用 ...rest
	3. 箭头函数没有自己的this指向，在哪定义的this指向就指的谁。普通函数谁调用this就是谁

-模块化 
  概念：根据功能封装模块 通过import导入 然后通过export导出
  特点：
	1.模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
	2.每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
	3.每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

-map和set
	Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
	Set 对象允许存储任何类型的唯一值，无论是原始值或者是对象引用
	
-解构赋值
	解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象或数组中取出,赋值给其他变量。

es6创建对象的方式就是es5构造方法和原型的混合模式的语法糖。

17.说说你对作⽤域链的理解？

一段代码起作用的范围  分为全局作用域和局部作用域

函数内部使用变量，先从当前函数查找，如果找不到，则继续向父级查找，如果还找不到继续往上一级查找，最后找到window对象，如果还找不到，

则报错提示变量不存在，这种链条关系就是作用域链

18.谈谈this对象的理解？

this指向的函数的直接调用者（而非间接调用者），随着函数的使用场合的不同,this的指向会发生变化,但在函数执行过程中，this一旦被确定了，就不可以再更改。

在全局作用域中，this指向的是window
构造函数中，this指向实例对象
当⼀个函数被call和apply调⽤时，this的值就取传⼊的对象的值
定时器中，this指向window
在事件中，this指向触发这个事件的对象
特殊的是，IE中的attachEvent中的this总是指向全局对象的window
如果函数作为对象的⼀个属性时，并且作为对象的⼀个属性被调⽤时，函数中的this指向该对象否则指向window。

19.你是怎么理解ES6中Promise的？使⽤场景？

Promise对象代表一个异步操作, 它表示一个在未来完成的异步操作
在实例化promise的时候，需要传递一个回调函数作为参数，这个回调函数有两个参数，请求成功后的回调还有一个是请求失败后的回调
promise 对象仅有三种状态
    pending （进⾏中）
    fulfilled （已成功）
    rejected （已失败）
状态改变只有两种情况: 
	pending==>fulfilled  || pending==>rejected
参数：
	resolve成功的回调函数 reject失败的回调函数
常用API：
	then()   catch()    
	all() 静态方法 有一个失败就失败   race() 静态方法 有一个成功就成功
使用场景：
通过链式操作，将多个渲染数据分别给个 then ，让其各司其职。或当下个异步请求依赖上个请求结果的
时候，我们也能够通过链式操作友好解决问题
通过 all() 实现多个请求合并在⼀起，汇总所有请求结果，只需设置⼀个 loading 即可
通过 race 可以设置图⽚请求超时

20.说说var、let、const之间的区别？

在ES5中，顶层对象的属性和全局变量是等价的，用var声明的变量既是全局变量，也是顶层变量
let是ES6新增的命令，用来声明变量，用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效
const声明一个只读的常量，一旦声明，常量的值就不能改变

var 声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined
let和const不存在变量提升，具有块级作用域，它们所声明的变量一定要在声明后使用，否则报错

21.说说javaScript原⽣有⼏种绑定事件⽅式？具体如何实现？

JS原⽣绑定事件主要为三种：
 1.html事件处理程序
 2.DOM0级事件处理程序
 3.DOM2级事件处理程序
 
- 第一种

- 直接在标签中绑定事件

- 第二种
 
 -是先获取dom元素，然后直接给dom元素添加事件原生JavaScript代码实现

  使用JQuery对象转换成JavaScript对象实现

- 第三种

  提供了专⻔的绑定和移除⽅法，采用事件监听的方式，⽀持给个元素绑定多个相同事件，⽀持冒泡和捕获事件机制

22.说说jQuery有哪些选择器和常⽤查找⽅法？

基本选择器  层级选择器  内容选择器  过滤选择器 属性过滤选择器  子元素过滤选择器  表单属性过滤选择器
1、查找后代和子元素

找到后代find()

直接子元素children()

2、查找祖先和父元素

祖先parents()

父元素parent()

3、查找所有同辈

Siblings()

4、查找紧跟后面的兄弟和后面所有的兄弟

Next()紧跟兄弟

nextAll()后面所有的兄弟

5、查找紧跟前面的兄弟以及前面所有的兄弟

Prev()紧跟前面的兄弟

prevAll()前面所有的兄弟

6、eq(index)根据索引找元素

23.判断JS数据类型的⽅法有哪些？

1. typeof   对于基本数据类型判断是没有问题的，但是遇到引用数据类型（如：Array）是不起作用

2. instanceof	判断 new 关键字创建的引用数据类型

   不考虑 null 和 undefined（这两个比较特殊）以对象字面量创建的基本数据类型

3. constructor   似乎完全可以应对基本数据类型和引用数据类型 但如果声明了一个构造函数，并且把他的原型指向了 Array 的原型，所以这种情况下，constructor 也显得力不从心

4. Object.prototype.toString.call()	完美的解决方案

5. jquery.type()

   如果对象是undefined或null，则返回相应的“undefined”或“null”。

async/await（ES7）

async/await是Es7推出的一套关于异步的终极解决方案。
async 是异步的意思， await 则可以理解为 async wait 。所以可以理解 async 就是⽤来声明⼀个异步⽅法，函数返回⼀个 promise 对象，⽽ await 是⽤来等待异步⽅法执⾏，实现异步操作的同步化。