JS基础小记

作者: 星星的成长之路 | 来源:发表于2019-11-13 23:54 被阅读0次
变量对象与基础数据类型

JavaScript的执行上下文生成之后,会创建一个叫做变量对象的特殊对象,JavaScript的基础数据(按值访问)类型往往都会保存在变量对象中。

JavaScript不允许直接访问堆内存中的位置,因此我们不能直接操作对象的堆内存空间。

在操作对象时,实际上是在操作对象的引用而不是实际的对象。因此,引用类型的值都是按引用访问的。这里的引用,我们可以理解为保存在变量对象中的一个地址,该地址与堆内存的实际值相关联。

执行上下文(Execution Context)

全局上下文在浏览器窗口关闭后出栈。
函数中,遇到return能直接终止可执行代码的执行,因此会直接将当前上下文弹出栈。

  • 单线程
  • 同步执行,只有栈顶的上下文处于执行中,其他上下文需要等待
  • 全局上下文只有唯一的一个,它在浏览器关闭时出栈
  • 函数的执行上下文的个数没有限制
  • 每次某个函数被调用,就会有个新的执行上下文为其创建,即使是调用的自身函数,也是如此。
执行上下文分为两个阶段
  1. 创建阶段
    创建变量对象
    建立作用域链
    确定this的指向

  2. 代码执行阶段
    变量赋值
    函数引用
    执行其它代码

屏幕快照 2019-11-13 23.53.12.png
变量对象(Variable Object)

变量对象的创建,依次经历了以下几个过程。

  1. 创建arguments变量
  2. 检查function函数声明,并创建属性 (重名会覆盖)
  3. 检查var变量声明,并创建属性(重名会跳过)

详细解释:

  1. 建立arguments对象。检查当前上下文中的参数,建立该对象下的属性与属性值。
  2. 检查当前上下文的函数声明,也就是使用function关键字声明的函数。在变量对象中以函数名建立一个属性,属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在,那么该属性将会被新的引用所覆盖。
  3. 检查当前上下文中的变量声明,每找到一个变量声明,就在变量对象中以变量名建立一个属性,属性值为undefined。如果该变量名的属性已经存在,为了防止同名的函数被修改为undefined,则会直接跳过,原属性值不会被修改。
VO和AO

VO 为 Variable Object的缩写,即变量对象
AO 为 Active Object的缩写,即活动对象

未进入执行阶段之前,变量对象中的属性都不能访问!但是进入执行阶段之后,变量对象转变为了活动对象,里面的属性都能被访问了,然后开始进行执行阶段的操作。

变量对象和活动对象有什么区别,就又可以自如的应答了,他们其实都是同一个对象,只是处于执行上下文的不同生命周期。不过只有处于函数调用栈栈顶的执行上下文中的变量对象,才会变成活动对象。

JS代码整个执行阶段分为两个阶段:
  1. 代码编译阶段 由编译器完成,将代码翻译成可执行代码,这个阶段作用域规则会确定。
  2. 代码执行阶段 由引擎完成,主要任务是执行可执行代码,执行上下文在这个阶段创建。
屏幕快照 2019-11-13 23.53.20.png
作用域
  1. 作用域与执行上下文是完全不同的两个概念。
  2. JavaScript中只有全局作用域与函数作用域。(因为eval我们平时开发中几乎不会用到它,这里不讨论)。
  3. 在JavaScript中,我们可以将作用域定义为一套规则,这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称(变量名或者函数名)进行变量查找。

我们知道函数在调用激活时,会开始创建对应的执行上下文,在执行上下文生成的过程中,变量对象,作用域链,以及this的值会分别被确定。

闭包

闭包是一种特殊的对象。
它由两部分组成。执行上下文(代号A),以及在该执行上下文中创建的函数(代号B)。
当B执行时,如果访问了A中变量对象中的值,那么闭包就会产生。
在大多数理解中,包括许多著名的书籍,文章里都以函数B的名字代指这里生成的闭包。而在chrome中,则以执行上下文A的函数名代指闭包。
通过闭包,我们可以在其他的执行上下文中,访问到函数的内部变量。

闭包有两个非常重要的应用场景。分别是模块化与柯里化。

promise

为了我们的代码更加具有可读性和可维护性,我们需要将数据请求与数据处理明确的区分开来。
then(null, function() {}) 就等同于catch(function() {});

相关文章

  • JS基础小记

    变量对象与基础数据类型 JavaScript的执行上下文生成之后,会创建一个叫做变量对象的特殊对象,JavaScr...

  • Mac下全局安装uve环境

    前端JS小记 HTMLCollection 与 NodeList 的区别 HTMLCollection是 HTML...

  • React-Native 随笔

    学习基础: js的基础知识, rect.js基础 JSX语法基础 FlexBox布局 安装 安装node.js下载...

  • 最新web前端相关课程学习链接

    js基础篇 js进阶篇 js高级篇 vue基础篇 vue高级篇 react基础 react高级 Nodejs基础 ...

  • web前端 -- Day23 js高级

    js基础 JavaScript简称:JS JS分三个部分: ECMAScript标准---基础的语法 DOM D...

  • 前端JavaScript面试技巧

    1-1 课程概述 要做什么?——讲解前端 JS 基础面试题 哪些部分?——JS 基础,JS-WEB-API,JS ...

  • 4/07day28_js基础

    day28_js基础 回顾 JS基础语法 JS运算符 JS流程控制语句 条件语句 JS的条件语句和Java语法基本...

  • 2018-12-20

    1.01.尚硅谷_JS基础_JS简介(1) 10.10.尚硅谷_JS基础_Null和Undefined(10) 1...

  • JS基础和WebAPIs的关联性

    学习ECMAscript标准规定的基本语法掌握JS基础语法只学习JS基础做不了网页交互效果学习JS基础语法是为了后...

  • 2019-07-27 前端面试题

    1.js的基础类型 js的基础类型包括 Undefined , Null , String ,Number ,...

网友评论

    本文标题:JS基础小记

    本文链接:https://www.haomeiwen.com/subject/lzklictx.html