JavaScript 权威面试指南
根据 Stack Overflow 的调查，JavaScript 自2014年以来就成为了最受欢迎的编程语言。也难怪超过三分之一的开发人员工作都需要了解一些 JavaScript 的知识。所以，如果你打算在不久的将来从事开发工作，你多少都应该熟悉一下这种非常流行的语言。
这篇文章的目的是汇集所有在技术面试中经常提到的 JavaScript 相关概念。有了这篇指南，你就可以在一个地方温故一下你需要了解的关于 JavaScript 的所有知识点。
类型及其转换
JavaScript 内置了7种类型：null, undefined , boolean, number, string, object以及 symbol (ES6).
除了 object 以外，这几种类型都可以归类为原始类型。
typeof 0 // number typeof true // boolean typeof ‘Hello‘ // string typeof Math // object typeof null // object !! typeof Symbol(‘Hi‘) // symbol (New ES6)
Undefined 表示尚未定义。它被用作表示未初始化变量，未提供的函数参数，对象缺少的属性的默认值。当函数没有返回值时也会默认返回 undefined .
Null 则表示空值。它可以被赋值给一个变量来表示的“没有值”。
让我们来看下面这个栗子：
var name = ‘Joey‘; if (name) { console.log(name + " doesn‘t share food!") // Joey doesn’t share food! }
在这种情况下，字符串变量 name 会被转换为 true ，所以我们能够在命令行里输出这段话。那我们到底要如何确定这些真假值的转换呢？
Falsy 类型的值是指在强制类型转换时会被转换为布尔 false 的值。
Falsy 类型值包括："", 0, null, undefined, NaN, false.
除了 Falsy 类型值以外的都被称为 truthy 类型值，它们会被转换为 true.
Boolean(null) // false Boolean(‘hello‘) // true Boolean(‘0‘) // true Boolean(‘ ‘) // true Boolean([]) // true Boolean(function(){}) // true
空的数组，对象和函数布尔值也会被转换为 true ！
你需要注意的第一件事是 + 操作符。这是一个棘手的操作符，因为它同时适用于数值运算和字符串连接。
但是，*，/和-操作符都是数字运算专用的。当这些运算符与字符串一起使用时，会强制转换字符串为数字类型的值。
1 + "2" = "12" "" + 1 + 0 = "10" "" - 1 + 0 = -1 "-9\n" + 5 = "-9\n5" "-9\n" - 5 = -14 "2" * "3" = 6 4 + 5 + "px" = "9px" "$" + 4 + 5 = "$45" "4" - 2 = 2 "4px" - 2 = NaN null + 1 = 1 undefined + 1 = NaN
对此大多数人的理解肯定是 == 只比较值相等，而 === 在比较的同时还会检查类型。不过这种解释其实是错误的。
事实上，== 是比较强制类型转换之后的结果，而 === 则是直接比较。
2 == ‘2‘ // True 2 === ‘2‘ // False undefined == null // True undefined === null // False
强制类型转换有时候会造成一些混乱，我们来看下面这个栗子：
let a = ‘0‘; console.log(Boolean(a)); // True let b = false; console.log(Boolean(b)); // False
好，根据以上结果，请告诉我下面这此比较的输出：
console.log(a == b); //(1)
上述代码事实上返回了 True，那么这是为什么呢？
在 JavaScript 的机制中，当你拿一个其它类型的值和 boolean 类型进行比较时，JavaScript 会将这个布尔值转换为 number 类型再进行比较。（2）
此时这个问题就变成了 number 和 string 类型值之间的比较。根据我们之前所说的，JavaScript 会把 string 类型转换为 number 类型再比较两个数字。（3）
所以最后的表达式被转换为了 0 == 0，结果理所当然是 True.
‘0‘ == false //(1) ‘0‘ == 0 //(2) 0 == 0 //(3)
如果你想全面理解这种比较是如何进行的，可以查阅ES5文档。
这里也有一个 JavaScript 当中各种类型值对比结果的参照表。
下面是一些特殊比较的示例：
false == "" // true false == [] // true false == {} // false "" == 0 // true "" == [] // true "" == {} // false 0 == [] // true 0 == {} // false 0 == null // false
赋值与引用
简单值（或者称为原始值 primitives）均是 null, undefined , boolean, number, string, 以及 symbol (ES6)类型的赋值。
复合值则是对 object，包含 array 以及 function 在内的引用。
var a = 2; // ‘a‘ hold a copy of the value 2. var b = a; // ‘b‘ is always a copy of the value in ‘a‘ b++; console.log(a); // 2 console.log(b); // 3 var c = [1,2,3]; var d = c; // ‘d‘ is a reference to the shared value d.push( 4 ); // Mutates the referenced value (object) console.log(c); // [1,2,3,4] console.log(d); // [1,2,3,4] /* Compound values are equal by reference */ var e = [1,2,3,4]; console.log(c === d); // true console.log(c === e); // false
当你想要复制一份复合值的时候，你需要通过一些方法对其进行拷贝（这里区分浅拷贝及深拷贝）。这样引用才不会指向同一个值：
const copy = c.slice() // ‘copy‘ references to a new value console.log(c); // [1,2,3,4] console.log(copy); // [1,2,3,4] console.log(c === copy); // false
作用域
作用域是指代码执行时的上下文，它定义了变量以及函数生效的范围。
全局作用域指的是最外层的作用域。所有在函数外部声明的变量都会在全局作用域当中，可以在任何地方访问到。在浏览器当中，window 对象就属于全局作用域。
局部作用域是指例如在某个函数内部的范围。在局部作用域中声明的变量只能够在其内部被访问到。
function outer() { let a = 1; function inner() { let b = 2; function innermost() { let c = 3; console.log(a, b, c); // 1 2 3 } innermost(); console.log(a, b); // 1 2 — ‘c‘ is not defined } inner(); console.log(a); // 1 — ‘b‘ and ‘c‘ are not defined } outer();
为了便于理解，你可以把作用域想象为一扇扇从大到小排列的门。最矮的人（上述代码1，2，3表示高矮）可以进入最小的门（innermost 的作用域），同时也能通过最大的门（outer 的作用域）。
而个子高的人在通过门时则会被卡住（也就是在外部访问不到内部定义的变量）。
变量提升 Hoisting
在编译过程中，JavaScript 会自动把 var 和 function 声明移动到顶部的行为被称为 hoisting.
函数声明会被完整地提升。这就意味着你在编写代码时可以在声明一个函数之前就调用它：
console.log(toSquare(3)); // 9 function toSquare(n){ return n*n; }
变量只会被部分提升。例如只有 var 的声明会被提升，而赋值则不会。
let 以及 const 也不会被提升。
{ /* Original code */
console.log(i); // undefined
var i = 10
console.log(i); // 10
}
{ /* Compilation phase */
var i;
console.log(i); // undefined
i = 10
console.log(i); // 10
}
// ES6 let & const
{
console.log(i); // ReferenceError: i is not defined
const i = 10
console.log(i); // 10
}
{
console.log(i); // ReferenceError: i is not defined
let i = 10
console.log(i); // 10
}
函数表达式 与 函数声明
函数表达式只有被执行之后才可用，它不会被提升（相当于赋值函数表达式给变量）。
var sum = function(a, b) { return a + b; }
函数声明则可以在定义前后被任意调用，因为它最终会被提升。
function sum(a, b) { return a + b; }
变量声明方式：var let cost
在 ES6 之前，只有 var 一种声明变量的方法。在某一函数内部声明的变量和方法只能在其函数作用域内部访问到。
一些在例如 if 或者 for 语句的块作用域内声明的变量，能够在其包含的大括号外被访问到。
**注意：**未使用 var，let 或 const 关键字声明的变量会自动变成全局变量。
function greeting() { console.log(s) // undefined if(true) { var s = ‘Hi‘; undeclaredVar = ‘I am automatically created in global scope‘; } console.log(s) // ‘Hi‘ } console.log(s); // Error — ReferenceError: s is not defined greeting(); console.log(undeclaredVar) // ‘I am automatically created in global scope‘
ES6 中我们有了 let 和 const 这两个新的关键字。它们不会被提升，且可以在块级作用域内生效：
let g1 = ‘global 1‘ let g2 = ‘global 2‘ { /* Creating a new block scope */ g1 = ‘new global 1‘ let g2 = ‘local global 2‘ console.log(g1) // ‘new global 1‘ console.log(g2) // ‘local global 2‘ console.log(g3) // ReferenceError: g3 is not defined let g3 = ‘I am not hoisted‘; } console.log(g1) // ‘new global 1‘ console.log(g2) // ‘global 2‘
另外有一个普遍的误解是 const 是不可变的。事实上它只是不能被重新赋值，但其指向的值是可以被操作的：
const tryMe = ‘initial assignment‘; tryMe = ‘this has been reassigned‘; // TypeError: Assignment to constant variable. // You cannot reassign but you can change it… const array = [‘Ted‘, ‘is‘, ‘awesome!‘]; array[0] = ‘Barney‘; array[3] = ‘Suit up!‘; console.log(array); // [“Barney”, “is”, “awesome!”, “Suit up!”] const airplane = {}; airplane.wings = 2; airplane.passengers = 200; console.log(airplane); // {passengers: 200, wings: 2}
闭包 Closure
闭包是一个函数及其词法环境的组合。闭包可以让我们在一个函数的作用范围外访问其内部的变量。
function sayHi(name){ var message = `Hi ${name}!`; function greeting() { console.log(message) } return greeting } var sayHiToJon = sayHi(‘Jon‘); console.log(sayHiToJon) // ?() { console.log(message) } console.log(sayHiToJon()) // ‘Hi Jon!‘
1.获取变量到外部作用域。
返回的 greeting 方法访问了其内部作用域的 message 变量。
2.即使在外部函数返回之后也能访问到作用域外的变量。
sayHiToJon 是在调用 sayHi 方法时对 greeting 的引用。这样我们就能够通过 greeting 访问到作用域外的 message 变量。
闭包比较有用的地方在于我们可以用它来实现数据封装。有一些理念认为，有些数据不应该直接暴露在外，我们举个栗子来说明：
例如在下面这段代码当中，我们只能过通过 elementary 的实例来访问和操作 SpringfieldSchool 内部的 staff 变量，而不用担心其在其他地方被改动。
function SpringfieldSchool() { let staff = [‘Seymour Skinner‘, ‘Edna Krabappel‘]; return { getStaff: function() { console.log(staff) }, addStaff: function(name) { staff.push(name) } } } let elementary = SpringfieldSchool() console.log(elementary) // { getStaff: ?, addStaff: ? } console.log(staff) // ReferenceError: staff is not defined /* Closure allows access to the staff variable */ elementary.getStaff() // ["Seymour Skinner", "Edna Krabappel"] elementary.addStaff(‘Otto Mann‘) elementary.getStaff() // ["Seymour Skinner", "Edna Krabappel", "Otto Mann"]
我们接着再来用闭包解决一个面试中最常见的问题吧：
下面这段代码存在什么问题？如何输出我们想要的结果？
const arr = [10, 12, 15, 21]; for (var i = 0; i < arr.length; i++) { setTimeout(function() { console.log(`The value ${arr[i]} is at index: ${i}`); }, (i+1) * 1000); }
这段代码执行的输出结果中，每次 i 都等于4.这是因为 setTimeout 方法执行的时候，循环早已运行结束。
我们可以通过立即执行函数 IIFE 来解决这个问题，它可以创建出独立的作用域来存储每次传入 i 的值。
const arr = [10, 12, 15, 21]; for (var i = 0; i < arr.length; i++) { (function(j) { setTimeout(function() { console.log(`The value ${arr[j]} is at index: ${j}`); }, j * 1000); })(i) }
另外一个更简洁的答案是使用 let 关键字来声明变量 i，也能够得到相同的结果：
const arr = [10, 12, 15, 21]; for (let i = 0; i < arr.length; i++) { setTimeout(function() { console.log(`The value ${arr[i]} is at index: ${i}`); }, (i) * 1000); }
立即执行函数表达式 IIFE
正如其名，立即执行函数在定义时就会被执行。我们通常在创建一个新的变量作用域时使用到它。
表达式外的括号用来和函数声明作以区分。
结尾的括号表示对函数的调用。
var result = []; for (var i=0; i < 5; i++) { result.push( function() { return i } ); } console.log( result[1]() ); // 5 console.log( result[3]() ); // 5 result = []; for (var i=0; i < 5; i++) { (function () { var j = i; // copy current value of i result.push( function() { return j } ); })(); } console.log( result[1]() ); // 1 console.log( result[3]() ); // 3
通过使用IIFE你可以：
- 使你能过添加私有数据到一个方法中
- 创建新的作用环境
- 防止污染全局命名空间
上下文
上下文的概念经常会同作用域之间混淆。为了保持条理清晰，我们需要注意以下两条：
- 上下文是在函数被调用时确定的。它通常指的是你的代码当中某一部分的值。
- 作用域值的则是变量能过被访问到的范围。
// 作用域 var param = 1; // global scope function myScope(){ var param = 2; // local scope } // 上下文 this.prop = 1; // global context function myContext(){ this.prop = 2; // local context } var myInstance = new myContext();
例如上述实例当中调用 this 的位置不同，this 的指向也是不同的，也就表示着不同的上下文；而作用域则是我们在编写代码时使用 var 关键字来确定的。
函数调用方式：call apply bind
这三种方法可以改变函数调用时 this 的指向，区别则在于函数调用的时候。
.call()会立即调用函数，并要求你按次序一个个传入参数。.apply()也会立即调用函数，不过你需要以数组的形式传参。.call()和.apply()效用几乎是相同的，它们都可以用来调用对象中的某个方法，具体怎么使用取决于你的使用场景里如何传参更方便。
应用示例：
const Snow = {surename: ‘Snow‘}
const char = {
surename: ‘Stark‘,
knows: function(arg, name) {
console.log(`You know ${arg}, ${name} ${this.surename}`);
}
}
char.knows(‘something‘, ‘Bran‘); // You know something, Bran Stark
char.knows.call(Snow, ‘nothing‘, ‘Jon‘); // You know nothing, Jon Snow
char.knows.apply(Snow, [‘nothing‘, ‘Jon‘]); // You know nothing, Jon Snow
注意： 如果你在使用 .call() 时传入了数组形式的参数，它会把整个数组当作一个参数使用。
不过在 ES6 里你倒是可以试试展开操作符的方法进行传参：
char.knows.call(Snow, ...["nothing", "Jon"]); // You know nothing, Jon Snow
.bind() 不会直接触发某个方法，而是根据你传入的参数和上下文返回一个新的方法。当你想要在程序之后的某些上下文环境中调用一个方法时可以使用 .bind() 这种方式。
这在我们使用一些异步操作或者事件处理函数时非常有用。.bind() 的传参形式则类似于 .call() 你需要讲参数以逗号分隔传入：
const Snow = {surename: ‘Snow‘}
const char = {
surename: ‘Stark‘,
knows: function(arg, name) {
console.log(`You know ${arg}, ${name} ${this.surename}`);}
}
const whoKnowsNothing = char.knows.bind(Snow, ‘nothing‘);
whoKnowsNothing(‘Jon‘); // You know nothing, Jon Snow
his 关键字
JavaScript 当中的 this 理解起来算比较复杂的。
this 具体指向什么是由函数的执行上下文决定的（其实上一节已经有很多栗子了）。
关键字 this 类似于一个占位符。它会指向具体调用某个方法的对象。
下面这个检查表用来确定 this 的顺位规则：
new binding 当使用 new 关键字调用某个函数时，this 会被绑定到新构造的对象上
function Person(name, age) { this.name = name; this.age =age; console.log(this); } const Rachel = new Person(‘Rachel‘, 30); // { age: 30, name: ‘Rachel‘ }
显式绑定 当使用 call 或者 apply 方法调用函数时，this 会指向我们传入的对象。bind 我们在前面已经介绍过了，返回的是一个新的函数而不是直接调用。
function fn() { console.log(this); } var agent = {id: ‘007‘}; fn.call(agent); // { id: ‘007‘ } fn.apply(agent); // { id: ‘007‘ } var boundFn = fn.bind(agent); boundFn(); // { id: ‘007‘ }
隐式绑定 当我们在某一具体上下文中调用一个函数时，this 会指向这个函数所属的对象。
var building = { floors: 5, printThis: function() { console.log(this); } } building.printThis(); // { floors: 5, printThis: function() {…} }
默认绑定 如果函数在调用时不遵从上述所有规则，那么 this 会被绑定在全局对象上（在浏览器里，这个全局对象就是 window）。
这种情况会在我们定义独立函数时出现，如果一个函数在定义时不属于任何对象，它就会默认成为全局对象的一个属性。
function printWindow() { console.log(this) } printWindow(); // window object
注意： 即使是在不同的作用域下，调用这种独立函数也不会改变其 this 的指向：
function Dinosaur(name) { this.name = name; var self = this; inner(); function inner() { alert(this); // window object — the function has overwritten the ‘this‘ context console.log(self); // {name: ‘Dino‘} — referencing the stored value from the outer context } } var myDinosaur = new Dinosaur(‘Dino‘);
function Cat(name) { this.name = name; console.log(this); // { name: ‘Garfield‘ } ( () => console.log(this) )(); // { name: ‘Garfield‘ } } var myCat = new Cat(‘Garfield‘);
严格模式
我们可以通过使用 "use strict" 指令来启用 JavaScript 的严格模式。它会为你的代码添加更多的限制及错误处理。
使用严格模式的好处有：
- 更方便调试 你能够看到更多的报错，例如在你试图为只读的全局对象或属性赋值时。
- 防止意外产生全局变量 对未声明的变量进行赋值时会报错。
- 禁止无效的删除操作 尝试删除变量、函数、不可删除的属性时会报错。
- 禁止重复的属性名及参数 如果有命名重复的属性名或者参数值就会报错。
- 让 eval() 的调用更加安全 在
eval()方法内部定义的变量及函数不会污染其他作用域。 - 禁止 this 指向全局对象 当
this的值为 null 或者 undefined 时不会再默认指向到全局对象。这也就意味着在函数内部的this不会再默认指向window对象了。
new 关键字
关键字 new 是一种非常特殊的调用函数的方法，被通过 new 关键字调用的函数被称为构造函数。
所以 new 到底进行了哪些操作呢？
- 创建了一个新的对象。
- 新对象的原型继承自构造函数的原型。
- 以新对象的
this执行构造函数。 - 返回新的对象。如果构造函数返回了一个对象，那么这个对象会取代整个
new出来的结果。
语法绑定 当你以 => 箭头函数的形式调用某一方法时，相当于为其传入了当前执行上下文的 this 值。
// In order to better understand what happens under the hood, lets build the new keyword function myNew(constructor) { var obj = {} Object.setPrototypeOf(obj, constructor.prototype); return constructor.apply(obj, [...arguments].slice(1)) || obj }
那么在调用函数时使用 new 关键字与否到底有什么区别呢？
function Bird() { this.wings = 2; } /* invoking as a normal function */ let fakeBird = Bird(); console.log(fakeBird); // undefined /* invoking as a constructor function */ let realBird= new Bird(); console.log(realBird) // { wings: 2 }
原型与继承
原型是 JavaScript 当中最容易造成困惑的一个概念。原因之一是因为原型这个词会在两个语境下使用：
每个对象都有自己的原型对象，并会继承它原型的所有属性。
你可以通过 .__proto__ 这种非标准的机制来获取一个对象的原型（在ES6中，在 ES5 标准里还可以通过 Object.getPrototypeOf() 方法来获取）。
一般的对象还会继承一个叫做 .constructor 的属性指向其构造函数。当你使用构造函数生成一个对象时，其 .__proto__ 属性会指向构造函数的 .prototype 属性。
每个被定义的函数都有一个名为 .prototype 的属性。
它是一个继承了原型链上所有属性的对象。这个对象也默认包括一个 .constructor 属性，指向原始的构造函数。
所有用构造函数生成的对象也会继承一个指向这个函数的 .constructor 属性（用控制台把对象打出来会比较好理解，也可以看下面的示例）。
function Dog(breed, name){ this.breed = breed, this.name = name } Dog.prototype.describe = function() { console.log(`${this.name} is a ${this.breed}`) } const rusty = new Dog(‘Beagle‘, ‘Rusty‘); /* .prototype property points to an object which has constructor and attached properties to be inherited by objects created by this constructor. */ console.log(Dog.prototype) // { describe: ? , constructor: ? } /* Object created from Dog constructor function */ console.log(rusty) // { breed: "Beagle", name: "Rusty" } /* Object inherited properties from constructor function‘s prototype */ console.log(rusty.describe()) // "Rusty is a Beagle" /* .__proto__ property points to the .prototype property of the constructor function */ console.log(rusty.__proto__) // { describe: ? , constructor: ? } /* .constructor property points to the constructor of the object */ console.log(rusty.constructor) // ? Dog(breed, name) { ... }
原型链
原型链描述了对象之间相互引用的关系。
当获取一个对象的属性时，JavaScript 引擎会先从这个对象本身开始查找。如果没有找到，就会转向其原型上的属性，直到第一次找到这个属性为止。原型链上的最后一个对象是内置的 Object.prototype 而它的原型则是 null（也就是所谓原型链的终点）。JavaScript 引擎在查找属性到这一层还是没有找到时就会返回 undefined.
自有属性与继承属性
对象的属性分为自有和继承两种。
自有属性也就是在对象内部定义的属性。
继承属性则是通过原型链获得的属性。继承属性是不可枚举的（也就是在 for/in 循环里看不到的）。
function Car() { } Car.prototype.wheels = 4; Car.prototype.airbags = 1; var myCar = new Car(); myCar.color = ‘black‘; /* Check for Property including Prototype Chain: */ console.log(‘airbags‘ in myCar) // true console.log(myCar.wheels) // 4 console.log(myCar.year) // undefined /* Check for Own Property: */ console.log(myCar.hasOwnProperty(‘airbags‘)) // false — Inherited console.log(myCar.hasOwnProperty(‘color‘)) // true
Object.create(obj) 方法可以指定原型来创建对象：
var dog = { legs: 4 }; var myDog = Object.create(dog); console.log(myDog.hasOwnProperty(‘legs‘)) // false console.log(myDog.legs) // 4 console.log(myDog.__proto__ === dog) // true
通过引用继承
继承属性是原型对象上属性的一份引用拷贝。
如果对象在原型上的属性被改变了，继承这一属性的对象也会受到相同的影响。但假如属性被整个替换掉了，则不会影响到继承的对象：
var objProt = { text: ‘original‘ }; var objAttachedToProt = Object.create(objProt); console.log(objAttachedToProt.text) // original objProt.text = ‘prototype property changed‘; console.log(objAttachedToProt.text) // prototype property changed objProt = { text: ‘replacing property‘ }; console.log(objAttachedToProt.text) // prototype property changed
类继承与原型继承
在类继承模式当中，对象继承自各式各样的类。就好像为对象设置好了一些模版和描述，并创建出了子类关系。我们可以通过 new 关键字从构造函数中创建这样的对象。
但类继承模式有以下这些缺点：
- 死板的层级关系
- 高度耦合
- 基类薄弱
- 代码重复
- 以及传说中的大猩猩/香蕉问题——“What you wanted was a banana, what you got was a gorilla holding the banana, and the entire jungle.”
在原型继承模式中，一个对象可以直接继承另一个对象。我们可以通过 Object.create() 或者其他对象方法及工厂函数来创建对象。
下面是三种不同的原型继承的形式：
- 原型代理 我们通常称那些用来给其他对象提供模型的对象为代理原型。当你继承一个代理原型时，新的对象可以获取对代理原型属性的引用。这种操作通常使用
Object.create()来完成。 - 拼接继承 通过拷贝一个对象的属性来进行继承，不会产生引用关系，这种操作通常使用
Object.assign()来进行。 - 函数继承 这种方法是通过工厂函数（工厂函数是指不通过
new关键字创建并返回对象的函数）来创建对象，然后直接将新的属性添加到对象上。这种形式的好处是我们可以使用闭包进行数据封装。const person = function(name) { const message = `Hello! My name is ${name}`; return { greeting: () => console.log(message) } } const will = person("Will"); will.greeting(); // Hello! My name is Will
组合与继承
开发者都公认在大多数情况下应该避免使用类继承。因为在这种模式下，你需要很清楚地定义设计你的代码它们是什么。
而另一方面，组合的模式则允许你从你的代码要做什么的角度来定义，从而提高你代码的灵活度和可复用性（React组件就是一个非常好的栗子）。
JavaScript 异步
JavaScript 是一种单线程编程语言。这意味着 JavaScript 引擎一次只能处理一段代码。其主要影响之一是，当 JavaScript 遇到一段需要很长时间处理的代码时，它会阻塞后续的代码运行。
JavaScript 使用了一种存储运行函数信息的数据结构叫做调用栈。你可以吧调用栈想象为一摞书。每本放上去的书都会在之前的一摞书上面。最后放上去的书会最早被拿走，最先放上去的书则到最后才会被拿走（LIFO）。
用来解决大段代码非阻塞执行的方法叫做异步回调函数。这类函数可以推迟执行。
异步过程从一个放入堆或内存中的异步回调函数开始。你可以将堆视为一个事件管理器。调用栈可以访问事件管理器只在某个事件发生时才执行特定的函数。当某个事件发生后，事件管理器就会将该函数移至回调用队列。**注意：**当事件管理器处理一个函数时，之后的代码不会被阻塞并且能继续执行。
调用栈会不断检查其是否空闲。当它空闲时，如果有一个等待被调用的函数，则会检查调用队列。当有函数在等待执行时，队列中的第一个函数被压入调用栈并执行。这一过程被称为事件循环当中的一次执行循环.
我们还是用一个栗子来解释吧：
const first = function () { console.log(‘First message‘) } const second = function () { console.log(‘Second message‘) } const third = function() { console.log(‘Third message‘) } first(); setTimeout(second, 0); third(); // Output: // First message // Third message // Second message
- 初始化浏览器的控制台，清空调用栈及事件管理器。
first()加入调用栈。console.log("First message")加入调用栈。console.log("First message")被执行并在浏览器控制台打印出"First message".console.log("First message")被移出调用栈。first()被移出调用栈。setTimeout(second, 0)加入调用栈。setTimeout(second, 0)被执行并由事件管理器管理。0ms 之后事件管理器将second()移入调用队列。setTimeout(second, 0)完成执行并被移出调用栈。third()加入调用栈。console.log("Third message")加入调用栈。console.log("Third message")被执行并在浏览器控制台打印出"Third message".console.log("Third message")被移出调用栈。third()被移出调用栈。- 调用栈空闲，
second()在调用队列中等待执行。 - 事件管理器将
second()从调用队列中移入调用栈。 console.log("Second message")加入调用栈。console.log("Second message")被执行并在浏览器控制台打印出"Second message".console.log("Second message")被移出调用栈。second()被移出调用栈。
注意：你为
setTimeout方法传入的时间参数并不是second()延迟执行的时间，而是事件管理器将函数移入调用栈的等待时间。
