今天主要讲一下,JS底层的一些东西,这些东西不太好举例(应该是我水平不够)

望大家多多海涵,比心心

执行环境

执行环境(执行上下文,全文使用执行环境 )是JS中最为重要的一个概念,执行环境决定了,变量或函数有权访问的其他数据,并决定了其各自行为。

跟执行环境直接相关的是变量对象

JS在执行环境中定义的所有变量和函数都保存在该对象上。

对于该对象,我们无法使用代码来进行访问,但是JS解析器在进行数据处理时会在后台对该变量对象进行访问。

全局执行环境

全局执行环境是JS代码的最外围的执行环境,在JS脚本执行时创建,脚本执行完成后销毁

全局执行环境根据宿主环境(即JS的运行环境)的不同而有所区别

在web浏览器中全局执行环境被认为是window对象,所以所有的全局变量、函数都是作为window对象的属性和方法创建的(Es6中的 let、const声明的变量不会作为window对象的属性和方法)

执行环境中的所有代码执行完成后保存在其中的所有变量、函数定义也都会随之销毁。

这也是this指针默认的指向

函数执行环境

每次进行函数的调用时,都会为该函数创建一个新的执行环境,然后JS会执行该执行环境的代码,具体规则一会儿讲述。

Eval函数执行环境

Eval函数可以让JS开发人员动态地生成,并执行脚本,传入一个字符串后,会被该函数解析为可执行的JS代码,并执行

关于上述的执行环境的执行顺序就涉及到了另一个概念

执行栈

执行栈在其它的编程语言中通常被称为调用栈,执行栈中保存了代码执行期间创建的所有执行环境

学过数据结构的朋友应该知道,栈是一个后进先出的结构

执行环境的执行顺序如下:

1.当JS引擎首次读取JS脚本时会创建全局执行环境,并将全局执行环境推入执行栈

2.每当函数被调用时,创建的函数执行环境会被推入执行栈,成为执行栈 的栈顶元素,执行栈移交控制权给该执行环境

3.JS引擎会运行执行栈中栈顶的执行环境中的代码

4.执行栈弹出已执行完的执行环境,将控制权交给目前栈顶的执行环境

5.弹出全局执行环境,浏览器关闭

我已经介绍了JS是如何管理执行环境的

下面我将介绍JS是如何创建执行环境的

创建执行环境

  1. 创建阶段
    1. 确定this的值,也被称为This Binding

      • 全局执行环境中,this指向全局对象
      • 浏览器中全局对象为window
      • 函数执行环境中,this的值取决于函数的调用方式,如果被一个对象引用调用,this会指向该对象,否则this会设为全局对象或undefined(严格模式)
    2. 词法环境被创建
      • 词法环境是一种规范类型,代码的词法嵌套结构来定义标识符与特定变量和函数关联关系
      • 即词法环境定义了标识符(变量名)和实际变量对象的映射关系(即JS是怎样通过变量名访问到数据的)
      • 词法环境有两个组成部分:
        1. 环境记录(储存变量和函数声明的实际位置)

          • 声明性环境记录(储存变量、函数、参数 ;函数词法环境包含该类记录)
          • 对象环境记录(储存全局环境中出现的函数和变量的关联 ; 全局词法环境包含该类记录)
        2. 对外部环境引用(用于访问外部的词法环境)
      • 词法环境有两种类型:
        1. 全局环境(没有外部词法环境,为null)
        2. 函数环境(保存在函数中定义的变量)
      • PS.对于函数环境而言,环境记录中包含了一个arguments 对象(是一个类数组对象)在上一篇文章中有着其较为详细的说明  
    3. 变量环境被创建
      • 也是一种词法环境,包含词法环境所有的属性用于存储 函数声明、变量绑定
      • 在ES6中 使用 LexicalEnvironment(词法环境) 来储存(let、const)
      • VariableEnvironment (变量环境) 组件存储(var)
    • PS . JS中的变量提升正是变量环境引起的,在创建阶段函数声明被存储在环境中,变量被设置为undefined(由于创建阶段在执行阶段之前)所以var 声明的变量在声明之前就可以访问,其值为变量环境设置的undefined 
  2. 执行阶段
    •   这一阶段就很好理解了,在这一阶段完成对变量的初始化,然后执行代码
    • PS. 如果JS在代码中的环境记录中保存的实际位置找不到 let ,那么将会为该值分配 Undefined

    

上述过程大家可以参照下图,可能不太准确但还是可以帮助大家理解

执行环境的内容大概就是这些,明天更新作用域、作用域链相关内容

Javascript高级编程学习笔记(9)—— 执行环境的更多相关文章

  1. Javascript高级编程学习笔记(23)—— 函数表达式(1)递归

    前面的文章中,我在介绍JS中引用类型的时候提过,JS中函数有两种定义方式 第一种是声明函数,即使用function关键字来声明 第二种就是使用函数表达式,将函数以表达式的形式赋值给一个变量,这个变量就 ...

  2. Javascript高级编程学习笔记(10)—— 作用域、作用域链

    昨天介绍了,JS中函数的作用域 什么词法环境之类的,可能很多小伙伴不太明白. 在今天的内容开始之前,先做个简短的声明: 词法环境这一概念是在ES5中提出的,因为词法环境主要用于保存let.const声 ...

  3. Javascript高级编程学习笔记(7)—— 函数

    前几天有事耽搁了,今天继续更新 今天的主要内容是JS中的函数 这一篇主要讲函数的定义等内容,至于变量提升.执行环境.闭包.内存回收等内容在后面讲,高玩们可以不用看下面的正文了. 函数 首先来讲,函数对 ...

  4. Javascript高级编程学习笔记(17)—— 引用类型(6)基本包装类

    基本包装类 基本包装类这个概念或许有的小伙伴没有听说过 但是小伙伴们有没有想过,为什么基本数据类型的实例也有方法呢? 其实这些方法都来自基本包装类型 这是JS为了方便操作基础数据类型而创建的特殊引用类 ...

  5. Javascript高级编程学习笔记(16)—— 引用类型(5) Function类型

    JS中许多有趣的地方都和函数脱不了联系 那么是什么让JS中的函数这么有趣呢? 我们一起来看看吧 Function类型 在JS中函数实际上就是对象,每个函数都是Function类型的实例,和JS的其他引 ...

  6. Javascript高级编程学习笔记(13)—— 引用类型(2)Array类型

    除了Object类型之外ECMA中最常用的引用类型可能就是Array类型了 并且ECMA中的数组类型和其他大多数编程语言的数组类型存在着很大的区别 今天就介绍一下JS中的Array的特别之处 区别 1 ...

  7. Javascript高级编程学习笔记(11)—— 垃圾回收机制

    垃圾回收机制 垃圾回收机制,是保证脚本能长时间运行的重要机制 JS具有自动垃圾收集机制,也就是说执行环境会负责管理代码执行过程中使用的内存 与一些偏底层的语言(c.c++)不同,我们不需要手工地去管理 ...

  8. Javascript高级编程学习笔记(4)—— JS中的数据类型(2)

    接着昨天的文章,今天这篇文章主要讲述JS中剩余的两种数据类型String,和Object String类型 对于该类型,书中给出的解释为:由0或多个16为Unicode字符组成的字符序列. 对于JS中 ...

  9. Javascript高级编程学习笔记(18)—— 引用类型(7)单体内置对象

    什么是内置对象呢? js高级程序设计中给出的定义为:由ES规定不依赖于宿主环境的对象,这些对象在JS执行前就已经存在 前面我们介绍的引用类型都是内置对象 除了这些对象外ECMA还规定了两个单体内置对象 ...

随机推荐

  1. 14-background

    一.background-color:设置该元素的背景颜色 一共有三种:单词.rgb表示法.十六进制表示法 1.rgb:红色 绿色 蓝色 三原色 光学显示器,每个像素都是由三原色的发光原件组成的,靠明 ...

  2. 用ActiveX 创建自己的comboBox 控件(二)

    3.0 添加事件 3.1 添加OnSelChange 事件 当用户选中列表项的时候触发该事件.(不只是选择改变时触发,本次选择和上次相同时也触发): 添加完成后,在ActivexcomboBox.id ...

  3. spring和springmvc配置分离

    在配置springmvc的时候,我们可以把所有配置配置到springmvc的xml文件中, 也可以分多个 Spring 的配置文件, 然后使用 import 节点导入其他的配置文件. 但是,通常情况下 ...

  4. c++ 中的智能指针实现

    摘要:C++11 中新增加了智能指针来预防内存泄漏的问题,在 share_ptr 中主要是通过“引用计数机制”来实现的.我们今天也来自己实现一个简单的智能指针: // smartPointer.cpp ...

  5. 442. Find All Duplicates in an Array找出数组中所有重复了两次的元素

    [抄题]: Given an array of integers, 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and o ...

  6. thinkphp用ajax遇到的坑——ajax请求没有反应

    view视图的 html 的 js 代码如下, $.ajax({             url:"test",//这里指向的就不再是页面了,而是一个方法.             ...

  7. Linux驱动之异步OR同步,阻塞OR非阻塞概念介绍

    链接:https://www.zhihu.com/question/19732473/answer/20851256 1.同步与异步同步和异步关注的是消息通信机制 (synchronous commu ...

  8. 符合Chrome58的证书制作

    Chrome 58开始取消了对通用名检查的支持, 但网上大多数OpenSSL使用教程没有提及这一点, 制作出的证书总是提示ERR_CERT_COMMON_NAME_INVALID 错误, 所以分享出解 ...

  9. Android 记录点滴

    1:关于断点 设置断点点三角是进不去的,这个是类似c#的release 正式版, 点第二个红圈内的debug的那个按钮才可以   . 这个按钮可以让程序及时进入当前断点处 2:对于背景颜色 andro ...

  10. mybatis进阶--一对多查询

    首先,我们还是先给出一个需求:根据订单id查询订单明细——我们知道,一个订单里面可以有多个订单的明细(需求不明确的同学,请留言或者去淘宝网上的订单处点一下就知道了).这个时候,一个订单,对应多个订单的 ...