前言

在上篇《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. MySQL简介及安装

    一.DBA工作内容及课程体系 二.MySQL课程体系介绍 三.DBA的职业素养 四.MySQL简介及安装 01 什么是数据? 02 什么是数据库管理系统 03 数据库管理系统种类 04 MySQL发展 ...

  2. 【转】说说MySQL中的Redo log Undo log都在干啥

    阅读目录(Content) 1 undo 1.1 undo是啥 1.2 undo参数 1.3 undo空间管理 2 redo 2.1 redo是啥 2.2 redo 参数 2.3 redo 空间管理 ...

  3. Spring Boot 框架学习 (一)配置并运行Spring Boot 框架

    下载开发工具: 下载完成打开以后,第一步检查环境 查看jdk是否配置: 接着一定要注意,maven通常情况下它是没有给你配置的,要自行配置: 右键新建: 然后依赖选择web.跟Mybatis就行了. ...

  4. 安装VC++2015运行库时出现0x80240037错误

    很多时候,当我们将开发好的软件部署到用户的机器上时总会出现各种意想不到的错误,最近在一台原版Windows7系统的电脑上安装VC++运行库的时候,莫名的出现安装失败,然后错误代码为:0x8024003 ...

  5. 老男孩python学习自修【第三天】列表用法

    列表的使用: list.append(value) 向列表增加元素 list.insert(index, value) 向列表指定元素插入元素 list.extend(newlist) 用新的列表扩展 ...

  6. QTP 自动货测试桌面程序-笔记(添加控件仓库并关联到action)

    录制或编写脚本前先添加行为对应的控件仓库: 心得:多个测试action使用的同一个窗体的仓库单独放于一个仓库中,可以在多个action中添加关联使用 将同一个窗体的控件只放于一个仓库中,减少使用时的名 ...

  7. Java使用RabbitMQ之整合Spring(消费者)

    依赖包: <!--RabbitMQ集成spring--> <!-- https://mvnrepository.com/artifact/org.springframework.am ...

  8. 【转】console.log 用法

    标签: 转自http://www.cnblogs.com/ctriphire/p/4116207.html 大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是 ...

  9. Serialize a Long as a String

    今天在写接口的时候,用postman测试,返回数据与数据库一一对应,但是给前端返回的结果,除了主键id以外,其他都一样,如下 postman: { "unitPrice": nul ...

  10. react 入坑笔记(四) - React 事件绑定和传参

    React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...