理解 JavaScript 执行栈

更新日期: 2018-12-15阅读量: 1867标签: js知识

引例

首先来看一个引例:

function foo() {
  console.log('1');
  bar();
  console.log('3');
}

function bar() {
  console.log('2');
}

foo();

这段代码将从上往下依次执行,并输出 '1', '2', '3'。我们可以看到,bar 函数的执行顺序似乎和它定义的顺序没有关系。为什么呢?这你就得弄懂执行栈了。


执行栈

所有的 js 代码在运行时都是在执行上下文中进行的。执行上下文是一个抽象的概念,js 中有三种执行上下文:

  • 全局执行上下文,默认的,在浏览器中是 window 对象,并且 this 在非严格模式下指向它。
  • 函数执行上下文,JS 的函数每当被调用时会创建一个上下文。
  • Eval 执行上下文,eval 函数会产生自己的上下文,这里不讨论。

通常,我们的代码中都不止一个上下文,那这些上下文的执行顺序应该是怎样的?从上往下依次执行?

栈,是一种数据结构,具有先进后出的原则。JS 中的执行栈就具有这样的结构,当引擎第一次遇到 JS 代码时,会产生一个全局执行上下文并压入执行栈,每遇到一个函数调用,就会往栈中压入一个新的上下文。引擎执行栈顶的函数,执行完毕,弹出当前执行上下文。

图片描述

以引例来说明。当 foo() 函数被调用,将 foo 函数的执行上下文压入执行栈,接着执行输出 ‘1’;当 bar() 函数被调用,将 bar 函数的执行上下文压入执行栈,接着执行输出 ‘2’;bar() 执行完毕,被弹出执行栈,foo() 函数接着执行,输出 ‘3’;foo() 函数执行完毕,被弹出执行栈。

那现在来看这个例子:

var count = 0;
function foo(count) {
  count += 1;
  console.log(count);
}
foo(count); // 1
foo(count); // 1

我们用执行栈来理解一下,函数每次被调用都会产生新的执行上下文,并被压入执行栈,执行完毕后当前上下文就会被弹出执行栈。所以第一次调用应该返回 1,第二次调用也应该返回 1,第 n 次调用都应该返回 1。

你理解了吗?那再来看一个例子:

var count = 0;
function foo() {
  count += 1;
  console.log(count);
}
foo(count); // 1
foo(count); // 2

WTF?这个例子和上一个的区别是这里 foo 函数没有指定形参。而这个例子其实就是通常说的函数内部没有使用 var 声明的变量,都会被当做全局变量(非严格模式)。

但是这里我们也可以用执行栈来解释。

函数的形参属于函数执行上下文,所以当指定这个形参后,它就随着函数被调用而新建,随着函数销毁而销毁。如果不指定这个形参,上一篇文章已经介绍过作用域链的概念,就会沿着作用域链找到全局变量 count,它属于全局执行上下文,这个时候再去调用 foo() 函数就会读写这个全局变量。

每个 foo() 函数调用后,给 count 加一,然后被弹出执行栈,而全局执行上下文的生命周期将伴随着整个程序,所以第一次调用打印 1,第二次调用打印 2,第 n 次调用打印 n。

是不是很奇妙呢?随着学习的深入,你会发现 JavaScript 的奇妙远不止于此。


小结

执行栈属于 JavaScript 中基础的概念,它与作用域、作用域链、执行上下文、变量对象/活动对象的联系都非常紧密。

文章首发于微信公众号,理解 JavaScript 执行栈


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1597

js中“=”,“==”,“===”的使用和深入理解

Js支持“=”、“==”和“===”的运算符,我们需要理解这些 运算符的区别 ,并在开发中小心使用。它们分别含义是:= 为对象赋值 ,== 表示两个对象toString值相等,=== 表示两个对象类型相同且值相等

WebSocket的原理及WebSocket API的使用,js中如何运用websocket

WebSocket是HTML5下一种新的协议,为解决客户端与服务端实时通信而产生的技术。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接

原生js清除字符串所有空行的方法

在前端开发中,textarea的内容可能会存在空行的时候,但是我们在保存时并不希望有多余的空行,这就需要我们使用Js来清除字符串中的空行,只需要一个简单的正则表达式即可

js浮点数精度丢失问题_如何解决js中浮点数计算不精准?

理解javascript中浮点数计算不精准的原因,如何解决浮点数的四则运算(加减乘除)。js中除了toFixed方法以外的实现方法总汇

Js输出方式有哪些?

在编写JavaScript代码的时候, 一定要记住每一句代码后面都需要添加一个分号, 并且这个分号必须是英文的分号,我们会发现有时候不写分号程序也能够运行, 这里并不是因为不需要分号, 而是浏览器自动帮助我们添加了分号

js判断是否为IE浏览器的多种方法总汇

这篇文章主要整理通过js来判断浏览器是否为IE的多种方法。使用js脚本判断浏览器是否为ie,这里分享六种判断是否为ie的方法,有需要的朋友参考学习下。

js基础_如何理解作用域和作用域链?

作用域外,无法引用作用域内的变量;离开作用域后,作用域的变量的内存空间会被清除,比如执行完函数或者关闭浏览器,作用域与执行上下文是完全不同的两个概念。我曾经也混淆过他们,但是一定要仔细区分。JavaScript代码的整个执行过程,分为两个阶段,代码编译阶段与代码执行阶段。

19 个 JavaScript 常用有用的简写技术

Js中有用的简写技术:1.三元操作符、2.短路求值简写方式、3.声明变量简写方法、4.if存在条件简写方法、5.JavaScript循环简写方法、6.短路评价...

window.location.href的用法(动态输出跳转)

javascript中的location.href有很多种用法,window.location.href 语句可以实现一个框架的页面在执行服务器端代码后刷新另一个框架的页面

为什么javascript不起作用?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!