什么是“执行上下文”(也叫做“执行上下文环境”)?暂且不下定义,先看一段代码:

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

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

这是第一种情况。

下面还有。先来个简单的。

有js开发经验的朋友应该都知道,你无论在哪个位置获取this,都是有值的。至于this的取值情况,比较复杂,会专门拿出一篇文章来讲解。

与第一种情况不同的是:第一种情况只是对变量进行声明(并没有赋值),而此种情况直接给this赋值。这也是“准备工作”情况要做的事情之一。

下面还有。。。第三种情况。

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

看以上代码。“函数声明”时我们看到了第二种情况的影子,而“函数表达式”时我们看到了第一种情况的影子。

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

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

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

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

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

这里插一句题外话:通过以上三种情况,你可能会联想到网上的有些考js语法的题目/面试题。的确,几乎每个js语法题中都有这种题目出现。之前你遇到这种题目是不是靠背诵来解决?背过了,隔几天又忘记了。——任何问题,都要去追根溯源,要知道这个问题是真正出自哪一块知识点,要真正去理解。光靠背诵是没用的。

细心的朋友可能会发现,我们上面所有的例子都是在全局环境下执行的。

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

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

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

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

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

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

这样解释应该能理解了。

最后,eval不常用,也不推荐大家用。

下一节我们介绍函数的情况,并一起总结一下执行上下文到底包含哪些内容。敬请期待。

---------------------------------------------------------------------------

本文已更新到《深入理解js原型和闭包》的目录更多内容可参考《深入理解js原型和闭包》

【学习笔记】深入理解js原型和闭包(8)——简述【执行上下文】上的更多相关文章

  1. 【学习笔记】深入理解js原型和闭包(0)——目录

    文章转载:https://www.cnblogs.com/wangfupeng1988/p/4001284.html 说明: 本篇文章一共16篇章,外加两篇后补的和一篇自己后来添加的学习笔记,一共19 ...

  2. 【学习笔记】深入理解js原型和闭包系列学习笔记——精华

    深入理解js原型和闭包笔记: 1.“一切皆是对象”,对象是属性的集合. 丨 函数也是对象,但是使用typeof时为什么函数返回function而 丨  不是object呢,js为何要对函数做这样的区分 ...

  3. 【学习笔记】深入理解js原型和闭包(16)——完结

    之前一共用15篇文章,把javascript的原型和闭包讲解了一下. 首先,javascript本来就“不容易学”.不是说它有多难,而是学习它的人,往往都是在学会了其他语言之后,又学javascrip ...

  4. 【学习笔记】深入理解js原型和闭包(18)——补充:上下文环境和作用域的关系

    本系列用了大量的篇幅讲解了上下文环境和作用域,有些人反映这两个是一回儿事.本文就用一个小例子来说明一下,作用域和上下文环境绝对不是一回事儿. 再说明之前,咱们先用简单的语言来概括一下这两个的区别. 0 ...

  5. 【学习笔记】深入理解js原型和闭包(17)——补this

    本文对<深入理解js原型和闭包(10)——this>一篇进行补充,原文链接:https://www.cnblogs.com/lauzhishuai/p/10078307.html 原文中, ...

  6. 【学习笔记】深入理解js原型和闭包(15)——闭包

    前面提到的上下文环境和作用域的知识,除了了解这些知识之外,还是理解闭包的基础. 至于“闭包”这个词的概念的文字描述,确实不好解释,我看过很多遍,但是现在还是记不住. 但是你只需要知道应用的两种情况即可 ...

  7. 【学习笔记】深入理解js原型和闭包(14)——从【自由变量】到【作用域链】

    先解释一下什么是“自由变量”. 在A作用域中使用的变量x,却没有在A作用域中声明(即在其他作用域中声明的),对于A作用域来说,x就是一个自由变量.如下图 如上程序中,在调用fn()函数时,函数体中第6 ...

  8. 【学习笔记】深入理解js原型和闭包(13)——【作用域】和【上下文环境】

    上文简单介绍了作用域,本文把作用域和上下文环境结合起来说一下,会理解的更深一些. 如上图,我们在上文中已经介绍了,除了全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了.而不 ...

  9. 【学习笔记】深入理解js原型和闭包(12)——简介【作用域】

    提到作用域,有一句话大家(有js开发经验者)可能比较熟悉:“javascript没有块级作用域”.所谓“块”,就是大括号“{}”中间的语句.例如if语句: 再比如for语句: 所以,我们在编写代码的时 ...

  10. 【学习笔记】深入理解js原型和闭包(11)——执行上下文栈

    继续上文的内容. 执行全局代码时,会产生一个执行上下文环境,每次调用函数都又会产生执行上下文环境.当函数调用完成时,这个上下文环境以及其中的数据都会被消除,再重新回到全局上下文环境.处于活动状态的执行 ...

随机推荐

  1. CentOS7.2安装Vim8和YouCompleteMe

    1.环境 本文使用VMWare虚拟机进行实验,客户机系统是CentOS 7.2最小安装(CentOS-7-x86_64-Minimal-1511.iso) 最终实现效果:安装vim8 + python ...

  2. CentOS7.2编译GCC7.3

    1.环境 本文使用VMWare虚拟机进行实验. 4 核CPU, 4GB 内存,20GB 硬盘,CentOS 7.2 最小安装(CentOS-7-x86_64-Minimal-1511.iso) 2.需 ...

  3. Ext js框架模拟Windows桌面菜单管理模板

    一款超炫的后台,Ext模拟Windows桌面,Ext经典浅蓝风格,功能非常强大,包括最大化.最小化.状态栏.桌面图标等,不过需要非常懂Ext脚本的才可驾驭它.​ 1.图片 ​2. [代码][HTML] ...

  4. trying to draw too large(106,975,232 bytes) bitmap.

    Loading Large Bitmaps Efficiently This lesson teaches you to Read Bitmap Dimensions and Type Load a ...

  5. 贪吃蛇小游戏—C++、Opencv编写实现

    贪吃蛇游戏,C++.Opencv实现 设计思路: 1.显示初始画面,蛇头box初始位置为中心,食物box位置随机 2.按随机方向移动蛇头,按a.s.d.w键控制移动方向,分别为向左,向下,向右,向上 ...

  6. NSArray使用须知

    多用firstObject方法 在iOS7之前,我们获取NSArray的第一个元素,通常使用array[0],在iOS7中,新引入了公开的firstObject方法,对于空数组,该方法返回nil,而使 ...

  7. Watir: Watir webdriver对JS 弹出框的操作现在非常简单。

    以下代码支持Firefox,IE,Chrome require 'watir-webdriver' #require "watir-webdriver/extensions/alerts&q ...

  8. 空间数据索引RTree完全解析及Java实现

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/MongChia1993/article/details/69941783 第一部分 空间数据的背景介 ...

  9. javascript 布尔类型

    true和false 表达式为false的情况 1 false 2 NaN 3 0 4 字符串的空 " " 5 null 6 undefined

  10. js 排列 组合

    <script> //组合 function C(arr, num){ var r=[]; (function f(t,a,n){ if (n==0) return r.push(t); ...