前端知识补充

关于this的知识点总结：

特殊的例子：发现在setInterval和setTimeout中传入函数时，函数中的this会指向window对象。(这个问题需要注意)

this主要是有几种的绑定方式

https://juejin.cn/post/6844903805587619854

this有几种的绑定情况：

1.默认绑定(小明说不出到底谁是他的女友，就指向win对象)

2.隐式绑定：

只关注到最后一层的内容

3也叫显示绑定

这个部分是call，apply，bind的绑定完成对于数据的绑定

4.new绑定，this绑定到xiaoHong哪里

这里xiaoHong的this绑定的是Lover

new绑定 > 显式绑定 > 隐式绑定 > 默认绑定

做题：

闭包的缺点?
闭包：能够读取其他函数内部变量的函数。（应用场景：要获取某函数内部的局部变量）

闭包的优点：1.能够读取函数内部的变量 2.让这些变量一直存在于内存中，不会在调用结束后，被垃圾回收机制回收

闭包的缺点：正所谓物极必反，由于闭包会使函数中的变量保存在内存中，内存消耗很大，所以不能滥用闭包，解决办法是，退出函数之前，将不使用的局部变量删除。

关于js的隐式转化?
https://juejin.cn/post/6844903557968166926
JS的+运算符即可数字相加，也可以字符串相加。所以转换时很麻烦。== 不同于===，故也存在隐式转换。- * / 这些运算符只会针对number类型，故转换的结果只能是转换成number类型。
如何做到a1&&a2&&a==3
js的隐式转换。
class A {
constructor(value) {
this.value = value;
}
valueOf() {
return this.value++;
}
}
const a = new A(1);
if (a == 1 && a == 2 && a == 3) {
console.log(“Hi Eno!”);
}
关于add部分就是隐式转换的内容。
add(1)(2)(3)
add(1,2)(3)

add(){
let args =Array.prototype.slice.call(arguments);//把伪数组变成真实的数组方法。
let inner=function(){
args.push(…arguments)
return inner; //2.3都会执行这里，2.3后执行下面的tostring
}
inner.toString = function(){//这里是，tostring，最后console.log打印的就是这部分内容。
return args.reduce(function(prev,cur){
return prev+cur]})
}
return inner;//1.这部分的内容，1完成后先执行tostring。然后执行2.3
}
console.log(add(1,2,3)(2,4)(3)); //1.这个部分的内容是像returninner。就是因为console.log的原因所以才进行tostring的运行

//暂时的理解是每个函数都会执行tostring。完成了tostring之后。打印的内容就是tostring

js的new实例干了什么：

1.创建了一个空的对象obj。将obj.__proto_设置为构造函数的prototype属性

2.新对象和函数调用this绑定起来。执行函数中的代码

3.返回这个新对象。

这个部分全是JavaScript

1.闭包：

这里有个问题解决

解决这部分的内容有几种方法：

1.采用立即执行函数的方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h82dbUKj-1625029986109)(C:\Users\leo\AppData\Roaming\Typora\typora-user-images\image-20210626201852935.png)]

2.改成let

3.采用bind的方法

settimeout也算是一种立即执行函数，所以当到了时间就会执行的。bind是个返回的函数，如果使用call和apply的话，会有两个立即执行函数。

4.中传递下面的函数

传入第三个参数，这个参数是i就是function的参数。在等待的过程中实际上是function的内容。到时间了运行function。那时候i早就传进去了

闭包会用在那些场景

1.上面的这种情况

2.防抖和节流我们定义行为，然后把它关联到某个用户事件上（点击或者按键）。我们的代码通常会作为一个回调（事件触发时调用的函数）绑定到事件上

3.函数柯里化。

2.apply、call、bind

https://juejin.cn/post/6844904151227301901

call，bind，apply的内容

手写一下call，bind，apply的内容。

call的内容：

这里的this原来是指target的内容的。

1.这个部分有两个内容，…args的内容是把下面的“111”，“222”变成数组，这时候你就会知道的一点是当你写args的时候他是数组，但是当你在这个基础上继续做…args那么他的意思就是让他重现数组打开，变成内容输进去。

apply的内容：

bind的内容：!!!注意bind具有柯里化的特性。

这里首先使用了Array.prototype.slice.call(arguments,1)对于calllt函数的参数进行了截取。
因为arguments是一个类数组，没有slice方法，因此在Array类型的原型链上调用slice()方法；call()函数里面传入arguments和1，是将slice()函数的调用对象设置为arguments,即在arguments上调用slice方法，1作为参数传入slice方法返回的新数组的项是arguments去掉第一个参数后的所有参数；

3.伪数组问题

https://www.jianshu.com/p/6de3220fbf0d

什么是伪数组：是一种按照索引存储数据且具有length属性的对象，因为是对象，所以不能调用数组的方法，比如forEach(),push()等。

let a = {

0:"x",

1:"y",

3:"z",

length:3}

常用的伪数组是aruments

document.querySelector(“div”);选取元素的方法。
更改伪数组的方法。

Array.from()方法进行

[].slice.call(a)

[].slice.apply(a)

数组[].concat.apply([],a)

for (let i = 0; i < a.length; i++) {
  b.push(a[i]);
}

4.typeof和instanceof的操作理解

typeof只能判断几种情况，基本数据类型加上object，function等，这些数据类型。记住两个特殊的点1.不能判断array。[]是array

2.是null为object的内容。

关于instanceof的内容。这部分是只能判断复杂的数据类型，简单的不能进行判断。这个需要记住。

还是null instanceof null报错

null instanceof objcet报错

还有这里可以instanceof Array

5.new一个新对象会产生什么

这里一定要知道的是这里的代码会执行，所以bind里面会有执行的内容。

6.防抖和节流函数

防抖和节流函数
防抖：是事件停止输入一段时间后输入函数。
节流是点击了很多次，但是多长时间运行一次。如果再这期间都有节流的内容，那么就算是
例子：防抖函数比如百度就算是防抖
节流：鼠标的多次按键功能就算是节流的例子

请记得：settimeout会改变this 的指向，指向window

null和cleartimeout的区别。

null么有清除这次的定时器，只是清除了指向的问题，本次定时器仍然会执行。

7.为什么0.1+0.2！=0.3

这是为什么呢

与许多其他编程语言不同，JavaScript 并未定义不同类型的数字数据类型，而是始终遵循国际 IEEE 754 标准，将数字存储为双精度浮点数。

当把0.1转变成二进制的时候会出现无限循环的问题，当相加的时候无限循环的问题就会导致小数点厚后面还有别的数值。

https://blog.csdn.net/weixin_33857230/article/details/88731032

解决办法

8.promise

8.1关于promise的基础（promise的用法）

promise是为了解决什么问题:

• 回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象
• promise可以支持多个并发的请求，获取并发请求中的数据
• 这个promise可以解决异步的问题，本身不能说promise是异步的

解释一个promise

promise是一种构造函数，用来生成promise的实例。

promise一共有三种状态。1.fulfill。当处于满足状态的时候，pending的时候是进行的状态。还有reject的状态这三种。

image的而**onload**则是这个Image对象的load事件回调，当图片加载完成后执行onload绑定的函数。

promise中的then的第二个参数个catch的区别。

比如说如果then里面的第一个参数，里面报错，不会直接跳出，而是会运行catch的内容来进行下面的东西

promise.all的用法

promise.race的内容

完成一个关于图片的加载过程

1.除了catch的用法还有一种别的方法，then（（）=>{},()=>{}）这是两种的写入方法。错误的时候会运行后面的内容

2.需要注意的是new 一个新对象里面的内容是会自己执行的。

document.body.appenChild(img)的做法就是将img元素放入底部.

这里的innerHTML会抛出一个这个新错误。

8.2手写promise

链接;https://juejin.cn/post/6945319439772434469

8.4async和await是使用

async返回的是一个promise。那么可以使用then函数直接调用。await只能在async中使用。返回的是一个promise对象，状态为resolved，参数是return的值。async里面记住必须有返回值，不能没有返回值。

resolve内部会执行rejct的情况。

1. 内部含有直接使用并且未声明的变量或者函数。
2. 内部抛出一个错误throw new Error或者返回reject状态return Promise.reject('执行失败')
3. 函数方法执行出错（🌰：Object使用push()）等等…

https://juejin.cn/post/6844903988584775693#:~:text=%E4%BB%A3%E7%A0%81%E6%94%B9%E6%88%90%E8%BF%99%E6%A0%B7%EF%BC%9A-,console.log(%27script%20start%27)%0A%0Aasync%20function%20async1()%20%7B%0Aawait%20async2()%0Aconsole,promise1%27)%0A%7D)%0A.then(function()%20%7B%0Aconsole.log(%27promise2%27)%0A%7D)%0A%0Aconsole.log(%27script%20end%27),-%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81

await是什么

await意思是async wait(异步等待)。这个关键字只能在使用async定义的函数里面使用。任何async函数都会默认返回promise，并且这个promise解析的值都将会是这个函数的返回值，而async函数必须等到内部所有的 await 命令的 Promise 对象执行完，才会发生状态改变。

await一定是return的部分停止等下面的运行完了之后才知道return的东西。

一定要知道事件的循环机制：

1.一定要明白一个点await的fn里面的，除了return不执行，其余的全部都会执行。最后返回内容，等所有都执行完后之后，但是promise的then部分不会执行，等到await后就会执行

9.Event Loop

Event Loop的事件循环，是浏览器为了解决javascript的单线程运行时候会出现阻塞的一种机制，也就是我们常说的一种异步原理。他把事件分为宏任务和微任务，当执行完宏任务后就会执行所有的微任务。这里满是有渲染的，如果有alert的话就会渲染

10.箭头函数和普通函数的区别

箭头函数没有this，通过查找作用域链是确定的。

12、ES6的内容知识

12.1ES6的新特性

ES6的引入了const和let

引入了箭头函数

引入了class类

引入promise和async和await

引入了新的数据类型symbol，并且引入了新的数据结构set和map

引入了模块化的开发。

12.2ES6中模块是严格模式的！！记住是模块的情况下

https://juejin.cn/post/6844903566121893895

不准意外的创建全局的变量

不能使用delete形式

函数部分：

13事件捕获 和事件冒泡

事件冒泡;从下往上进行事件的冒泡处理。

事件捕获;从上往下进行的内容。

这两个部分对应不同的事件流：

DOM事件流：事件捕获阶段、处于目标阶段、事件冒泡阶段。

IE事件处理程序：事件处理阶段、事件冒泡阶段

IE不存在时间捕获

在程序中：如果有addEventListener(“click”,theName,true)看最后一个true的值。如果为true那么采用事件捕获的状态，反正那么就是冒泡阶段。

14.关于Node的事件循环状态。

https://juejin.cn/post/6844903761949753352

外部输入数据–>轮询阶段(poll)–>检查阶段(check)–>关闭事件回调阶段(close callback)–>定时器检测阶段(timer)–>I/O事件回调阶段(I/O callbacks)–>闲置阶段(idle, prepare)–>轮询阶段（按照该顺序反复运行）…

timers 阶段：这个阶段执行timer（setTimeout、setInterval）的回调

I/O callbacks 阶段：处理一些上一轮循环中的少数未执行的 I/O 回调

idle, prepare 阶段：仅node内部使用

poll 阶段：获取新的I/O事件, 适当的条件下node将阻塞在这里

check 阶段：执行 setImmediate() 的回调

close callbacks 阶段：执行 socket 的 close 事件回调

(2) poll

poll 是一个至关重要的阶段，这一阶段中，系统会做两件事情

1.回到 timer 阶段执行回调

2.执行 I/O 回调

并且在进入该阶段时如果没有设定了 timer 的话，会发生以下两件事情

• 如果 poll 队列不为空，会遍历回调队列并同步执行，直到队列为空或者达到系统限制（执行队列中含有的任务比如console之类的）
• 如果 poll 队列为空时，会有两件事发生
  • 如果有 setImmediate 回调需要执行，poll 阶段会停止并且进入到 check 阶段执行回调
  • 如果没有 setImmediate 回调需要执行，会等待回调被加入到队列中并立即执行回调，这里同样会有个超时时间设置防止一直等待下去

当然设定了 timer 的话且 poll 队列为空，则会判断是否有 timer 超时，如果有的话会回到 timer 阶段执行回调。

（意思就是poll里面如果有内容的就行执行poll，一些普通函数的调用。console等等，没有的话就会跑到setimmediate，如果两个都没有就会到timer阶段）

15.拷贝函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xFyzKQuZ-1625029986129)(C:\Users\leo\AppData\Roaming\Typora\typora-user-images\image-20210629113723057.png)]

16.用setTimeout模拟实现setInterval

你为什么要用setTimeout来实现，有不准时的原因，还有就是setinterval中检测到了任务队列中有setinterval，那么就不会往任务队列加上这次任务。

可以这么理解：每个 setTimeout 产生的任务会直接 push 到任务队列中；而 setInterval 在每次把任务 push 到任务队列前，都要进行一下判断(看上次的任务是否仍在队列中，如果有则不添加，没有则添加)。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4zhveSuq-1625029986130)(C:\Users\leo\AppData\Roaming\Typora\typora-user-images\image-20210629152214283.png)]

这里有一点为什么第二个也有一个setTimeout是为了让第一个func也是在任务队列中的。不会出现不在任务队列中的任务。

19、单例模式

CSS部分

1.href和src的区别

href主要是link和a元素。

src主要是img、style、script、input、iframe

href主要是一个连接，只有点击内容后才会有内容。src主要是直接显示再页面中。

Vue部分

webpack有写过loader和plugin吗，说一下webpack的原理(不会)

HTML部分

HTTP

说一下http2.0

参考回答：

首先补充一下，http和https的区别，相比于http,https是基于ssl加密的http协议

简要概括：http2.0是基于1999年发布的http1.0之后的首次更新。

提升访问速度（可以对于，请求资源所需时间更少，访问速度更快，相比http1.0）

允许多路复用：多路复用允许同时通过单一的HTTP/2连接发送多重请求-响应信息。改善了：在http1.1中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞。

二进制分帧：HTTP2.0会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码

首部压缩

服务器端推送（服务器会主动的返回信息。）

算法题目（真题）

项目会问的

项目如何优化的：

具体涉及到哪些前端性能指标
c主要是img、style、script、input、iframe

href主要是一个连接，只有点击内容后才会有内容。src主要是直接显示再页面中。

Vue部分

webpack有写过loader和plugin吗，说一下webpack的原理(不会)

HTML部分

HTTP

说一下http2.0

参考回答：

首先补充一下，http和https的区别，相比于http,https是基于ssl加密的http协议

简要概括：http2.0是基于1999年发布的http1.0之后的首次更新。

提升访问速度（可以对于，请求资源所需时间更少，访问速度更快，相比http1.0）

允许多路复用：多路复用允许同时通过单一的HTTP/2连接发送多重请求-响应信息。改善了：在http1.1中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞。

二进制分帧：HTTP2.0会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码

首部压缩

服务器端推送（服务器会主动的返回信息。）

算法题目（真题）

项目会问的

项目如何优化的：

具体涉及到哪些前端性能指标