JS小结面试题

上拉下拉思路

1.只要上拉, 触发 上拉加载的方法,就让page页+1; 
然后调用接口 将页码传过去,
拿到数据 追加到 数组中,刷新数据
2.只要下拉刷新,就让 让 page=1, 请求接口将page传递到后台,拿到数据后,
首先将之前存储数据的数组清空,
然后再把数据添加带该数组中,刷新数据.

js中new之后做了什么

• 生成了一个{}
• 改变了this指向，从window变成了{}
• 属性、属性值和方法存入到{}
• 生成了一个隐含的__proto__，指向了prototype
• return {}

进程和线程

进程是执行中的一段程序，一个进程中的每个任务即为一个线程
一个线程只属于一个进程
线程无地址空间，线程开销比进程小

音频如何实现自动播放？

autoplay =“autoplay”

暂时性死区

ES6新增的let、const关键字声明的变量会产生块级作用域，如果变量在当前作用域中被创建之前被创建出来，由于此时还未完成语法绑定，如果我们访问或使用该变量，就会产生暂时性死区的问题，由此我们可以得知，从变量的创建到语法绑定之间这一段空间，我们就可以理解为‘暂时性死区’

内存泄露：

分配的内存没有被使用，但是也不能被回收的一种现象。我们已经无法再通过js代码来引用到某个对象，但垃圾回收器却认为这个对象还在被引用，因此在回收的时候不会释放它，这样导致内存一直被占用，会导致内存不够用而系统崩溃。

垃圾回收机制：

释放垃圾占用的空间，防止内存泄露。有效的使用可以使用的内存，对内存堆中已经死亡的或者长时间没有使用的对象进行清除和回收

箭头函数与普通函数区别：

1.语法更加简洁、清晰 2、箭头函数不会创建自己的this 3.箭头函数继承而来的this指向永远不变 4…call()/.apply()/.bind()无法改变箭头函数中this的指向 5.箭头函数不能作为构造函数使用 6.箭头函数没有原型prototype

call()/.apply()/.bind()区别

都可以改变this执行，call和apply立即执行，
call传序列参数，
apply传递数组或类数组；
bind需要调用才能执行，传序列参数

构造函数的继承：

构造函数的方法，我们通过原型对象（prototype）实现继承，其属性我们则是通过call、apply、bind，这三个方法实现继承
class是ES6新增的，继承通过extends实现

set 和 get区别

set的值是惟一的可以做数组去重，map没有数据格式限制，可以做数据存储
Map可以通过get方法获取值，而set不能因为它只有值

浅拷贝,深拷贝

浅拷贝，给a数组拷贝过来，因为两个数组获取的是同源数据地址，所以修改b，a也会改变。b没有独立内存。只是把a数组的数据指针给了b

• 浅拷贝方法：1.for···in只循环第一层；2.Object.assign方法
• 深拷贝方法：1.递归去拷贝所有层级属性。2.JSON对象，不能拷贝对象 3.lodash函数库
  https://www.jianshu.com/p/1c142ec2ca45

堆 栈

• 堆：如果一个对象保存的是另一个对象的引用（obj2=obj）当通过变量修改属性时，另一个对象会跟着改变。

• 栈：值与值之间都是独立存在；修改一个变量的值其他变量不会受到影响。

• 区别：栈内存是存放变量和基本数据类型，对象的内存地址；堆内存存放的是对象。

• 栈内存首先是一片内存区域，存储的都是局部变量 运行比较快

• 堆内存存储的是数组和对象，

基本数据类型和引用数据类型的区别

基本数据类型指的是具体的值，引用数据类型指的是有多个值构成的对象。

回流重绘

• 回流在页面渲染必会执行一次，当元素样式结构尺寸发生变化时让dom结构重新布局，回流
• 重绘就是dom元素样式发生变化，但是不影响布局的解构大小。如背景色。重绘

谈谈 This 对象的理解

this是js的一个关键字，随着函数的使用场合的不同，this 的值会发生变化；

• 当以函数形式调用时，this指向window
• 以对象属性方法调用时，this指向调用的对象。由调用者决定
• 以构造函数调用时，this指向新创建的对象
• 以call和apply调用时，this指向call和apply传递的对象

事件委托是什么？

• 定义：利用事件冒泡的特性，将注册在子元素上的事件函数注册在父元素上，子元素触发该事件时如果其本身没有该事件函数就往父元素查找是否有该事件函数，有则触发。
• 好处：减少DOM操作，提高性能。随时可以添加子元素，添加的子元素会有相应的事件处理函数。

什么是闭包，为什么要用它？

• 定义：是个函数，引用了外层函数的参数或者变量的函数，一旦在外层函数的外部调用它，就产生了闭包。
• 可以避免全局变量的污染；函数内部可以引用外部的参数和变量；参数和变量不会被垃圾回收机制回收。

谈一谈浏览器的缓存机制？

浏览器的缓存机制也就是我们说的HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行的。
- 浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
- 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中
- 强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存,若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存

什么是同源策略，好处是什么

• 同源策略是浏览器提供的一个安全功能；指的是两个 URL 的协议、域名、端口相同。
• 好处：它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

事件轮询

一个程序结构，用来等待和发送消息和事件。
由于js是单线程。用来协调事件，用户交互，脚本，渲染，网络等。
解决单线程带来的一些问题，比如一个事件执行时间过长导致后面的无法执行。

高阶函数

高阶函数是一个接收函数作为参数或将函数作为输出返回的函数。
把函数当作参数传递 这个函数称为高阶函数(回调函数是一种)
把函数当作返回值返回 这个函数也称为高阶函数

单页面应用(SPA)

单页面应用(SPA)：指一个系统只加载一次资源，只有一个html文件。
之后的操作交互，数据交互是通过路由，ajax来进行。页面没有刷新。 
 优：加载次数少，用户体验好。
 缺：加载后性能较高，不利于seo。首页加载慢

原型链

原型与对象之间由__proto__属性连接起来的链式结构,原型是对象
对象也有原型。终点Object.prototype
构造函数 new 为一个实例化对象，构造函数的prototype找到原型，
原型通过constructor找到构造函数。实例化对象的__proto__找到原型

fs模块

fs模块：用来操作文件系统的，做一些文件的读写，改，查 ，删

vm

vm就是 Vue这个类的实例，,可以获取这个对象的属性和方法

联调：

远程接口代理到本地进行开发

没有请求完，终止ajax请求

取消请求官方提供了方法就是在new一个CancelToken函数的参数，
我们主要实现的就是想让 这个参数被外部使用
所以使用了 第四个参数  函数  使用参数进行返回
对第四个参数进行重新赋值使用

哪些标签具备默认事件，js中如何阻止默认事件，react中如何阻止默认事件

a、form表单中button
js阻止a标签href值写成“JavaScript：在onclick事件内再加上return false
js阻止button默认提交在onClick事件内return false
react阻止默认事件 preventDefault()

localStorage和sessionStore以及cookie的区别是什么，使用场景是什么？

localstorage存储的内容大概20MB、不同浏览器不能共享,
但是在同一浏览器的不同窗口中可以共享
sessionstorage存储的容量是5MB左右、
仅仅存储在当前页面的内存中、生命周期为关闭当前页面；
cookie存放数据大小为4K左右、有个数限制，
生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

作用域

-全局作用域：直接编写在script标签之中的JS代码，都是全局作用域；全局作用域在页面打开时创建，页面关闭时销毁；
-局部作用域：调用函数时创建函数作用域，函数执行完毕之后，函数作用域销毁；

闭包

-闭包：内层引用了外层函数的变量或参数的函数，一旦在外层函数的外部被调用它，产生了闭包。

防抖 节流

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
防抖是控制次数，节流是控制频率

跨域解决方案

1、 通过jsonp跨域
2、 nginx代理跨域
6、 跨域资源共享（CORS）
3、 location.hash + iframe
4、 window.name + iframe跨域
9、 WebSocket协议跨域

5、 postMessage跨域
7、 document.domain + iframe跨域
8、 nodejs中间件代理跨域

jsonp跨域原理

通过动态创建script标签，请求服务端的php文件，
这个文件返回结果是一段js代码(作用：调用我们之前定义好的函数)
从而将服务端的数据发送给客户端

== 和 === 区别

1、=：称为等同符，当两边值的类型相同时，直接比较值，若类型不相同，直接返回false；
2、：称为等值符，当等号两边的类型相同时，直接比较值是否相等，若不相同，则先转化为类型相同的值，再进行比较；

AOP（面向切面）：

面向切面拦截的是类的元数据（包、类、方法名、参数等）
相对于拦截器更加细致，而且非常灵活，拦截器只能针对URL做拦截，而AOP针对具体的代码，能够实现更加复杂的业务逻辑。

ajax 五个步骤

1.创建一个XMLHttpRequest异步对象
2.设置请求方式和请求地址
3.用send发送请求
4.监听状态变化
5.接收返回的数据

ajax的状态码(生命周期)

1. 请求未初始化 (代理XHR) 被创建 但是没有调用open
2. 服务器连接已建立 open方法已经调用 建立连接
3. 请求已经接收 send方法已经被调用 可以获取状态行和响应头
4. 请求处理中 响应下载中 可能有部分数据
5. 请求已完成 响应已就绪 响应下载完成 数据完整

• 优点：减轻服务器的负担,按需取数据,最大程度的减少冗余请求，局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验。
• 缺点：AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性。

axios特点

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据

http和https的区别

1.HTTP 是超文本传输协议，信息是明文传输，HTTPS则是具有安全性的 SSL 加密传输协议。
2. HTTP和HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
3.HTTP的连接很简单，是无状态的。HTTPS协议是由SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比HTTP协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

token值获取到存放到了哪里？

1.客户端使用 cookie直接认证，需要设置 cookie为 httpOnly，可以防止 xss攻击。但是无法防止 csrf攻击。需要设置伪随机数X-XSRF-TOKEN。（推荐！不需要处理xss，并且xsrf随机数有完善的应用机制）
2.客户端使用auth授权头认证，token存储在cookie中，需要防止xss攻击。可以防止csrf攻击，因为csrf只能在请求中携带cookie，而这里必须从cookie中拿出相应的值并放到authorization头中。实际上cookie不能跨站（同源政策）被取出，因此可以避免csrf攻击。（适用于ajax请求或者api请求，可以方便的设置auth头）
3.可以将token存储在localstorage里面，需要防止xss攻击。实现方式可以在一个统一的地方复写请求头，让每次请求都在header中带上这个token，当token失效的时候，后端肯定会返回401，这个时候在你可以在前端代码中操作返回登陆页面，清除localstorage中的token。（适用于ajax请求或者api请求，可以方便的存入localstorage）

项目打包到线上，请求别的网站接口，跨域处理

www.a.com 访问 www.b.com 就是跨域

• nginx跨域
  nginx 再加上一段代码。就不存在跨域了
  location ^~/home/{
  rewrite ^/home/(.*)/$1 break;
  proxy_pass https://home-api.pinduoduo.com/home/;
  }