摘要：这一篇简单的说一说的函数执行和的执行上下文的概念，之前在我的博客里边也提到过的堆栈队列，这一篇打算多带带的拿出来说一说是什么是的执行上下文一段可以执行的代码在被执行的时候，会创建一个函数的执行上下文执行上下文里边有三个重要的属性分别是变量对象
这一篇简单的说一说js的函数执行和js的执行上下文的概念，之前在我的博客里边也提到过
js的堆栈队列，
这一篇打算多带带的拿出来说一说
一段可以执行的代码在被执行的时候，会创建一个函数的执行上下文
执行上下文里边有三个重要的属性分别是
变量对象
作用域链
this指向
执行上下文是跟函数相关的，执行上下文分为两个阶段
创建阶段
执行阶段
首先创建阶段
扫描变量和函数（确定变量环境）
确定this指向
确定词法环境
简单说一下词法环境和变量环境的区别，我个人理解的就是说词法环境是包含变量环境的
在js里边原型链大家都不陌生 ，js在当前的对象里边找不到所使用的属性的话会去他的上一级去找
直到Object，再找不到就会undefined ，这里边 当前对象的作用域就是他的变量环境，而词法环境则是与之关联的的执行上下文中声明的变量
在创建阶段 函数的声明会被储存在当前的变量环境之中，var的变量的话则会被设置成undefined
，所以我们在声明之前就可以访问到var声明的变量 ，but他是一个undfined
然后就是执行阶段了
这个时候已经完成了对所有变量的分配，开始执行代码
变量对象什么是变量对象，变量对象就是与执行上下文相关得数据得一个作用域，这里边存储了在这个上下文里边定义的而变量和函数声明
函数声明的时候会在创建阶段的时候声明一个函数指针全局上下文和函数上下文
故名思与函数上下文，在函数被执行的时候创建，那么全局上下文是什么时候被创建的呢，首先我们要知道一个概念就是，全局对象
在一般的函数里边全局对象可以用this引用其属性，客户端的话是window对象
console.log(this);
可以尝试着去打印一下this，如下图可以看到，window对象里边有很多我们常用或者常见的属性和方法
当然也有一些其他的情况this并不是指向的window对象，this指向 这个东西，我们会在下边说
当然js 万物皆对象不只是说说
用 instanceof 输出一下this 会发现也是一个object
console.log(this instanceof Object);
所以说全局对象是一个object的实例化对象
所以说说白了全局上下文就是在一开始就被创建的，全局上下文是由在浏览器关闭或者刷新的时候才会销毁， 然后这个window对象其实就是全局上下文的变量对象
函数上下文和上边所说的意思差不多，但是，啊，但是，在函数上下文中的时候，函数里边的变量对象是活动对象，他的英文名字叫做 actiation object ，大面上看的意思就是说只有进入了这个执行上下文中的时候，也就是说执行到了这个函数的时候，其中的变量对象才会被激活，才会能被访问，在没有执行到这个函数的时候，其属性是不能访问的，这里是和全局上下文不同的。
函数执行过程
function foo(a) {
var b = 2;
function c() {}
var d = function() {};
b = 3;
}
foo(1);
首先看这段代码，上边也说了，函数执行有两个阶段创建阶段和执行阶段
首先进如执行上下文，进入创建阶段
首先形参，也就是调用的方法的时候传进来的值，如果你传了就是有值得，如果没传就是一个undefined，相应得函数里边会有一个arguments对象，存放着形参得值，
然后函数里边声明得变量，在创建阶段得时候是没有值得，会被赋值一个undefined。
函数声明会由名称和对应值组成一个变量对象的属性被创建，也就是上边说的函数得指针，我是这么理解得，因为这个变量指向了这个函数，如果变量对象已经存在相同名称的属性，则完全替换这个属性
上边这段代码在创建阶段是这样得
{
arguments: {
0: 1,
length: 1
},
a: 1,
b: undefined,
c: reference to function c(){},
d: undefined
}
然后函数的而执行阶段，这个时候就该干嘛干嘛了，函数里边声明的变量，赋值等等的会在这里根据代码，修改变量的值
{
arguments: {
0: 1,
length: 1
},
a: 1,
b: 3,
c: reference to function c(){},
d: reference to FunctionExpression "d"
}
得出一个结论，函数的执行上下文里边在初始化的时候只包含一个arguments对象，其他的属性是没有值的，为了直观一点 ，举个例子
function foo() {
console.log(a);
a = 1;
}
foo();
function bar() {
a = 1;
console.log(a);
}
bar();
比如说这个在foo函数的上下文里边打印a， 但是foo 里边没有用var声明，下边的a就找不到所以会打印一个 a is not defined。
但是第二个的话会打印一个1，因为搭载因之前，全局对象里边已经有了a属性
最后就是，在上文提到
c: reference to function c(){},
d: reference to FunctionExpression "d"
在上下文创建的时候，变量是不会覆盖这种声明的，比如说
console.log(foo);
function foo(){
console.log("foo");
}
var foo = 1;
会打印这个函数，但是， 啊，但是，如果是这样
function foo(){
console.log("foo");
}
var foo = 1;
console.log(foo);
这样的话就变成了刚才所说的赋值了 ，会打印1
以上是我对js函数的执行与上下文的一些认识，刚从博客园搬过来，有不足的希望指正
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105480.html
摘要：思考题在深入学习之词法作用域和动态作用域中，提出这样一道思考题思考题一思考题二两段代码都会打印但是还是有些许差异的，本文就详细的解析执行上下文栈和执行上下文的具体变化过程。 在《深入学习js之——执行上下文栈》中说过，当JavaScript代码执行一段可执行代码（executable code）时,会创建对应的执行上下文（execution context） 对于每一个执行上下文，都有...
摘要：图片转引自的演讲和两个定时器中回调的执行逻辑便是典型的机制。异步编程关于异步编程我的理解是，在执行环境所提供的异步机制之上，在应用编码层面上实现整体流程控制的异步风格。 问题背景 在一次开发任务中，需要实现如下一个饼状图动画，基于canvas进行绘图，但由于对于JS运行环境中异步机制的不了解，所以遇到了一个棘手的问题，始终无法解决，之后在与同事交流之后才恍然大悟。问题的根节在于经典的J...
摘要：深入之继承的多种方式和优缺点深入系列第十五篇，讲解各种继承方式和优缺点。对于解释型语言例如来说，通过词法分析语法分析语法树，就可以开始解释执行了。 JavaScript深入之继承的多种方式和优缺点 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。 写在前面 本文讲解JavaScript各种继承方式和优缺点。 但是注意： 这篇文章更像是笔记，哎，再让我...
摘要：执行上下文和执行栈是中关键概念之一，是难点之一。理解执行上下文和执行栈同样有助于理解其他的概念如提升机制作用域和闭包等。函数执行完成，函数的执行上下文出栈，并且被销毁。 前言 如果你是一名 JavaScript 开发者，或者想要成为一名 JavaScript 开发者，那么你必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是JavaScript中关键概念之一，是Ja...
摘要：执行上下文和执行栈是中关键概念之一，是难点之一。理解执行上下文和执行栈同样有助于理解其他的概念如提升机制作用域和闭包等。函数执行完成，函数的执行上下文出栈，并且被销毁。 前言 如果你是一名 JavaScript 开发者，或者想要成为一名 JavaScript 开发者，那么你必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是JavaScript中关键概念之一，是Ja...
阅读 2061·2021-09-07 09:58
阅读 3239·2019-08-30 14:07
阅读 1152·2019-08-29 12:32
阅读 524·2019-08-29 11:06
阅读 3412·2019-08-26 18:18
阅读 3484·2019-08-26 17:35
阅读 1302·2019-08-26 11:35
阅读 517·2019-08-26 11:35
