关于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的情况。
- 内部含有直接使用并且未声明的变量或者函数。
- 内部抛出一个错误
throw new Error
或者返回reject
状态return Promise.reject('执行失败')
- 函数方法执行出错(🌰: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会将所有的传输信息分割为更小的信息或者帧,并对他们进行二进制编码
首部压缩
服务器端推送(服务器会主动的返回信息。)
算法题目(真题)
项目会问的
项目如何优化的:
具体涉及到哪些前端性能指标