前端三座大山

作用域和闭包

作用域

作用域：代码当前上下文，控制着变量和函数的可见性和生命周期。最大的作用是隔离变量，不同作用域下同名变量不会冲突。

作用域链：如果在当前作用域中没有查到值，就会向上级作用域查询，直到全局作用域，这样一个查找过程所形成的链条就被称之为作用域链。

作用域可以堆叠成层次结构，子作用域可以访问父作用域，反之则不行。

作用域作用范围从大到小分为四种：全局作用域、模块作用域、函数作用域、块级作用域

全局作用域：代码在程序的任何地方都能被访问，例如浏览器环境的 window 对象，nodejs环境的 global 对象。但全局变量会污染全局命名空间，容易引起命名冲突。

模块作用域：早期 js 语法中没有模块的定义，单纯的简单使用不同的js文件区分，但是始终作用在 window。后来随着js社区解决办法和ECMA对模块的定义，就出现了模块化方案（AMD、CommonJS、UMD、ES6模块等）。通常一个模块就是一个文件或者一段代码，而这个模块拥有自己独立的作用域。

函数作用域：由函数运行时创建的作用域。闭包就是在该作用域下产生。

块级作用域：由于 js 变量提升存在变量覆盖、变量污染等设计缺陷，所以 ES6 引入了块级作用域关键字来解决这些问题。典型的案例就是 let 的 for 循环和 var 的 for 循环。

闭包

简单的理解就是：函数a里包含了函数b，而函数b使用了函数a作用域下的变量，那么函数b被称为闭包或者闭包就是能够读取函数a内部变量的函数。典型的例子就是防抖函数。

闭包是函数作用域下的产物，闭包会随着外层函数的执行而被同时创建，它是一个函数以及其捆绑的周边环境状态的引用的组合。换而言之，闭包是内层函数对外层函数变量的不释放。

闭包的特征：

• 函数中存在函数；
• 内部函数可以访问外层函数的作用域；
• 参数和变量不会被内存垃圾回收机制回收，始终驻留在内存中；
• 有内存地方才有闭包。

闭包会消耗内存、不正当使用会造成内存溢出的问题，在退出函数之前，需要将不使用的局部变量全部删除。如果不是某些特定需求，在函数中创建函数是不明智的，闭包在处理速度和内存消耗方面对脚本性能具有负面影响。

闭包图示

原型和原型链

在js中，有对象的地方就有原型，每个对象都会在其内部初始化一个属性，就是__proto__，原型中存储共享的属性和方法。当我们访问一个对象的属性时，js引擎会先看当前对象中是否有这个属性，如果没有的就会查找他的__proto__对象是否有这个属性，如此递推下去，一直检索到Object内建对象。这么一个寻找的过程就形成了原型链的概念。

理解原型最关键的是理清楚__proto__、prototype、constructor三者的关系:

• __proto__属性在所有对象中都存在，指向其构造函数的prototype对象；prototype对象只存在（构造）函数中，用于存储共享属性和方法；constructor属性只存在于（构造）函数的prototype中，指向（构造）函数本身。
• 一个对象或者构造函数中的隐式原型__proto__的属性值指向其构造函数的显式原型 prototype 属性值，关系表示为：instance.proto === instance.constructor.prototype
• 除了 Object，所有对象或构造函数的 prototype 均继承自 Object.prototype，原型链的顶层指向 null：Object.prototype.proto === null
• Object.prototype 中也有 constructor：Object.prototype.constructor === Object
• 构造函数创建的对象（Object、Function、Array、普通对象等）都是 Function 的实例，它们的 proto 均指向 Function.prototype。

原型链图示

单线程和异步

JavaScript是单线程语言，意味着只有单独的一个调用栈，同一时间只能处理一个任务或一段代码。队列、堆栈、事件循环构成了 js 的并发模型，事件循环 是 JavaScript 的执行机制。 为什么js是一门单线程语言呢？最初设计JS是用来在浏览器验证表单以及操控DOM元素，为了避免同一时间对同一个DOM元素进行操作从而导致不可预知的问题，JavaScript从一诞生就是单线程。 既然是单线程也就意味着不存在异步，只能自上而下执行，如果代码阻塞只能一直等下去，这样导致很差的用户体验，所以事件循环的出现让 js 拥有异步的能力。

事件循环机制