JavaScript必须掌握的四大基础知识（数据类型、原型和原型链、闭包、异步 promise）

前言

本文不间断进行更新（看个人知识水平），记录一下知识不断积累的过程。不都说“不积跬步，无以至千里。不积小流，无以成江海。”，慢慢来吧。

先看题：

1.typeof能判断哪些类型？（JS变量类型）
2.window.onload 和 DOMContentLoaded的区别？（页面加载过程）
3.手写节流、防抖（性能、体验优化）
4.Promise解决了什么问题？（JS异步）

了解考察点之后，脑中都可以想起什么相关内容呢？我先说说我想起什么了吧，没写到的后续会慢慢补上。

数据类型

变量类型和计算

• 常见值类型

• 常见引用类型

• typeof 运算符* 识别所有值类型* 识别函数* 判断是否是引用类型（不可在细分）

• instanceof* 判断引用数据类型* 不能判断基本数据类型* instanceof 运算符可以用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性

内部运行机制是判断在其原型链中能否找到该类型的原型

• constructor* 判断数据的类型* 对象实例通过constrcutor 对象访问它的构造函数 (下面原型内容会写到)

如果创建一个对象改变它的原型，constructor就不能用来判断数据类型了

• Object.prototype.toString.call()* 使用 Object 对象的原型方法toString 来判断数据类型* 同样是检测对象 obj 调用 toString 方法，obj.toString()的结果和 Object.prototype.toString.call(obj)的结果不一样，这是为什么？* toString 是 Object 的原型方法* Array、function 等类型作为 Object 的实例，都重写了 toString 方法* 不同的对象类型调用 toString 方法时，根据原型链的知识，调用的是对应的重写之后的 toString 方法（function 类型返回内容为函数体的字符串，Array 类型返回元素组成的字符串…），而不会去调用 Object 上原型 toString 方法（返回对象的具体类型），所以采用 obj.toString() 不能得到其对象类型，只能将 obj 转换为字符串类型；因此，在想要得到对象的具体类型时，应该调用 Object 原型上的 toString 方法
• 深拷贝实现* 深拷贝 拷贝后的结果更改是不会影响拷贝前的，拷贝前后是没有关系的* 浅拷贝 改变拷贝前的内容，会对拷贝之后的有影响，拷贝前和拷贝后是有关系的

• == 运算符

• if语句和逻辑运算* truly变量 ： !!a === true 的变量* falsely变量：!!a === false 的变量

原型和原型链

先看题：

1.如何准确判断一个变量是不是数组？
2.手写一个简易的jQuery，考虑插件和扩展性
3.class的原型本质，怎么理解？

想想这么回答，从class写起吧：

• class* constructor* 属性* 方法
• 继承* extends* super* 扩展或重写方法

• 原型和原型链

用上面定义的类，创建一个lj实例，const lj = new Student('lj', '2022')

x1 instanceof x2----->>>>---- x1 的隐式原型能否找到 x2 的显示原型

总结：

1.每个 class 都有显示原型 prototype
2.每个实例都有隐式原型 __proto__
3.实例的__proto__ 指向对应的 class 的 prototype
4.获取实例的属性或者执行方法时，先在自身属性和方法上寻找，如果找不到则自动去__proto__中查找

按照原型链找到 Object 时，Object.prototype有 tostring 函数、hasOwnProperty 函数 ，此时 Object 的__proto__指向 null

<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/36c514949b9e4496bfbf8bd2733ebdfc~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?) 图中由相互关联的原型组成的链状结构(紫色流向线)就是原型链。注：本图来自于-- 冴羽 [# JavaScript 深入之从原型到原型链](https://juejin.cn/post/6844903472836395022 “https://juejin.cn/post/6844903472836395022"” style=“margin: auto” />

• 插件

作用域和闭包

先看题目进行思考:

1.this 的不同应用场景，如何取值？
2.手写 bind 函数？
3.实际开发中闭包的应用场景？

知识点

• 自由变量 （一个变量在当前作用域没有定义，但被使用了，则向上级作用域，一层一层依次查找（在函数定义的地方查找，不是在执行的地方），直到找到为止。如果到全局作用域都没找到，则报错 xxx is not defined）
• 闭包 作用域应用的特殊情况，有两种表现： 函数作为参数被传递；函数作为返回值被返回

• this （this 取什么值是在函数执行的时候确认的，不是在定义的时候）* 作为普通函数* 使用 call bind apply* 作为对象方法被调用* 在 class 方法中调用* 箭头函数（上级作用域的 this）

• 模拟 bind

• 闭包实际应用

同步和异步

先看题：

1.同步和异步的区别是什么？
2.手写用 promise 加载一张图片？
3.前端使用异步的场景有哪些？

知识点：

• 单线程和异步* js是单线程语言，只能同时做一件事* 浏览器和 nodejs 已支持 JS 启动进程，如 Web Worker* JS 和 DOM 渲染共用同一个线程，因为 JS 可修改 DOM 结构* 遇到等待（网络请求，定时任务）不能卡住，需要异步，回调 callback 函数形式
• 异步和同步* 基于 js 是单线程语言* 异步不会阻塞代码执行* 同步会阻塞代码执行
• 应用场景* 网络请求，如 ajax 图片加载* 定时任务，setTimeout

• promis

先看一段 callback hell 的代码

不太符合我们写代码的逻辑 函数执行不是包含嵌套的关系，而是前后依赖的关系，用 promise 解决 callback hell， 写一下图片加载实现：

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享