什么是执行上下文?
个人理解:当前JavaScript代码解析和执行时候的环境就是执行上下文
执行上下文共有三种类型:
全局执行上下文:只有一个,JavaScript代码载入的时候就会进入这个环境,然后创建浏览器中的全局对象(window),全局上下文的this指向window
函数执行上下文:有很多个,每个函数被调用的时候都会创建一个该函数的执行上下文
Eval执行上下文:Eval函数运行时的上下文
因为Eval函数存在性能及安全问题,所以一般不建议使用,本文主要讨论全局执行上下文及函数执行上下文
执行上下文的创建分为两个阶段:
1. 创建阶段
2. 执行阶段
创建阶段:确定this及作用域链,声明函数并初始化,声明变量并赋予默认值undefined,创建arguments对象
执行阶段:变量赋值并执行其它代码
注:上述创建阶段变量声明指var声明的变量,所以可以在变量声明前访问该变量(undefined),
如果是let或者const声明的变量,只有执行了let活const代码后该变量才可以访问,这是因为:
let或const声明的变量,不存在变量提升。而且要求必须 等let声明语句执行完之后,变量才能使用,不然会报Uncaught ReferenceError错误。ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。总之,在代码块内,使用let或const命令声明变量之前,该变量都是不可用的。
看木易杨的文章讲创建阶段还会分为
1. 确定this,也被称为This Binding
2. 词法环境组件创建
3. 变量环境组件创建
对这一块的理解还不够,故本文不做拓展,有兴趣的朋友可以查看原文链接:
github.com/yygmind/blo…或自行查阅相关资料。
什么是执行栈?
个人理解:执行栈就是一个存储JavaScript代码执行上下文的栈,既然是栈,所以具有 LIFO(后进先出)结构,也就是JavaScript代码载入的时候,全局执行上下文入栈,然后执行函数时对应的函数执行山下文入栈,函数执行结束,该函数执行上下文出栈,最后页面关闭的时候,全局执行上下文出栈。例如下代码:
function foo(){ function bar(){ console.log('bar'); }; bar(); } foo(); 复制代码
首先全局上下文入栈
foo执行上下文入栈
bar执行上下文入栈
然后就是bar执行完毕,bar执行上下文出栈,foo执行上下文出栈,页面关闭,全局执行上下文出栈。
理解了执行栈,我们来看一个小例子:
function printN1(n){ for(let i = 1;i<=n;i++){ console.log(i); } } printN1(10); function printN2(n){ if(n){ console.log(n); n -= 1; printN2(n); } } printN2(10); 复制代码
上面两个代码,都是打印<=n的正整数,如果忽略打印顺序的问题,哪一种实现更好呢,或者说差的那一种有什么问题呢?如果n比较小的时候你没有感觉到什么差异,那把n改为10000呢?
如果有错误或者不严谨的地方,请给予指正,十分感谢!