如果你是一名 JavaScript 开发者,或者想要成为一名 JavaScript 开发者,那么你必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是JavaScript中关键概念之一,是JavaScript难点之一。 理解执行上下文和执行栈同样有助于理解其他的 JavaScript 概念如提升机制、作用域和闭包等。本文尽可能用通俗易懂的方式来介绍这些概念。
想阅读更多优质文章请猛戳 GitHub博客
简而言之,执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念, JavaScript 中运行任何的代码都是在执行上下文中运行
执行上下文总共有三种类型:
执行上下文的生命周期包括三个阶段: 创建阶段→执行阶段→回收阶段 ,本文重点介绍创建阶段。
当函数被调用,但未执行任何其内部代码之前,会做以下三件事:
在一段 JS 脚本执行之前,要先解析代码(所以说 JS 是解释执行的脚本语言),解析的时候会先创建一个全局执行上下文环境,先把代码中即将执行的变量、函数声明都拿出来。变量先暂时赋值为undefined,函数则先声明好可使用。这一步做完了,然后再开始正式执行程序。
另外,一个函数在执行之前,也会创建一个函数执行上下文环境,跟全局上下文差不多,不过 函数执行上下文中会多出this arguments和函数的参数。
执行变量赋值、代码执行
执行上下文出栈等待虚拟机回收执行上下文
大部分编程语言都是先声明变量再使用,但在JS中,事情有些不一样:
console.log(a)// undefined var a = 10
上述代码正常输出 undefined
而不是报错 Uncaught ReferenceError: a is not defined
,这是因为声明提升(hoisting),相当于如下代码:
var a; //声明 默认值是undefined “准备工作” console.log(a); a=10; //赋值
我们都知道,创建一个函数的方法有两种,一种是通过函数声明 function foo(){}
另一种是通过函数表达式 var foo = function(){}
,那这两种在函数提升有什么区别呢?
console.log(f1) // function f1(){} function f1() {} // 函数声明 console.log(f2) // undefined var f2 = function() {} // 函数表达式
接下来我们通过一个例子来说明这个问题:
function test() { foo(); // Uncaught TypeError "foo is not a function" bar(); // "this will run!" var foo = function () { // function expression assigned to local variable 'foo' alert("this won't run!"); } function bar() { // function declaration, given the name 'bar' alert("this will run!"); } } test();
在上面的例子中,foo()调用的时候报错了,而bar能够正常调用。
我们前面说过变量和函数都会上升,遇到函数表达式 var foo = function(){}
时,首先会将 var foo
上升到函数体顶部,然而此时的foo的值为undefined,所以执行 foo()
报错。
而对于函数 bar()
, 则是提升了整个函数,所以 bar()
才能够顺利执行。
有个细节必须注意: 当遇到函数和变量同名且都会被提升的情况,函数声明优先级比较高,因此变量声明会被函数声明所覆盖,但是可以重新赋值。
alert(a);//输出:function a(){ alert('我是函数') } function a(){ alert('我是函数') }// var a = '我是变量'; alert(a); //输出:'我是变量'
function声明的优先级比var声明高,也就意味着当两个同名变量同时被function和var声明时,function声明会覆盖var声明
这代码等效于:
function a(){alert('我是函数')} var a; //hoisting alert(a); //输出:function a(){ alert('我是函数') } a = '我是变量';//赋值 alert(a); //输出:'我是变量'
最后我们看个复杂点的例子:
function test(arg){ // 1. 形参 arg 是 "hi" // 2. 因为函数声明比变量声明优先级高,所以此时 arg 是 function console.log(arg); var arg = 'hello'; // 3.var arg 变量声明被忽略, arg = 'hello'被执行 function arg(){ console.log('hello world') } console.log(arg); } test('hi'); /* 输出: function a() { console.log('fun'); } hello */
这是因为当函数执行的时候,首先会形成一个新的私有的作用域,然后依次按照如下的步骤执行:
先搞明白一个很重要的概念 —— this的值是在执行的时候才能确认,定义的时候不能确认! 为什么呢 —— 因为this是执行上下文环境的一部分,而执行上下文需要在代码执行之前确定,而不是定义的时候。看如下例子:
// 情况1 function foo() { console.log(this.a) //1 } var a = 1 foo() // 情况2 function fn(){ console.log(this); } var obj={fn:fn}; obj.fn(); //this->obj // 情况3 function CreateJsPerson(name,age){ //this是当前类的一个实例p1 this.name=name; //=>p1.name=name this.age=age; //=>p1.age=age } var p1=new CreateJsPerson("尹华芝",48); // 情况4 function add(c, d){ return this.a + this.b + c + d; } var o = {a:1, b:3}; add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 // 情况5 <button id="btn1">箭头函数this</button> <script type="text/javascript"> let btn1 = document.getElementById('btn1'); let obj = { name: 'kobe', age: 39, getName: function () { btn1.onclick = () => { console.log(this);//obj }; } }; obj.getName(); </script>
接下来我们逐一解释上面几种情况
函数多了,就有多个函数执行上下文,每次调用函数创建一个新的执行上下文,那如何管理创建的那么多执行上下文呢?
JavaScript 引擎创建了执行上下文栈来管理执行上下文。 可以把执行上下文栈认为是一个存储函数调用的栈结构,遵循先进后出的原则 。
从上面的流程图,我们需要记住几个关键点:
我们再来看个例子:
var color = 'blue'; function changeColor() { var anotherColor = 'red'; function swapColors() { var tempColor = anotherColor; anotherColor = color; color = tempColor; } swapColors(); } changeColor();
上述代码运行按照如下步骤:
给大家推荐一个好用的BUG监控工具 Fundebug ,欢迎免费试用!
欢迎关注公众号: 前端工匠 ,你的成长我们一起见证!如果你感觉有收获,欢迎给我打赏,以激励我更多输出优质开源内容
我来评几句
登录后评论已发表评论数()