js基础_究竟什么是变量对象,什么是活动对象?

时间: 2018-12-02阅读: 59标签: 对象

1.什么是变量对象(Variable Object)

在写程序的时候会定义很多变量和函数,那js解析器是如何找到这些变量和函数的?

变量对象是与执行上下文对应的概念,在执行上下文的创建阶段,它依次存储着在上下文中定义的以下内容:


1.1 函数的所有形参(如果是函数上下文中):

建立arguments对象。检查当前上下文中的参数,建立该对象下的属性与属性值。没有实参的话,属性值为undefined。


1.2. 所有函数声明:(FunctionDeclaration, FD)

检查当前上下文的函数声明,也就是使用function关键字声明的函数。在变量对象中以函数名建立一个属性,属性值为指向该函数所在内存地址的引用。如果变量对象已经存在相同名称的属性,则完全替换这个属性。


1.3. 所有变量声明:(var, VariableDeclaration)

检查当前上下文中的变量声明,每找到一个变量声明,就在变量对象中以变量名建立一个属性,属性值为undefined。如果变量名称跟已经声明的形式参数或函数相同,则变量声明不会干扰已经存在的这类属性。


2.什么是活动对象?(activation object, AO)

只有全局上下文的变量对象允许通过VO的属性名称来间接访问,在其他上下文(后面干脆直接讲函数上下文吧,我们并没有分析eval上下文)中是不能直接访问VO对象的。

在函数上下文中,VO是不能直接访问的,此时由活动对象AO继续扮演VO的角色。

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

因此,对于函数上下文来讲,活动对象与变量对象其实都是同一个对象,只是处于执行上下文的不同生命周期。不过只有处于执行上下文栈栈顶的函数执行上下文中的变量对象,才会变成活动对象。


3.举个例子

说了一堆概念,有点懵,对吗?请看这个例子:

var a = 10;
function b () {
    console.log('全局的b函数')
};
function bar(a, b) {
    console.log('1', a, b) 
    var a = 1
    function b() {
        console.log('bar下的b函数')
    }
    console.log('2', a, b) 
}
bar(2, 3)
console.log('3', a, b)

要想知道为什么会这样打印,首先,从执行上下文的创建阶段来分析变量对象:

// 创建阶段:
// 第一步,遇到了全局代码,进入全局上下文,此时的执行上下文栈是这样
ECStack = [
    globalContext: {
        VO: {
            // 根据1.2,会优先处理全局下的b函数声明,值为该函数所在内存地址的引用
            b: <reference to function>,
            // 紧接着,按顺序再处理bar函数声明,此时根据1.1,因为是在全局上下文中,并不会分析bar函数的参数
            bar: <refernce to function>,
            // 根据1.3,再处理变量,并赋值为undefined
            a: undefined
        }
    }
];
// 第二步,发现bar函数被调用,就又创建了一个函数上下文,此时的执行上下文栈是这样
ECStack = [
    globalContext: {
        VO: {
            b: <reference to function b() {}>, 
            bar: <refernce to function bar() {}>,
            a: undefined
        }
    },
    <bar>functionContext: {
        VO: {
            // 根据1.1,优先分析函数的形参
            arguments: {
                0: 2,
                1: 3,
                length: 2,
                callee: bar
            },
            a: 2,
            // b: 3,
            // 根据1.2, 再分析bar函数中的函数声明b,并且赋值为b函数所在内存地址的引用, 它发现VO中已经有b:3了,就会覆盖掉它。因此上面一行中的b:3实际上不存在了。
            b: <refernce to function b() {}>
            // 根据1.3,接着分析bar函数中的变量声明a,并且赋值为undefined, 但是发现VO中已经有a:2了,因此下面一行中的a:undefined也是会不存在的。
            // a: undefined
        }
    }
]

以上就是执行上下文中的代码分析阶段,也就是执行上下文的创建阶段。再看看执行上下文的代码执行阶又发生了什么。

// 执行阶段:
// 第三步:首先,执行了bar(2, 3)函数,紧接着,在bar函数里执行了console.log('1', a, b)。全局上下文中依然还是VO,但是函数上下文中VO就变成了AO。并且代码执行到这,就已经修改了全局上下文中的变量a.
ECStack = [
    globalContext: {
        VO: {
            b: <reference to function b() {}>, 
            bar: <refernce to function bar() {}>,
            a: 10,
        }
    },
    <bar>functionContext: {
        AO: {
            arguments: {
                0: 2,
                1: 3,
                length: 2,
                callee: bar
            },
            a: 2,
            b: <refernce to function b() {}>
        }
    }
]

// 因此会输出结果: '1', 2, function b() {console.log('bar下的b函数')};

// 第四步:执行console.log('2', a, b)的时候, 发现里面的变量a被重新赋值为1了。
ECStack = [
    globalContext: {
        VO: {
            b: <reference to function b() {}>, 
            bar: <refernce to function bar() {}>,
            a: 10,
        }
    },
    <bar>functionContext: {
        AO: {
            arguments: {
                0: 2,
                1: 3,
                length: 2,
                callee: bar
            },
            a: 1,
            b: <refernce to function b() {}>
        }
    }
]
// 因此会输出结果: '2', 1, function b() {console.log('bar下的b函数')};

// 第五步,执行到console.log('3', a, b)的时候,ECStack发现bar函数已经执行完了,就把bar从ECStack给弹出去了。此时的执行上下文栈是这样的。

ECStack = [
    globalContext: {
        VO: {
            b: <reference to function b() {}>, 
            bar: <refernce to function bar() {}>,
            a: 10,
        }
    }
]

// 因此会输出结果: '3', 10, function b() {console.log('全局的b函数')}

总结一下,变量对象会有以下四种特性:

  1. 全局上下文的变量对象初始化是全局对象(其实这篇文章并没有介绍这个特性,不过它也很简单就这么一句话而已)
  2. 函数上下文的变量对象初始化只包括Arguments对象
  3. 在进入执行上下文的时候会给变量对象添加形参,函数声明,变量声明等初始的属性值
  4. 在代码执行阶段,会再次修改变量对象的属性值。


理解了这些,是不是发现再有一些函数提升,变量提升什么的是不是都很简单了。例如,你可以思考下这三段代码分别发生了什么。

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

javascript Es5面向对象和 Es6面向对象

javascript es6之前的面向对象方法:一般使用构造函数来实现。通过ES6的class 类来创建结果和上面用构造函数创建的是一样的;当然里面也可以写方法 function;用构造函数本身 直接点 ▪ 上的 属性或者 function() 函数 叫静态属性或方法; 一般不会这样做;

js之global 全局对象 方法

global 作为js的全局对象,但其是无法直接访问的,但是在浏览器中浏览器是将这个对象当做是window对象的一部分,即Date 等Global的属性使用window.Date 可访问到

js中arguments对象_理解arguments参数

在js中万物皆对象,甚至数组字符串函数都是对象。所以这个叫做arguments的东西也是个对象,而且是一个特殊的对象,它的属性名是按照传入参数的序列来的,第1个参数的属性名是0,第2个参数的属性名是1,以此类推,并且它还有length属性,

Javascript的对象拷贝

Javascript中对象拷贝的多种方式,以及探究一下深拷贝和浅拷贝。在开始之前,我先提一下一些基础知识:Javascript 的对象只是指向内存中某个位置的指针。这些指针是可变的,也就是说,它们可以重新被赋值。因此,单单复制这个指针的结果是,有两个指针指向内存中的同一块地址。

js包装对象

对象是 JavaScript 语言最主要的数据类型,三种原始类型的值——数值、字符串、布尔值——在一定条件下,也会自动转为对象,也就是原始类型的包装对象。所谓包装对象,就是分别与数值、字符串、布尔值相对应的Number、String、Boolean三个原生对象。

location.hash属性#_window.location.hash 使用

hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分),#是用来指导浏览器动作的,都会被浏览器解读为位置标识符 , 这意味着这些字符都不会被发送到服务器端。对服务器端完全无用。所以,HTTP请求中不包括#。

JS所有内置对象属性和方法汇总

对象,是任何一个开发者都无法绕开和逃避的话题,她似乎有些深不可测,但如此伟大和巧妙的存在,一定值得你去摸索、发现、征服。我们都知道,JavaScript有3大对象,分别是本地对象、内置对象和宿主对象

js获取object对象的长度

我们都知道必须是具体数据类型才有长度,所以size和length都无法测量object对象的长度,那么如何计算对象的长度,即获取对象属性的个数呢?

JavaScript面向对象编程中_优雅的类写法

虽然现在已经是ES6的时代,但是,还是有必要了解下ES5是怎么写一个类的。本文详述JavaScript面向对象编程中的类写法,并分步骤讲述如何写出优雅的类。

如何禁止JavaScript对象重写?

由于JavaScript的灵活性,我们可以轻易地重写(override)一些于其他人定义的对象(object)。换句话说,任何人都可以重写我们所定义的对象。这是一个非常强大的特性,许多开发者都有兴趣试试,来拓展或者修改某些对象的行为。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告合作文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯