from:https://articles.zsxq.com/id_x4esh7nnukh7.html
1. 数据类型(原始数据类型和引用数据类型,堆栈内存),数据类型检测和数据类型转换
2. 数组常用方法、对象常用方法
3. 类数组和数组的区别和转换,数组的检测方式,数组去重和排序
4. 函数执行机制和执行上下文,执行上下文栈(普通函数,立即执行函数,箭头函数、构造函数)
5. 闭包作用域(变量提升,arguments, 作用域与作用域链,闭包的应用场景,闭包优缺点)
6. 内存泄漏和垃圾回收机制
7. this指向的规则(call/bind/apply的使用)
8. new和构造函数
9. 原型与原型链的理解
10. 继承实现的方式和区别?
11. 深拷贝与浅拷贝
12. 事件循环机制(任务队列,微任务,宏任务,同步,异步,进程和线程,浏览器线程)
13. JS异步解决方案(回调函数、Promise、Generator、async、定时器)
14. DOM选择器
15. 常见DOM操作(增,删,改)
16. 事件流的过程(事件冒泡和事件捕获)、事件处理程序(DOM0级事件处理程序和DOM2级事件处理程序)、事件对象、事件委托
1. 数据类型(原始数据类型和引用数据类型,堆栈内存),数据类型检测和数据类型转换
1.1、类型分类
a、基本数据类型/简单数据类型/值类型
b、引用数据类型/复杂数据类型(统称为Object)
1.2、类型检测
a、typeof
适用于精确检测除null之外的简单数据类型 操作符返回一个字符串,表示未经计算的操作数的类型
b、instanceof :xxx instanceof constructor
适用于精准检测引用数据类型
可以正确判断对象的类型,用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上,object instanceof constructor,object为实例对象,constructor为构造函数
c、Object.prototype.toString.call()
调用该方法,统一返回格式“[object Xxx]”的字符串
d、typeof与instanceof区别
typeof会返回一个变量的基本类型,instanceof返回的是一个布尔值
instanceof 可以准确地判断复杂引用数据类型,但是不能正确判断基础数据类型
typeof虽然可以判断基础数据类型(null 除外),但是引用数据类型中,除了function 类型以外,其他的也无法判断
1.3、类型转换
a、转换为字符串类型
变量.toString()
String(变量)
隐式转换:加号拼接字符串:【变量 + ‘’ 】
b、转换为数字类型
parseInt(变量):将string类型转换成整数数值型
parseFloat(变量):将string类型转换成浮点数数值型
Number(变量)
隐式转换:利用-、*、/【变量 - 0、变量 * 1 、变量 / 1】
c、转换为布尔类型
Boolean(变量):Boolean(‘true’)
2. 数组常用方法、对象常用方法
https://blog.csdn.net/qq_51090530/article/details/1248508473. 类数组和数组的区别和转换,数组的检测方式,数组去重和排序
3.1、区别及转换
https://blog.csdn.net/qq_37635012/article/details/106195211
3.2、检测
https://blog.csdn.net/weixin_43299180/article/details/1109165823.3、去重
[...new Set(arr)]
Array.from(new Set(arr))
3.4、排序
sort
4. 函数执行机制和执行上下文,执行上下文栈(普通函数,立即执行函数,箭头函数、构造函数)
4.1、执行机制
https://www.jianshu.com/p/db019979ae224.2、执行上下文,执行上下文栈
https://blog.csdn.net/weixin_45602227/article/details/119523367
https://www.cnblogs.com/fundebug/p/understand-javascript-context-and-stack.html
5. 闭包作用域(变量提升,arguments, 作用域与作用域链,闭包的应用场景,闭包优缺点)
5.1、闭包
a、生成条件
高阶函数是对其它函数进行操作的函数,它接收函数作为参数或将函数作为返回值输出。
也就是嵌套函数
b、概念
闭包指有权访问另一个函数作用域中变量的函数。简单理解就是一个作用域可以访问另一个函数内部的局部变量。
c、作用
延伸了变量的作用范围
5.2、作用域与作用域链
6. 内存泄漏和垃圾回收机制
6.1、内存泄漏
无法垃圾回收就是内存泄漏,哪些情况会导致内存泄漏:
a、意外的全局变量
由于使用未声明的变量,而意外的创建了一个全局变量,而使这个变量一直留在内存中无法被回收
b、被遗忘的计时器或回调函数
设置了 setInterval 定时器,而忘记取消它,如果循环函数有对外部变量的引用的话,那么这个变量会被一直留在内存中,而无法被回收
c、脱离 DOM 的引用
获取一个 DOM 元素的引用,而后面这个元素被删除,由于一直保留了对这个元素的引用,所以它也无法被回收
d、闭包
不合理的使用闭包,从而导致某些变量一直被留在内存当中
6.2、GC机制
a、垃圾回收的概念
垃圾回收:JavaScript代码运行时,需要分配内存空间来储存变量和值。当变量不在参与运行时,就需要系统收回被占用的内存空间,这就是垃圾回收。
b、回收机制
--- Javascript 具有自动垃圾回收机制,会定期对那些不再使用的变量、对象所占用的内存进行释放,原理就是找到不再使用的变量,然后释放掉其占用的内存。
---JavaScript中存在两种变量:局部变量和全局变量。全局变量的生命周期会持续要页面卸载;
而局部变量声明在函数中,它的生命周期从函数执行开始,直到函数执行结束,在这个过程中,局部变量会在堆或栈中存储它们的值,当函数执行结束后,这些局部变量不再被使用,它们所占有的空间就会被释放。
---当局部变量被外部函数使用时,其中一种情况就是闭包,在函数执行结束后,函数外部的变量依然指向函数内部的局部变量,此时局部变量依然在被使用,所以不会回收。
c、回收方式
标记清除、引用计数
d、减少垃圾回收:虽然浏览器可以进行垃圾自动回收,但是当代码比较复杂时,垃圾回收所带来的代价比较大,所以应该尽量减少垃圾回收
--对数组进行优化
在清空一个数组时,最简单的方法就是给其赋值为[ ],但是与此同时会创建一个新的空对象,可以将数组的长度设置为0,
以此来达到清空数组的目的
--对object进行优化
对象尽量复用,对于不再使用的对象,就将其设置为null,尽快被回收
--对函数进行优化
在循环中的函数表达式,如果可以复用,尽量放在函数的外面
7. this指向的规则(call/bind/apply的使用)
7.1、this指向
this的指向,是当我们调用函数的时候确定的。调用方式的不同决定了this的指向不同,一般指向我们的调用者。
this指向分类:
a、普通函数
window
b、构造函数
实例对象,原型对象里面的方法也指向实例对象
c、对象方法
该方法所属对象
注:若对象中的方法为普通函数写法,则this指向该方法所属对象,若为箭头函数,则this指向为window
d、事件绑定函数
绑定事件对象
e、定时器
window
f、立即执行函数
window
g、箭头函数
外层作用域中的this(且this指向不可改变)
7.2、对this对象的理解
apply 、 call 和 bind 调用模式,这三个方法都可以改变指定调用函数的 this 指向。
--apply 方法接收两个参数:一个是 this 绑定的对象,一个是参数数组。
--call 方法接收的参数,第一个是 this 绑定的对象,后面的其余参数是传入函数执行的参数。也就是说,在使用 call() 方法时,传递给函数的参数必须逐个列举出来。
--bind 方法通过传入一个对象,返回一个 this 绑定了传入对象的新函数。这个函数的 this 指向除了使用 new 时会被改变,其他情况下都不会改变。
7.3、call() 和 apply() 的区别
它们的作用一模一样,区别仅在于传入参数的形式的不同。
● apply 接受两个参数,第一个参数指定了函数体内 this 对象的指向,第二个参数为一个带下标的集合,这个集合可以为数组,也可以为类数组,apply 方法把这个集合中的元素作为参数传递给被调用的函数。
● call 传入的参数数量不固定,跟 apply 相同的是,第一个参数也是代表函数体内的 this 指向,从第二个参数开始往后,每个参数被依次传入函数。
8. new和构造函数
8.1、new
new操作符的执行过程:
(1)首先创建了一个新的空对象(创建一个新的内存空间)
(2)设置原型,将对象的原型设置为函数的 prototype 对象。
(3)让函数的 this 指向这个对象,执行构造函数的代码(为这个新对象添加属性)
(4)返回新对象(所以构造函数不需要return)
8.2、构造函数
构造函数 ,是一种特殊的方法。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,
总与new运算符一起使用在创建对象的语句中。
特别的一个类可以有多个构造函数 ,可根据其参数个数的不同或参数类型的不同来区分它们 即构造函数的重载
9. 原型与原型链的理解
10. 继承实现的方式和区别?
10.1、继承
构造函数、prototype原型链继承、类继承(extends+super)
11. 深拷贝与浅拷贝
针对引用型数据
https://blog.csdn.net/SSophia/article/details/12396473312. 事件循环机制(任务队列,微任务,宏任务,同步,异步,进程和线程,浏览器线程)
12.1、JS是单线程,也就是说,同一时间只能做一件事。
同步(按顺序来):
同步任务:同步任务都在主流程上执行,形成一个执行栈。
异步(同时进行):
异步任务:JS的异步是通过回调函数实现的。异步任务相关回调函数添加到任务队列中(任务队列也称消息队列)。一般而言,异步任务有三种类型:
普通事件,如click、resize等
资源加载,如load、error等
定时器,包括setTimeout、setInterval等。
12.2、JS执行机制--Event Loop【事件循环】
a、先执行执行栈中的同步任务;
b、异步任务(回调函数)放入任务队列中;
c、一旦执行栈中的所有同步任务执行完毕,系统会按次序取任务队列中的异步任务,
于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
13. JS异步解决方案(回调函数、Promise、Generator、async、定时器)
a、回调函数的方式
使用回调函数的方式有一个缺点是,多个回调函数嵌套的时候会造成回调函数地狱,上下两层的回调函数间的代码耦合度太高,不利于代码的可维护
b、Promise的方式
使用 Promise 的方式可以将嵌套的回调函数作为链式调用。但是使用这种方法,有时会造成多个 then 的链式调用,可能会造成代码的语义不够明确
c、generator的方式
它可以在函数的执行过程中,将函数的执行权转移出去,在函数外部还可以将执行权转移回来。
当遇到异步函数执行的时候,将函数执行权转移出去,当异步函数执行完毕时再将执行权给转移回来。
因此在 generator 内部对于异步操作的方式,可以以同步的顺序来书写。使用这种方式需要考虑的问题是何时将函数的控制权转移回来,因此需要有一个自动执行 generator 的机制,比如说 co 模块等方式来实现 generator 的自动执行
d、async函数的方式
async 函数是 generator 和 promise 实现的一个自动执行的语法糖,它内部自带执行器,当函数内部执行到一个 await 语句的时候,如果语句返回一个 promise 对象,那么函数将会等待 promise 对象的状态变为 resolve 后再继续向下执行。因此可以将异步逻辑,转化为同步的顺序来书写,并且这个函数可以自动执行
14. DOM选择器
14.1、DOM树
15. 常见DOM操作(增,删,改)
16. 事件流的过程(事件冒泡和事件捕获)、事件处理程序(DOM0级事件处理程序和DOM2级事件处理程序)、事件对象、事件委托
16.1、事件对象
a、
b、
c、
d、
16.2、事件流
事件流描述的是从页面中接收事件的顺序。事件发生会在元素节点之间按照特定的顺序传播,这个传播过程就是DOM事件流。
16.3、事件委托【事件冒泡应用】
a、原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理,通过e.target影响设置每个子节点。
b、作用:只操作了一次DOM,提高了程序的性能
标签:构造函数,函数,对象,数据类型,无以至千里,js,执行,不积跬步,变量 From: https://www.cnblogs.com/gs-top/p/16953042.html