什么是“执行上下文”?暂且不下定义,先看一段代码:

第一句报错,a未定义,很正常。第二句、第三句输出都是undefined,说明浏览器在执行console.log(a)时,已经知道了a是undefined,但却不知道a是10(第三句中)。

在运行一段js代码之前,浏览器已经做了一些“准备工作”,其中就包括对变量的声明,而不是赋值。变量赋值是在赋值语句执行的时候进行的。可用下图模拟:

这是第一种情况。

第二种情况。

有js开发经验的朋友应该都知道,你无论在哪个位置获取this,都是有值的。至于this具体的取值情况,那就比较复杂了。与第一种情况不同的是:第一种情况只是对变量进行声明(并没有赋值),而此种情况直接给this赋值。这也是“准备工作”情况要做的事情之一。

第三种情况。

需要注意代码注释中的两个名词——“函数表达式”和“函数声明”。虽然两者都很常用,但是这两者在“准备工作”时,却是两种待遇。

在“准备工作”中,对待函数表达式就像对待“ var a = 10 ”这样的变量一样,只是声明。而对待函数声明时,却把函数整个赋值了。

好了,“准备工作”介绍完毕。

我们总结一下,在“准备工作”中完成了哪些工作:

  • 变量、函数表达式——变量声明,默认赋值为undefined;
  • this——赋值;
  • 函数声明——赋值;

这三种数据的准备情况我们称之为“执行上下文”或者“执行上下文环境”。

我们上面所有的例子都是在全局环境下执行的。其实,javascript在执行一个代码段之前,都会进行这些“准备工作”来生成执行上下文。这个“代码段”其实分三种情况——全局代码,函数体,eval代码。

这里解释一下为什么代码段分为这三种。

所谓“代码段”就是一段文本形式的代码。

首先,全局代码是一种,这个应该没有非议,本来就是手写文本到<script>标签里面的。

其次,eval代码接收的也是一段文本形式的代码。

最后,函数体是代码段是因为函数在创建时,本质上是 new Function(…) 得来的,其中需要传入一个文本形式的参数作为函数体。

深入理解js——执行上下文的更多相关文章

  1. JS底层知识理解之执行上下文篇

    JS底层知识理解之执行上下文篇 一.什么是执行上下文(Execution Context) 执行上下文可以理解为当前代码的执行环境,它会形成一个作用域. 二.JavaScript引擎会以什么方式去处理 ...

  2. js的基础(平民理解的执行上下文/调用堆栈/内存栈/值类型/引用类型)

    与以前的切图比较,现在的前端开发对js的要求似乎越来越高,在开发中,我们不仅仅是要知道如何运用现有的框架(react/vue/ng), 而且我们对一些基础的知识的依赖越来越大. 现在我们就用平民的方法 ...

  3. JS执行上下文(执行环境)详细图解

    JS执行上下文(执行环境)详细图解 先随便放张图 我们在JS学习初期或者面试的时候常常会遇到考核变量提升的思考题.比如先来一个简单一点的. console.log(a); // 这里会打印出什么? v ...

  4. 一篇文章看懂JS执行上下文

     壹 ❀ 引 我们都知道,JS代码的执行顺序总是与代码先后顺序有所差异,当先抛开异步问题你会发现就算是同步代码,它的执行也与你的预期不一致,比如: function f1() { console.lo ...

  5. JS 执行上下文的一次理解

    执行上下文 执行上下文概念 当代码运行时,会产生一个对应的执行环境,在这个环境中,变量会被事先提出来(变量提升),代码从上往下开始执行,就叫做执行上下文. 注:在定义变量是未直接赋值,使用默认值 un ...

  6. js 执行上下文理解

    前端基础进阶(三):变量对象详解http://www.jianshu.com/p/330b1505e41d 1.创建阶段 a.生成变量对象    1.创建arguments对象   2.functio ...

  7. js执行上下文(由浅入深)

    每一个函数都有自己的执行上下文EC(执行环境 execution context),并且每个执行上下文中都有它自己的变量对象VO(Variable object),用于存储执行上下文中的变量 .函数声 ...

  8. 理解Javascript_02_执行上下文02

    上一篇我们讲到在全局环境下的代码段中,执行上下文环境中如何处理数据: 变量.函数表达式——变量声明,默认赋值为undefined: this——赋值: 函数声明——赋值: 这篇文章讲关于函数执行上下文 ...

  9. 理解Javascript_02_执行上下文01

    执行上下文又名执行上下文环境 JS中为什么会产生这个概念呢,先来看一下下面的这段代码: 通过执行发现,第一句代码报了ReferenceError,第二句和第三句代码是undefined,由于undef ...

随机推荐

  1. nginx配置文件重写url不带index.php

    如题: 代码 location / { root /项目目录/; index index.php; if (-f $request_filename/index.php){ rewrite (.*) ...

  2. 【Gerrit】Gerrit与Jenkins/Hudson CI服务器搭建

    配置Git 很多系统(例如Linux)已经默认提供了Git,在Git主页也可以找到安装程序.对于Windows用户,最好的选择是MsysGit.请注意,如果你安装了Apple Developer To ...

  3. Oracle学习系列6

    Oracle学习系列6 ************************************************************************************ 删除约 ...

  4. Android项目——读取手机联系人信息

    加入读取联系人信息的权限 <uses-permission android:name="android.permission.READ_CONTACTS"/> cont ...

  5. 装个centos虚拟机之设置桥接网络

    问题1:设置静态ip 虚拟机网路选择桥接后,设置静态ip: (1):先看下当前用的哪个网络 (2):打开配置文件,修改内容 内容参照mac配置,(注意:mac网络配置里的路由器就是默认网关GATEWA ...

  6. ecstore与淘宝sdk的autoload加载顺序问题

    ecstore使用spl_autoload_register实现类的自动加载,这个很大的方便我们不用每次都要手动的去include一些类和函数.不过这样会导致一些问题,比如说,有一些extension ...

  7. LeetCode "Binary Tree Level Order Traversal II" using DFS

    BFS solution is intuitive - here I will show a DFS based solution: /** * Definition for a binary tre ...

  8. 特效合集(原生JS代码)适合初学者

    1.返回顶部(完全兼容各个浏览器,不含美化) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" & ...

  9. case when完成不同条件的显示

    好长时间不写sql了,今天群里问了一个问题: 我想得到的就是  2,3,4,就是低,5,6,7,8,9就是中,10,11....就是高,现在只知道zpcs,怎么得到高中低? case 写的,decod ...

  10. 关于http协议详解

    Author :Jeffrey 引言 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前 ...