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

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

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

先看题：

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

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

数据类型

变量类型和计算

• 常见值类型

• 常见引用类型

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

• 深拷贝实现
  • 深拷贝
  拷贝后的结果更改是不会影响拷贝前的，拷贝前后是没有关系的
  • 浅拷贝
  改变拷贝前的内容，会对拷贝之后的有影响，拷贝前和拷贝后是有关系的

• == 运算符

• 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

• 插件

作用域和闭包

先看题目进行思考:

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， 写一下图片加载实现：

想进一步了解 promise 欢迎移步 Promise详解