前言

在上篇《javascript深入之执行上下文栈》中讲到,当javascript代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution context)。

对于每个执行上下文,都有三个重要属性:

  • 变量对象(variable object, VO)
  • 作用域链(scope chain)
  • this

今天重点讲讲创建变量对象的过程。

变量对象

变量对象是与执行上下文相关的数据作用域,存储了在上下文中定义的变量和函数声明。

因为不同执行上下文下的变量对象稍有不同,所以我们聊聊全局上下文下的变量对象和函数上下文下的变量对象。

全局上下文

我们先了解一个概念,叫全局对象。在w3c中也有介绍:

全局对象是预定义的对象,作为javscript的全局函数和全局属性的占位符。通过使用全局对象,可以访问所有其他预定义的对象,函数和属性。

在顶层 javascript 代码中,可以用关键字this 引用全局对象。 因为全局对象是作用域链的头,这意味着所有非限定性的变量和函数名都回作为该对象的属性来查询。

例如,当javascript代码引用parseInt()函数时,它引用的是全局对象的parseInt属性,全局对象是作用域链的头,还意味着在顶层javascript代码中声明的所有变量都将成为全局对象的属性。

如果看的不是很懂的话,容我再来介绍下全局对象:

1.可以通过this引用,在客户端javascript中,全局对象就是window对象。

console.log(this)

2.全局对象是由Object构造函数实例化的一个对象。

console.log(this instanceof Object)

3.预定义一堆,一大堆函数和属性。

console.log(Math.random())
console.log(this.Math.random())

4.作为全局变量的宿主。

var a = 1;
console.log(this.a)

5.客户端javascript中,全局对象有window属性指向自身。

var a = 1;
console.log(window.a) this.window.b = 2;
console.log(this.b)

花了一个大篇幅介绍全局对象,其实就想说:

全局上下文中的变量对象就是全局对象

函数上下文

在函数上下文中,我们用活动对象(activation object, AO)来表示变量对象。

活动对象和变量对象其实是一个东西,只是变量对象是规范上的或者说是引擎实现上的,不可在javascript环境中访问,只有当进入一个执行上下文中,这个执行上下文的变量对象才会被激活,所以才叫 activation object。而只有被激活的变量对象,也就是活动对象上的各种属性才能被访问。

活动对象是在进入函数上下文时刻被创建的,它通过函数的arguments属性初始化。arguments属性值是Argument对象。

执行过程

执行上下文的代码会分成两个阶段进行处理,分析和执行,我们也可以叫做:

  1. 进入执行上下文
  2. 代码执行

进入执行上下文

当进入执行上下文时,这时候还没有执行代码,

变量对象会包括:

  1. 函数的所有形参(如果是函数上下文)
  • 由名称和对应值组成的一个变量对象的属性被创建
  • 没有实参,属性值为undefined
  1. 函数声明
  • 由名称和对应值(undefined)组成一个变量对象的属性被创建;
  • 如果变量对象已经存在相同名称的属性,则完全替换这个属性
  1. 变量声明
  • 由名称和对应值(undefined)组成一个变量对象的属性被创建;
  • 如果变量名称跟已经声明的形式参数或函数相同,则变量声明不会干扰已经存在的这类属性

举个例子:

function foo(a){
var b = 2;
function c(){}
var d = function(){}
b = 3;
}
foo(1)

在进入执行上下文后,这时候的AO是:

AO = {
arguments: {
0: 1,
length: 1
},
a: 1,
b: undefined,
c: reference to function c(){},
d: undefined
}

代码执行

在代码执行阶段,会顺序执行代码,根据代码,修改变量对象的值

还是上面的例子,当代码执行完后,这时候的AO是:

AO = {
arguments: {
0: 1,
length: 1
},
a: 1,
b: 3,
c: reference to function c(){},
d: reference to FunctionExpression "d"
}

到这里变量对象的创建过程就介绍完了,让我们简洁的总结我们上述所说:

  1. 全局上下文的变量对象初始化是全局对象
  2. 函数上下文的变量对象初始化只包括Arguments对象
  3. 在进入执行上下文时会给变量对象添加形参。函数声明、变量声明等初始化的属性值
  4. 在代码执行阶段,会再次修改变量对象的属性值

思考题

最后让我们看几个例子:

1.第一题

function foo(){
console.log(a);
a = 1;
}
foo() // ??? function bar(){
a = 1;
console.log(a)
}
bar() // ???

第一段会报错: Uncaught ReferenceError: a is not defined。

第二段打印:1

这是因为函数中的 ‘a’ 并没有通过var 关键字声明,所以不会被存放在AO中。

第一段执行console的时候,AO的值是:

AO = {
arguemnts: {
length:0
}
}

没有a的值,然后就会到全局去找,全局也没有,所以会报错。

当第二段执行console时,全局对象已经被赋予了a的属性,这时候就可以从全局找到a的值,所以会打印1.

2.第二题

console.log(foo)

function foo(){
console.log('foo')
}
var foo = 1

结果会打印函数,而不是undefined

这是因为在进入执行上下文时,首先会处理函数的声明,其次会处理变量声明,如果变量名称跟已经声明的形式参数或函数相同,则变量声明不会干扰已经存在的这类属性。

参考文章:https://github.com/mqyqingfeng/Blog/issues/2

JavaScript深入之变量对象的更多相关文章

  1. javascript系列之变量对象

    原文:javascript系列之变量对象 引言 一般在编程的时候,我们会定义函数和变量来成功的构造我们的系统.但是解析器该如何找到这些数据(函数,变量)呢?当我们引用需要的对象时,又发生了什么了? 很 ...

  2. JavaScript深入之变量对象(转载)

    前言 在上篇<JavaScript深入之执行上下文栈>中讲到,当 JavaScript 代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(executio ...

  3. 关于javascript中的变量对象和活动对象

    https://segmentfault.com/a/1190000010339180 https://zhuanlan.zhihu.com/p/26011572 https://www.cnblog ...

  4. JavaScript学习系列之执行上下文与变量对象篇

    一个热爱技术的菜鸟...用点滴的积累铸就明日的达人 正文 在上一篇文章中讲解了JavaScript内存模型,其中有提到执行上下文与变量对象的概念.对于JavaScript开发者来说,理解执行上下文与变 ...

  5. JavaScript:变量对象(Variable Object)

    引言:在使用JavaScript编程的时候,避免不了声明函数和变量,但是我们很少知道解释器是如何并且在什么地方找到这些函数和变量的,我们在引用这些对象的时候究竟发生了什么? 对ECMAScript程序 ...

  6. javascript 执行环境,变量对象,作用域链

    前言 这几天在看<javascript高级程序设计>,看到执行环境和作用域链的时候,就有些模糊了.书中还是讲的不够具体. 通过上网查资料,特来总结,以备回顾和修正. 要讲的依次为: EC( ...

  7. JavaScript的作用域和变量对象

    变量对象 先来说说什么是变量对象.变量对象中又存储了什么东西吧. JavaScript中的运行环境包含全局运行环境和函数运行环境这两种,每进入到一个运行环境都会创建一个变量对象,这个对象中记录了在当前 ...

  8. JavaScript 执行环境(执行上下文) 变量对象 作用域链 上下文 块级作用域 私有变量和特权方法

    总结自<高程三>第四章  理解Javascript_12_执行模型浅析   JS的执行环境与作用域  javascript高级程序第三版学习笔记[执行环境.作用域] 在javascript ...

  9. javascript 之变量对象-09

    变量对象 变量对象:每个执行环境(执行上下文)都有一个对应的变量对象(variable object),环境中(执行上下文中)定义的所有变量.函数都保存在这个对象中. 在上篇中说到,当执行流执行一个函 ...

随机推荐

  1. Day 5-2 类的继承和派生,重用

    类的继承 派生 在子类中重用父类 组合 抽象类 定义: 继承指的是类与类之间的关系,是一种什么“是”什么的关系,继承的功能之一就是用来解决代码重用问题. 继承是一种创建新类的方式,在python中,新 ...

  2. C# Note29: Close()和Dispose()的区别

    待更! 深入解析Close()和Dispose()的区别

  3. npm install、npm install --save、npm install --save --dev、npm install -S、npm install -D的区别

    npm install X: 会把X包安装到node_modules目录中 不会修改package.json 之后运行npm install命令时,不会自动安装X npm install X –sav ...

  4. 死锁问题分析(个人认为重点讲到了gap间隙锁,解决了我一些不明报死锁的问题)

    线上某服务时不时报出如下异常(大约一天二十多次):“Deadlock found when trying to get lock;”. Oh, My God! 是死锁问题.尽管报错不多,对性能目前看来 ...

  5. 莫烦scikit-learn学习自修第四天【内置训练数据集】

    1. 代码实战 #!/usr/bin/env python #!_*_ coding:UTF-8 _*_ from sklearn import datasets from sklearn.linea ...

  6. 【.NET】.NET MVC4 微信扫一扫功能实现-附全部代码

    写在前面的    首先在调用微信的JS-SDK接口的时候需要仔细阅读一下官方的注意事项,否则可能事倍功半.这里先大概概述一下主要的流程,首先,使用微信扫一扫需要一个已经通过认证的公众号:其次,需要知道 ...

  7. eclipse中将Java项目转换为JavaWeb项目

    eclipse导入一些war项目后,会以java项目形式存在,因此我们需要将java项目转换成web项目,不然项目也许会报错. 1.右键已经导入的项目,选择properties. 2.选中projec ...

  8. Socket初见

    前端代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t ...

  9. Nginx GoAccess安装与配置

    1.下载并安装Geoip $ wget https://github.com/maxmind/geoip-api-c/releases/download/v1.6.12/GeoIP-1.6.12.ta ...

  10. FPGA时序分析相关

    什么叫时序? 时间与动作的相互关系,什么时间干什么活. 同步时序:单一时钟源,所有寄存器在单一时钟源下同步工作. 异步时序:多个时钟源,除使用带时钟的触发器之外,还可以使用不带时钟的触发器与延时元件作 ...