夯实基础上篇-图解 JavaScript 执行机制.doc

夯实基础上篇-图解 JavaScript 执行机制 本文主要讲述了 JavaScript 执行机制的基础知识，包括变量提升、执行上下文、调用栈等概念。本文通过 9 个 demo 和 18 张图，详细地解释了 JavaScript 执行机制的过程。 变量提升（Hoisting） 变量提升是 JavaScript 中的一个重要概念，它是指在执行代码之前，变量和函数声明会被提升到执行上下文的顶部。变量提升分为两种：变量声明提升和函数声明提升。变量声明提升是指使用 var 关键字声明的变量会被提升，而函数声明提升是指函数声明会被提升。 变量声明提升 在 JavaScript 中，使用 var 关键字声明的变量会被提升到执行上下文的顶部。这意味着，即使变量声明在代码的后面，但是在执行代码之前，变量已经被声明了。例如： ``` console.log('第 1 次打印：', singer) // undefined var singer = 'Jaychou' console.log('第 2 次打印：', singer) // Jaychou ``` 在上面的代码中，变量 singer 会被提升到执行上下文的顶部，虽然变量声明在代码的后面，但是在执行代码之前，变量已经被声明了。 函数声明提升 函数声明提升是指函数声明会被提升到执行上下文的顶部。这意味着，即使函数声明在代码的后面，但是在执行代码之前，函数已经被声明了。例如： ``` showSinger() // showSinger 函数正常执行 function showSinger() { console.log('showSinger 函数') } ``` 在上面的代码中，函数 showSinger 会被提升到执行上下文的顶部，虽然函数声明在代码的后面，但是在执行代码之前，函数已经被声明了。 执行上下文 执行上下文是 JavaScript 执行机制的核心概念。执行上下文是指 JavaScript 引擎执行代码时的环境，它包括了变量、函数和作用域链等信息。 调用栈 调用栈是 JavaScript 执行机制的另一个重要概念。调用栈是指 JavaScript 引擎执行代码时的调用栈，它记录了当前执行的函数和函数的调用关系。例如： ``` function foo() { console.log('foo 函数') bar() } function bar() { console.log('bar 函数') } foo() ``` 在上面的代码中，foo 函数会被调用，然后 bar 函数会被调用，调用栈的顺序是 foo -> bar。 总结 本文详细地解释了 JavaScript 执行机制的基础知识，包括变量提升、执行上下文和调用栈等概念。通过了解这些概念，可以更好地理解 JavaScript 的执行机制，写出更好的代码。