理解 JavaScript 执行栈

时间: 2018-12-15阅读: 1434标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

为什么JavaScript开发如此疯狂

Web开发中其他一切对你而言都是小菜一碟,但当你深入探究JavaScript的时候,不免有一种“众人皆醒你独醉”的悲壮——好像其他人都知道你不知道的一些大的基础的知识内容,并且这些内容可以帮助你理解所有知识

javascript难点是什么?

javascript难点是什么?下面本篇文章就来给大家介绍一下10个JavaScript难点,感兴趣的小伙伴们可以参考一下,希望对大家有所帮助。立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字

js变量引用(指针)

基本类型:Number,Boolen,null,String,Underfined 存放在栈内存中,数据长度是固定的。引用类型:Object存在堆内存中,数据长度是变化的(同时有栈内存中有一个指针指向这个Object的)。

深入理解javascript中的事件循环event-loop

人们把javascript调控同步和异步任务的机制称为事件循环,首先来看事件循环机制的可视化描述,主线程运行的时候,产生堆和栈,栈中的代码调用各种外部API,异步操作执行完成后,就在消息队列中排队。

document.write和innerHTML的区别

document.write只能重绘整个页面,innerHTML可以重绘页面的一部分。 document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。

浅谈js自记忆函数

最近阅读《JavaScript忍者秘籍》看到了一种有趣的函数:自记忆函数。记忆化(memoization)是一种构建函数的处理过程,能够记住上次计算结果,当函数计算得到结果时,就将该结果按照参数存储起来。

10个JavaScript难点:能够读懂这篇博客的JavaScript开发者,运气不会太差…

10个JavaScript难点包括:立即执行函数,闭包,使用闭包定义私有变量,prototype,模块化,变量提升,柯里化,apply, call与bind方法,Memoization,函数重载

深入理解Javascript中apply、call、bind方法的总结。

apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;第一个参数都是this要指向的对象,也就是想指定的上下文;都可以利用后续参数传参;bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。

JavaScript中的循环和作用域

JavaScript有一个特点,也许会让开发者头痛, 是与循环和作用域相关的.const。最简单的方案是用 let 声明、另外一个非常普遍的解决这个问题是使用pre-ES6代码, 同时它被称作即时调用函数表达式(IIFE)

JavaScript的声明提升

在JavaScript中,当出现var声明的变量或者function声明的函数时,会将该声明提到当前作用域的前面执行,这便是声明提升。值得注意的是,只是提升了声明操作,赋值还是在原来的位置进行。声明提升包括变量声明提升和函数声明提升。

点击更多...

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