理解Javascript_13_执行模型详解

函数执行环境
简单的代码:


代码如下:

function say(msg,other){
var str = "nobody say:";
this.name = '笨蛋的座右铭';
function method(){};//var method = function(){};
alert(str+msg);
}
say('hello world');
alert(name);//笨蛋的座右铭

当调用say方法时,第一步是创建其执行环境,在创建执行环境的过程中,会按照定义的先后顺序完成一系列操作:
1.首先会创建一个'活动对象'(Activation Object)。活动对象是规范中规定的另外一种机制。之所以称之为对象,是因为它拥有可访问的命名属性,但是它又不像正常对象那样具有原型(至少没有预定义的原型),而且不能通过 JavaScript 代码直接引用活动对象。
2.为函数调用创建执行环境的下一步是创建一个 arguments 对象,这是一个类似数组的对象,它以整数索引的数组成员一一对应地保存着调用函数时所传递的参数。这个对象也有 length 和 callee 属性(更深入的内容,请参见《理解Javascript_14_函数形式参数与arguments 》)。然后,会为活动对象创建一个名为“arguments”的属性,该属性引用前面创建的 arguments对象。
3.接着,为执行环境分配作用域。作用域由对象列表(链)组成。(比较复杂,请参见:《理解Javascript_15_作用域分配与变量访问规则,再送个闭包》)
4.之后会发生由 ECMA 262 中所谓'活动对象'完成的'变量实例化'(Variable Instatiation)的过程。此时会将函数的形式参数创建为可变对象的命名属性,如果调用函数时传递的参数与形式参数一致,则将相应参数的值赋给这些命名属性(否则,会给命名属性赋 undefined 值)。对于定义的内部函数,会以其声明时所用名称为可变对象创建同名属性,而相应的内部函数则被创建为函数对象并指定给该属性。变量实例化的最后一步是将在函数内部声明的所有局部变量创建为可变对象的命名属性。注:在这个过程中,除了实际参数有值外和函数定义外,其它都被'预解析'为undefined值.
5.最后,要为使用 this 关键字而赋值。(此时的this指向的是全局对象,即window)

执行环境创建成功后,就进入第二步:在函数体内,从上到下执行代码。
1.当执行到var str='nobody say'会发生称之为'计算赋值表达式'的过程,此时,会将活动对象中key为str的值从undefined设置为'nobody say:'。
2.执行到this.name='笨蛋的座右铭'时,会为作为this的对象添加属性name,并赋值为'笨蛋的座右铭'.
3.然后是执行function innerMethod(){};最后执行'alert(str+msg),输出'nobody say:hello world'.

function method(){}与var method = function(){}的区别
简单的代码:


代码如下:

function say(){
method01();//method01
method02();//error
function method01(){
alert('method01');
}
var method02 = function(){
alert('method02');
}
}
say();

为什么调用方法method01能正常运行,而调用方法method02却会报错呢?
  首先,你要明确的知道method01为一个函数对象,而method02为一个变量,它指向于另一个函数对象。根据上一节的内容,在'活动对象'完成的'变量实例化'(Variable Instatiation)的过程中,对函数method01进行了正常的'预解析',而对于变量method02解析为undefined值,当进入到执行代码的环节时,因为method02的调用在其计算函数表达式之前,因此将undefined当作方法调来用,必然会报错。解决方案比较简单,就是将var method02=function(){...}放到其method02()的调用之前就可以了或者是用函数声明的方式定义函数(function method(){...})。
注:计算函数表达式就是指程序执行到var method02 = function(){...}。method02此时真正指向一个函数对象。因为在'预解析'时,method02只被赋于了undefined.

全局执行环境(《执行模型浅析》中已经讲过,不再深入)
  在一个页面中,第一次载入JS代码时创建一个全局执行环境,全局执行环境的作用域链实际上只由一个对象,即全局对象(window),在开始JavaScript代码的执行之前,引擎会创建好这个Scope Chain结构。全局执行环境也会有变量实例化的过程,它的内部函数就是涉及大部分 JavaScript 代码的、常规的顶级函数声明。而且,在变量实例化过程中全局对象就是可变对象,这就是为什么全局性声明的函数是全局对象属性的原因。全局性声明的变量同样如此全局执行环境会使用 this 对象来引用全局对象。

注:区别'函数执行环境'中的活动对象(Activation Object)和全局执行环境中的可变对象(Vriable Object),Variable Object也叫做Activation Object(因为有一些差异存在,所以规范中重新取一个名字以示区别,全局执行环境/Eval执行环境中叫Variable Object,函数执行环境中就叫做Activation Object)。

Eval执行环境
构建Eval执行环境时的可变对象(Variable Object)就是调用eval时当前执行上下文中的可变对象(Variable Object)。在全局执行环境中调用eval函数,它的可变对象(Variable Object)就是全局对象;在函数中调用eval,它的可变对象(Variable Object)就是函数的活动对象(Activation Object)。


代码如下:

//Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
function fn(arg){
var innerVar = "variable in function";
eval(' \
var evalVar = "variable in eval"; \
document.write(arg + "<br />"); \
document.write(innerVar + "<br />"); \
');
document.write(evalVar);
}
fn("arguments for function");

输出结果是:
arguments for function
variable in function
variable in eval
说明: eval调用中可以访问函数fn的参数、局部变量;在eval中定义的局部变量在函数fn中也可以访问,因为它们的Varible Object是同一个对象。
进入Eval Code执行时会创建一个新的Scope Chain,内容与当前执行上下文的Scope Chain完全一样。

最后的实例
代码如下:


代码如下:

var outerVar1="variable in global code";
function fn1(arg1, arg2){
var innerVar1="variable in function code";
function fn2() { return outerVar1+" - "+innerVar1+" - "+" - "+(arg1 + arg2); }
return fn2();
}
var outerVar2=fn1(10, 20);

执行处理过程大致如下:
1. 初始化Global Object即window对象,Variable Object为window对象本身。创建Scope Chain对象,假设为scope_1,其中只包含window对象。
2. 扫描JS源代码(读入源代码、可能有词法语法分析过程),从结果中可以得到定义的变量名、函数对象。按照扫描顺序:
2.1 发现变量outerVar1,在window对象上添加outerVar1属性,值为undefined;
2.2 发现函数fn1的定义,使用这个定义创建函数对象,传给创建过程的Scope Chain为scope_1。将结果添加到window的属性中,名字为fn1,值为返回的函数对象。注意fn1的内部[[Scope]]就是 scope_1。另外注意,创建过程并不会对函数体中的JS代码做特殊处理,可以理解为只是将函数体JS代码的扫描结果保存在函数对象的内部属性上,在函数执行时再做进一步处理。这对理解Function Code,尤其是嵌套函数定义中的Variable Instantiation很关键;
2.3 发现变量outerVar2,在window对象上添加outerVar2属性,值为undefined;
3. 执行outerVar1赋值语句,赋值为"variable in global code"。
4. 执行函数fn1,得到返回值:
4.1 创建Activation Object,假设为activation_1;创建一个新的Scope Chain,假设为scope_2,scope_2中第一个对象为activation_1,第二个对象为window对象(取自fn1的 [[Scope]],即scope_1中的内容);
4.2 处理参数列表。在activation_1上设置属性arg1、arg2,值分别为10、20。创建arguments对象并进行设置,将arguments设置为activation_1的属性;
4.3 对fn1的函数体执行类似步骤2的处理过程:
4.3.1 发现变量innerVar1,在activation_1对象上添加innerVar1属性,值为undefine;
4.3.2 发现函数fn2的定义,使用这个定义创建函数对象,传给创建过程的Scope Chain为scope_2(函数fn1的Scope Chain为当前执行上下文的内容)。将结果添加到activation_1的属性中,名字为fn2,值为返回的函数对象。注意fn2的内部 [[Scope]]就是scope_2;
4.4 执行innerVar1赋值语句,赋值为"variable in function code"。
4.5 执行fn2:
4.5.1 创建Activation Object,假设为activation_2;创建一个新的Scope Chain,假设为scope_3,scope_3中第一个对象为activation_2,接下来的对象依次为activation_1、window 对象(取自fn2的[[Scope]],即scope_2);
4.5.2 处理参数列表。因为fn2没有参数,所以只用创建arguments对象并设置为activation_2的属性。
4.5.3 对fn2的函数体执行类似步骤2的处理过程,没有发现变量定义和函数声明。
4.5.4 执行函数体。对任何一个变量引用,从scope_3上进行搜索,这个示例中,outerVar1将在window上找到;innerVar1、arg1、arg2将在activation_1上找到。
4.5.5 丢弃scope_3、activation_2(指它们可以被垃圾回收了)。
4.5.6 返回fn2的返回值。
4.6 丢弃activation_1、scope_2。
4.7 返回结果。
5. 将结果赋值给outerVar2。

参考:
http://www.cnblogs.com/RicCC/archive/2008/02/15/JavaScript-Object-Model-Execution-Model.html
http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html

(0)

相关推荐

  • 理解Javascript_01_理解内存分配原理分析

    原始值和引用值 在ECMAScript中,变量可以存放两种类型的值,即原始值和引用值. 原始值指的就是代表原始数据类型(基本数据类型)的值,即Undefined,Null,Number,String,Boolean类型所表示的值. 引用值指的就是复合数据类型的值,即Object,Function,Array,以及自定义对象,等等 栈和堆 与原始值与引用值对应存在两种结构的内存即栈和堆 栈是一种后进先出的数据结构,在javascript中可以通过Array来模拟栈的行为 复制代码 代码如下: va

  • 理解Javascript_05_原型继承原理

    prototype与[[prototype]] 在有面象对象基础的前提下,来看一段代码: 复制代码 代码如下: //Animal构造函数 function Animal(name){ this.name = name; } //Animal原型对象 Animal.prototype = { id:"Animal", sleep:function(){ alert("sleep"); } } var dog = new Animal("旺才");

  • 理解Javascript_14_函数形式参数与arguments

    注:在阅读本博文前请先阅读<理解javascript_13_执行模型详解> 注:本文的部分内容是自已的一些推论,并无官文文档作依据,如有错误之后,还望指正. 生涩的代码 我们先来看一段比较生涩的代码: 复制代码 代码如下: function say(msg,other,garbage){ alert(arguments[1]);//world var other = 'nice to meet you!'; var msg; alert(arguments.length); alert(msg

  • 理解Javascript_06_理解对象的创建过程

    简单的代码 我们先来看一段简单的代码: 复制代码 代码如下: function HumanCloning(){ } HumanCloning.prototype ={ name:'笨蛋的座右铭' } var clone01 = new HumanCloning(); alert(clone01.name);//'笨蛋的座右铭' alert(clone01 instanceof HumanCloning);//true HumanCloning.prototype = {}; alert(clon

  • 理解Javascript_03_javascript全局观

    先来看一张图吧: 解释一下: 核心(ECMAScript):定义了脚本语言的所有对象,属性和方法 文档对象模型(DOM):HTML和XML应用程序接口 浏览器对象模型(BOM):对浏览器窗口进行访问操作 现在来具体的讲一个各个成分: 关于ECMAScript ECMAScript的工作是定义语法和对象,从最基本的数据类型.条件语句.关键字.保留字到异常处理和对象定义都是它的范畴. 在ECMAScript范畴内定义的对象也叫做原生对象. 其实上它就是一套定义了语法规则的接口,然后由不同的浏览器对其

  • 理解Javascript_10_对象模型

    对象模型 红色虚线表示隐式Prototype链. 这张对象模型图中包含了太多东西,不少地方需要仔细体会,可以写些测试代码进行验证.彻底理解了这张图,对JavaScript语言的了解也就差不多了.下面是一些补充说明: 1. 图中有好几个地方提到build-in Function constructor,这是同一个对象,可以测试验证: 复制代码 代码如下: //Passed in FF2.0, IE7, Opera9.25, Safari3.0.4 Function==Function.constr

  • 理解Javascript_12_执行模型浅析

    简单的开始 简单的代码: 复制代码 代码如下: <script type="text/javascript" src="xxx.js"></script> <script type="text/javascript"> var i = 10; function say(msg){ alert(msg); } </script> <script type="text/javascrip

  • 理解Javascript_15_作用域分配与变量访问规则,再送个闭包

    作用域分配与变量访问规则 在 ECMAScript 中,函数也是对象.函数对象在变量实例化过程中会根据函数声明来创建,或者是在计算函数表达式或调用 Function 构造函数时创建.(关于'函数对象'请见<理解Javascript_08_函数对象>).每个函数对象都有一个内部的 [[scope]] 属性,这个属性也由对象列表(链)组成.这个内部的[[scope]] 属性引用的就是创建它们的执行环境的作用域链,同时,当前执行环境的活动对象被添加到该对象列表的顶部.当我们在函数内部访问变量时,其实

  • 理解Javascript_07_理解instanceof实现原理

    那么instanceof的这种行为到底是如何实现的呢,现在让我们揭开instanceof背后的迷雾. instanceof原理 照惯例,我们先来看一段代码: 复制代码 代码如下: function Cat(){} Cat.prototype = {} function Dog(){} Dog.prototype ={} var dog1 = new Dog(); alert(dog1 instanceof Dog);//true alert(dog1 instanceof Object);//t

  • 理解Javascript_11_constructor实现原理

    constructor是什么 简单的理解,constructor指的就是对象的构造函数.请看如下示例: 复制代码 代码如下: function Foo(){}; var foo = new Foo(); alert(foo.constructor);//Foo alert(Foo.constructor);//Function alert(Object.constructor);//Function alert(Function.constructor);//Function 对于foo.con

  • 理解Javascript_08_函数对象

    函数对象 首先,大家得明确一个概念:函数就是对象,代表函数的对象就是函数对象.既然是对象,那它又是被谁构造出来的呢?下面我们来看一段描述:JavaScript代码中定义函数,或者调用Function创建函数时,最终都会以类似这样的形式调用Function函数:var newFun=Function(funArgs, funBody); .由此可知函数对象是由Function这个函数对象构造出来的. 注:Function对象本身也是一个函数,因此它也一个函数对象.关于Function的深入理解,请

  • 理解Javascript_02_理解undefined和null

    来自普遍的回答: 其实在 ECMAScript 的原始类型中,是有Undefined 和 Null 类型的. 这两种类型都分别对应了属于自己的唯一专用值,即undefined 和 null. 值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的,通过下列代码可以验证这一结论: alert(undefined == null); //true 尽管这两个值相等,但它们的含义不同. undefined 是声明了变量但未对其初始化时赋予该变量的值,n

  • 理解Javascript_09_Function与Object

    注:理论过于深入,本人不改保证所有的理论都是正确的,但经过多方测试还未发现实际代码与理论冲突的问题.如有错误,望高人指点! Function 首先回顾一下函数对象的概念,函数就是对象,代表函数的对象就是函数对象.所有的函数对象是被Function这个函数对象构造出来的.也就是说,Function是最顶层的构造器.它构造了系统中所有的对象,包括用户自定义对象,系统内置对象,甚至包括它自已.这也表明Function具有自举性(自已构造自己的能力).这也间接决定了Function的[[call]]和[

随机推荐