执行上下文又名执行上下文环境

JS中为什么会产生这个概念呢,先来看一下下面的这段代码:

通过执行发现,第一句代码报了ReferenceError,第二句和第三句代码是undefined,由于undefined表明是已经定义了,但是没有进行赋值,却不知道a是10(第三句中)。

简单来说,浏览器在执行一段js代码执行要进行一些准备工作,包括变量声明提升,函数声明提升等,变量的赋值和函数形参的赋值要在运行到该代码时才进行,可以下图进行简单说明。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

这样解释应该能理解了。

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

下一篇将讲解函数执行上下文。

理解Javascript_02_执行上下文01的更多相关文章

  1. 理解Javascript_02_执行上下文02

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

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

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

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

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

  4. 深入理解javascript执行上下文(Execution Context)

    本文转自:http://blogread.cn/it/article/6178 在这篇文章中,将比较深入地阐述下执行上下文 - Javascript中最基础也是最重要的一个概念.相信读完这篇文章后,你 ...

  5. 深入理解JavaScript执行上下文、函数堆栈、提升的概念

    本文内容主要转载自以下两位作者的文章,如有侵权请联系我删除: https://feclub.cn/post/content/ec_ecs_hosting http://blog.csdn.net/hi ...

  6. 深入理解js——执行上下文

    什么是"执行上下文"?暂且不下定义,先看一段代码: 第一句报错,a未定义,很正常.第二句.第三句输出都是undefined,说明浏览器在执行console.log(a)时,已经知道 ...

  7. JavaScript的执行上下文,真没你想的那么难

    作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/2436173500265335 前言 在正文开始前,先来看 ...

  8. javascript 执行上下文的理解

    首先,为什么某些函数以及变量在没有被声明以前就可以被使用,javascript引擎内部在执行代码以前到底做了些什么?这里,想信大家都会想到,变量声明提前这个概念: 但是,以下我要讲的是,声明提前的这个 ...

  9. 深入理解javascript原型和闭包(8)——简述【执行上下文】上

    什么是“执行上下文”(也叫做“执行上下文环境”)?暂且不下定义,先看一段代码: 第一句报错,a未定义,很正常.第二句.第三句输出都是undefined,说明浏览器在执行console.log(a)时, ...

随机推荐

  1. C#中插入换行符

    要让一个Windows Form的TextBox显示多行文本就得把它的Multiline属性设置为true. 这个大家都知道,可是当你要在代码中为Text属性设置多行文本的时候可能会遇到点麻烦:) 你 ...

  2. 管理授权&管理决策&管理组织&管理目标

    [管理授权] 1.如果一个管理者不明白为公司培养人的责任,就很可能成为公司的瓶颈.这个问题的解决在于让管理者学会“授权”,把大部分自己紧抓不放的事情下放给部门内其他人做. 2.为一件事负责和亲自做是两 ...

  3. libevent源码深度剖析六

    libevent源码深度剖析六 ——初见事件处理框架 张亮 前面已经对libevent的事件处理框架和event结构体做了描述,现在是时候剖析libevent对事件的详细处理流程了,本节将分析 lib ...

  4. PHPMailer fe v4.11 For Thinkphp 3.2

    PHPMailer fe v4.11 For Thinkphp 3.2,你值得拥有! 今晚用TP3.2开发一个东西的时候需要邮件发送功能,理所当然的想到了PHPMailer.于是有了此文!------ ...

  5. 720. Longest Word in Dictionary 能连续拼接出来的最长单词

    [抄题]: Given a list of strings words representing an English Dictionary, find the longest word in wor ...

  6. 661. Image Smoother色阶中和器

    [抄题]: Given a 2D integer matrix M representing the gray scale of an image, you need to design a smoo ...

  7. Hadoop完全分别式环境搭建

    为学习大数据,需搭建Hadoop大数据环境,在此记录,以备以后查阅,同时分享出来,供需要者参考. 这里分几部分进行整理. 提纲: 一.说明和准备 二.设置免密登陆 分段网址:https://www.c ...

  8. Django--model模型绑定_数据库操作

    1.创建model类 app01/models.py 1 2 3 4 5 6 7 from django.db import models   # Create your models here. c ...

  9. Django框架 之 ORM中介模型

    Django框架 之 ORM中介模型 中介模型 处理类似搭配 pizza 和 topping 这样简单的多对多关系时,使用标准的ManyToManyField  就可以了.但是,有时你可能需要关联数据 ...

  10. 基于django rest framework做认证组件

    先导入要用到的类 from rest_framework.authentication import BaseAuthentication from rest_framework.exceptions ...