一段简单的JavaScript代码思考

先看一段简单的代码,打印结果是??为什么why??

从上述打印结果不难看出,在打印基本变量num、函数表达式fn、函数声明fun时,就已经知道变量num、函数表达式fn值为undefined,函数声明fun值为function

但这样会存在一个疑问?js在代码执行之前打印时(变量、函数表达式、函数声明)就存在值,那么在打印(变量、函数表达式、函数声明)之前究竟发了什么??

【答案是变量对象、执行上下文代码的2个阶段】

(当然 打印在基本变量num、函数表达式fn、函数声明fun之后结果是不言自明的)

变量对象 variable object

如果变量与执行上下文相关,那么它自己应该知道它的数据存储在哪里和如何访问。这种机制被称作 变量对象(variable object).

一个变量对象完全有可能用正常的ECMAScript对象的形式来表现

VO = {};

VO就是执行上下文的属性(property)

activeExecutionContext = {
VO: {
// context data (var, FD, function arguments)
arguments 函数的所有形式参数
FunctionDeclaration 函数的声明
variable Declaration 变量声明
}
};

处理上下文代码的2个阶段

    1. 进入执行上下文(代码执行之前时)
    2. 执行代码

变量对象的修改变化与这两个阶段紧密相关

(个人理解标注 变量对象与执行上下文关系强调是代码执行前后过程中变量对象的变化)

为了更好的理解执行上下文分阶段处理(包括进入执行上下文、执行代码)我们来看下下面test函数执行上下文分阶段处理过程

var a = 10;
function test(x) {
var b = 20;
};
test(30);

在上述代码第5行代码,调用test激活函数至第3行代码之前时(包括第3行) x 值为 30, b值undefined

其对应变量对象简单表示如下

// Variable object of the global context
VO(globalContext) = {
a: 10,
test:
};
// Variable object of the "test" function context
VO(test functionContext) = {
x: 30,
b:undefined
};  

执行test函数第3行代码后,函数test未弹出栈时,其对应的变量对象如下

// Variable object of the global context
VO(globalContext) = {
a: 10,
test:
};
// Variable object of the "test" function context
VO(test functionContext) = {
x: 30,
b: 20
};

由于在函数执行上下文中,VO是不能直接访问的,此时由激活对象(activation object,缩写为AO)扮演VO的角色。

(标注 这里激活可以理解调用函数, 现实中更形象例子向水中投入石子,一石激起千层浪)

VO(functionContext) === AO;    

且 执行上下文的属性(property)

activeExecutionContext = {
VO: {}
}

于是上述函数执行上下文中变量对象表示代码修改成如下形式

// Variable object of the global context
activeExecutionContext = {
// Variable object of the global context
AO(globalContext) = {
a: 10,
test:
};
// Variable object of the "test" function context
VO(test functionContext) = {
x: 30,
b: 20
};
}

变量对象VO(variable object)就是执行上下文的属性(property)

变量对象中的变量在执行上下文中默认次序变量声明在顺序上跟在函数声明和形式参数声明之后

activeExecutionContext = {
VO: {
// context data (var, FD, function arguments)
arguments 函数的所有形式参数(如果我们是在函数执行上下文中)
(变量对象的一个属性,这个属性由一个形式参数的名称和值组成;如果没有对应传递实际参数,那么这个属性就由形式参数的名称和undefined值组成)
FD 所有函数声明(FunctionDeclaration, FD)变量对象的一个属性,这个属性由一个函数对象(function-object)的名称和值组成;如果变量对象已经存在相同名称的属性,则完全替换这个属性。
VD 所有变量声明(var, VariableDeclaration)
变量对象的一个属性,这个属性由变量名称和undefined值组成;如果变量名称跟已经声明的形式参数或函数相同,则变量声明不会干扰已经存在的这类属性。
}
};

代码体现

alert(x); // function
var x = 10;
alert(x); // 10
x = 20;
function x() {};
alert(x); // 20 

Tom大叔 深入理解JavaScript系列(12):变量对象(Variable Object

英文地址 : ECMA-262-3 in detail.Chapter 2.Variable object
中文地址 [JavaScript]ECMA-262-3 深入解析.第二章.变量对象

读汤姆大叔《JavaScript变量对象》笔记的更多相关文章

  1. 我读汤姆大叔的深入理解js(一)

    前言 闲来看看javascript,在圆子里发现了汤姆大叔的文章,先是整体瞄了几眼,感觉不错,然后细细研读.记录下自己的学习历程和个人理解.更重要的是作为笔记 高质量JS代码 在看汤姆大叔的这一系列文 ...

  2. 汤姆大叔 javascript 系列 第20课 最后的5到javascript题目

    博客链接:http://www.cnblogs.com/TomXu/archive/2012/02/10/2342098.html 原题: 大叔注:这些题目也是来自出这5个题目的人,当然如果你能答对4 ...

  3. 我读汤姆大叔的深入理解js(二)

    继续汤姆大叔的js之旅. 揭秘命名函数表达式 函数表达式和函数声明 汤姆大叔在博客中引用ECMA规范:函数声明必须带有标识符,函数表达式可以省略.对于我来说这些概念的东西真是不所适从.还是大叔的实例带 ...

  4. 读汤姆大叔《深入理解javascript系列》笔记一编写高质量代码

    感觉大叔的博文真的是很不错 我打算严格要求自己 按照大叔说的,这样我就会更有规范,更有思想的去工作 去写代码(一入代码深似海)   1,尽可能的少用全局变量(污染全局空间,也会和别人的代码 发生冲突造 ...

  5. 根本没有“JSON“对象这回事(读汤姆大叔博文记录)

    1.字面量 (1)他们是固定的值,不是变量,让你从“字面上”理解脚本. (2)字符串字面量是由双引号("")或单引号('')包围起来的零个或多个字符串组成的. (3)对象字面量是由 ...

  6. 汤姆大叔的6道javascript编程题题解

    看汤姆大叔的博文,其中有篇(猛戳这里)的最后有6道编程题,于是我也试试,大家都可以先试试. 1.找出数字数组中最大的元素(使用Math.max函数) var a = [1, 2, 3, 6, 5, 4 ...

  7. 看了汤姆大叔的“你真懂JavaScript吗?”的一些感慨

    看了汤姆大叔的“你真懂JavaScript吗?”,里面有5道题目,我都一一作了,然后在chrome的控制台里面运行了一遍,虽然只错了一道,但还是细细读了下答案,在此总结一下,看看是否对大家对这些Jav ...

  8. [转载]深入理解JavaScript系列 --汤姆大叔

    深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力. 深入理解JavaScript系列(1):编写高质量JavaScript ...

  9. 汤姆大叔的6道js题目

    汤姆大叔的6道javascript编程题题解 看汤姆大叔的博文,其中有篇(猛戳这里)的最后有6道编程题,于是我也试试,大家都可以先试试. 1.找出数字数组中最大的元素(使用Math.max函数) 1 ...

随机推荐

  1. 【ASP.NET MVC】MVC概述

    描述 本篇文章主要概述ASP.NET MVC,具体包括如下内容: 1.MVC模式概述 2.WebForm概述 3.WebForm与MVC区别 4.ASP.NET MVC发展历程 5.运用程序结构 6. ...

  2. ABP 教程文档 1-1 手把手引进门之 ASP.NET Core & Entity Framework Core(官方教程翻译版 版本3.2.5)

    本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 官方文档分四部分 一. 教程文档 二.ABP 框架 三.zero 模块 四.其他(中文翻译资源) 本篇是第一部分的第一篇. 第一部分分三篇 1- ...

  3. Sagit.Framework For IOS 开发框架入门教程4:注册页布局-被消灭的变量

    前言: 上篇写完:Sagit.Framework For IOS 开发框架入门教程3:Start引导页-框架布局和隐藏事件的内幕 之后,好久没写文章了,有IT连创业系列.有DotNetCore的一篇文 ...

  4. webpack加载多级依赖时css、html文件不能正确resolve的问题

    在使用webpack+avalon以及avalon的mmRouter做SPA的时候,碰到一个困扰数周的问题:webpack加载多级依赖时出现了css文件和模板(html)文件不能正确resolve.原 ...

  5. Data Base mongodb高版本与低版本的区别

    mongodb高版本与低版本的区别 一.mongodb引擎: Mongodb 3.0支持用户自定义存储引擎,用户可配置使用mmapv1或者wiredTiger存储引擎. 3.2版本以后默认的开启的是w ...

  6. 【Linux】Linux学习笔记(完结)

    前言 在工作中发现Linux系统的重要性,于是计划重温下Linux,顺便记录笔记方便之后查阅. 磁盘分区 在Linux系统中,每个设备都被当成一个文件来对待:如IDE接口的硬盘文件名为/dev/hd[ ...

  7. JavaWeb之数据源连接池(3)---Tomcat

    此文续 <JavaWeb之数据源连接池(2)---C3P0>. Apache Tomcat作为一款JavaWeb服务器,内置了DBCP数据源连接池.在使用中,只要进行相应配置即可. 首先, ...

  8. echarts中如何使用timeline组件

    1.吃碗面 这里关于echarts3 官网的示例我不得不吐槽一下,逼格真高!一小部分示例动不动数据就是国家统计局搞出来的,你脸真大.当然他们做的示例的确是很好,这一点毫无疑问.当我看了echarts3 ...

  9. ArcGIS API for JavaScript 4.2学习笔记[14] 弹窗的位置、为弹窗添加元素

    这一节我们来看看弹窗的位置和弹窗上能放什么. 先一句话总结: 位置:可以随便(点击时出现或者一直固定在某个位置),也可以指定位置 能放什么:四种,文字.媒体(图片等).表格.附件. [Part I 位 ...

  10. js-使用JavaScript、jQuery两种方式实现全选/全不选

    html代码 <input type='checkbox' value="10" name="frust"/>苹果10元 <br/> & ...