JavaScript Variable Object Part 2: VO in different execution contexts

Variable objects in different execution contexts

Some operations (such as variable initialization) and behaviors of variable objects are common to all types of execution contexts. From this perspective, it is easier to understand variable objects as abstract basic things. Additional content related to variable objects is also defined in the function context.

抽象变量对象VO (变量初始化过程的一般行为)
  ║
  ╠══> 全局上下文变量对象GlobalContextVO
  ║        (VO === this === global)
  ║
  ╚══> 函数上下文变量对象FunctionContextVO
           (VO === AO, 并且添加了<arguments>和<formal parameters>)

Let’s take a look in detail:

Variable objects in the global context

First, we need to give the global object a clear definition:

The global object (Global object) is created before entering any execution context Object. There is only one copy of this object, and its properties can be accessed anywhere in the program. The life cycle of the global object ends at the moment the program exits.

In the initial creation phase of the global object, Math, String, Date, parseInt are used as its own attributes, and other attributes are initialized. It can also have other additionally created objects as attributes (which can point to the global object itself). For example, in the DOM, the window property of the global object can refer to the global object itself (of course, not all specific implementations are like this):

global = {
  Math: <...>,
  String: <...>
  ...
  ...
  window: global //引用自身
};

When accessing the properties of the global object, the prefix is ​​usually ignored. This is because Global objects are not directly accessible by name. However, we can still access the global object through this of the global context, and we can also refer to itself recursively. For example, window in DOM. To sum up, the code can be abbreviated as:

String(10); // 就是global.String(10);
  
// 带有前缀
window.a = 10; // === global.window.a = 10 === global.a = 10;
this.b = 20; // global.b = 20;

So, back to the variable object in the global context - here, the variable object is the global object itself:

VO(globalContext) === global;

It is very necessary to understand the above conclusion, Based on this principle, only when a correspondence is declared in the global context, we can access it indirectly through the properties of the global object (for example, without knowing the variable name in advance).

var a = new String('test');
  
alert(a); // 直接访问，在VO(globalContext)里找到："test"
  
alert(window['a']); // 间接通过global访问：global === VO(globalContext): "test"
alert(a === this.a); // true
  
var aKey = 'a';
alert(window[aKey]); // 间接通过动态属性名称访问："test"

Variable objects in function context

In function execution context, VO cannot be accessed directly. At this time, the activation object (abbreviated as AO) plays the role of VO.

VO(functionContext) === AO;

The active object is created when entering the function context, and it is initialized through the arguments attribute of the function. The value of the arguments attribute is the Arguments object:

AO = {
  arguments: <ArgO>
};

The Arguments object is a property of the active object, which includes the following properties:

callee — a reference to the current function

length — the number of parameters actually passed

properties-indexes ( Integer of type string) The value of the attribute is the parameter value of the function (arranged from left to right in the parameter list). The number of elements inside properties-indexes is equal to arguments.length. The value of properties-indexes is shared with the parameters actually passed in.

For example:

function foo(x, y, z) {
  
  // 声明的函数参数数量arguments (x, y, z)
  alert(foo.length); // 3
  
  // 真正传进来的参数个数(only x, y)
  alert(arguments.length); // 2
  
  // 参数的callee是函数自身
  alert(arguments.callee === foo); // true
  
  // 参数共享
  alert(x === arguments[0]); // true
  alert(x); // 10
  
  arguments[0] = 20;
  alert(x); // 20
  
  x = 30;
  alert(arguments[0]); // 30
  
  // 不过，没有传进来的参数z，和参数的第3个索引值是不共享的
  z = 40;
  alert(arguments[2]); // undefined
  
  arguments[2] = 50;
  alert(z); // 40
}
  
foo(10, 20);

The code for this example has a bug in the current version of Google Chrome - even if the parameter z is not passed, z and arguments[2] are still shared.