【进阶1-2期】JavaScript深入之执行上下文栈和变量对象(转)

时间:2024-10-06 19:06:14

这是我在公众号(高级前端进阶)看到的文章,现在做笔记

https://mp.weixin.qq.com/s/hZIpnkKqdQgQnK1BcrH6Nw

阅读笔记

JS是单线程的语言,执行顺序肯定是顺序执行,但是JS 引擎并不是一行一行地分析和执行程序,而是一段一段地分析执行,会先进行编译阶段然后才是执行阶段。

上代码

例子一:变量提升

// 下面是foo函数表达式,变量foo已经创建了,但是  函数表达式不会提升,所以foo()的时候,Uncaught TypeError: foo is not a function

foo();  // Uncaught TypeError: foo is not a function
var foo = function () {
console.log('foo1');
} foo(); // foo1,foo重新赋值 var foo = function () {
console.log('foo2');
} foo(); // foo2,foo重新赋值

例子二:函数提升

foo();  // foo2
function foo() {
console.log('foo1');
} foo(); // foo2 function foo() {
console.log('foo2');
} foo(); // foo2

说明:(1)、函数声明可以被提升,函数表达式不会提升;(2)、在同一作用域下,多个同名函数声明,后面的会替换前面的

例子三:声明优先级,函数 > 变量

foo();  // foo2
var foo = function() {
console.log('foo1');
} foo(); // foo1,foo重新赋值 function foo() {
console.log('foo2');
} foo(); // foo1

函数声明优先级高于变量声明。

执行上下文

执行上下文总共有三种类型

  • 全局执行上下文:只有一个,浏览器中的全局对象就是 window 对象,this 指向这个全局对象。

  • 函数执行上下文:存在无数个,只有在函数被调用的时候才会被创建,每次调用函数都会创建一个新的执行上下文。

  • Eval 函数执行上下文: 指的是运行在 eval 函数中的代码,很少用而且不建议使用。

执行上下文栈

因为JS引擎创建了很多的执行上下文,所以JS引擎创建了执行上下文(Execution context stack,ECS)来管理执行上下文。

当 JavaScript 初始化的时候会向执行上下文栈压入一个全局执行上下文,我们用 globalContext 表示它,并且只有当整个应用程序结束的时候,执行栈才会被清空,所以程序结束之前, 执行栈最底部永远有个 globalContext。

ECStack = [        // 使用数组模拟栈
globalContext
];

【进阶1-2期】JavaScript深入之执行上下文栈和变量对象(转)

找不同

有如下两段代码,执行的结果是一样的,但是两段代码究竟有什么不同?

var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f();
}
checkscope();
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f;
}
checkscope()();

答案是 执行上下文栈的变化不一样。

第一段代码:

ECStack.push(<checkscope> functionContext);
ECStack.push(<f> functionContext);
ECStack.pop();
ECStack.pop();

第二段代码:

ECStack.push(<checkscope> functionContext);
ECStack.pop();
ECStack.push(<f> functionContext);
ECStack.pop();

函数上下文: