JavaScript的var关键字

原文 标签 IT工具网 javascript

原问题:What is the function of the var keyword and when to use it (or omit it)?

var关键字是个很蛋疼的点,当初我看到这个问题的时候准备略过的。我不想写这么细的点,觉得价值不大浪费时间,认为只要记住——永远用var——就行。

但认真看了这个问题和众人的解答之后,觉得还是能理出一些JavaScript重要的知识点,同时还不用落入繁杂细节。

首先对var来个总结:

  • var a在当前scope定义一个变量a
  • global scope是window
  • 不使用var的话,a将默认被定义在global scope内
  • a被使用时,JavaScript解释器会由小到大的范围内寻找a的定义

从这几条总结中,再提炼一下涉及到的JavaScript知识点。

Varaiable Scope

ECMAScript在对Variable Statement的定义中提到: > A var statement declares variables that are scoped to the running execution context’s VariableEnvironment. Var variables are created when their containing Lexical Environment is instantiated and are initialized to undefined when created.

因此,var定义的对象是有范围的,这个范围是当前运行的执行上下文的变量环境_(running execution context’s VariableEnvironment)_。

顺藤摸瓜,我们来看看什么是*running execution context*和*VariableEnvironment*。

Running Exucution Contexts

首先来看*Exucution Context*: > 执行上下文,是由ECMAScript的实现*(比如V8)*提供的一个对象,用来追踪代码的执行进度和相关的运行时的值。在代码被执行的任一时刻,都只有一个执行上下文。

打开一个页面,调用一个函数,都会创建一个新的执行上下文。

一个执行上下文包含以下组件:

  • Code evaluation state
  • Function - 当前的上下文是否追踪的是一个函数的执行,否则为null
  • Realm
  • LexicalEnvironment - 词法环境,解析该上下文中的标识符
  • VariableEnvironment - 标识该上下文中由*VariableStatements*创建的变量

VariableEnvironment

初始创建执行上下文的时候,LexicalEnvironmentVariableEnvironment的值是一样的。在代码被执行的过程中,VariableEnvironment始终不变,而LexicalEnvironment会改变。

VariableEnvironment包含以下两部分:

  • 外部变量
    • global variant
    • closure variant
  • 内部var定义的变量

JavaScript引擎维护一个*execution context stack*,当前的*running execution context*始终处于这个栈的顶端。

因此,*Variable Scope*就是指当前的*running execution context*中的*VariableEnvironment*。

VariableEnvironment in Browser

答案中有人说,浏览器中的JavaScript代码是这样被执行的:

with (window) {
    //Your code
}

我试图考证这个说法,但最终还是没找到依据。假设它是成立的,根据ECMAScript中对With的定义: > The with statement adds an object environment record for a computed object to the lexical environment of the running execution context. It then executes a statement using this augmented lexical environment. Finally, it restores the original lexical environment.

window就是浏览器中JavaScript代码的*original lexical environment*,也就是*VariableEnvironment*。

即便不是用with语句包裹,实际经验也能证明这个是成立的。由此第二条和第三条都是成立的。

变量解析

当JavaScript引擎解析到一个语句里的a变量时,如何确定它的值呢?

答案就是在*VariableEnvironment*中查找。

根据前面总结的第四条: > a被使用时,JavaScript解释器会由小到大的范围内寻找最近的a的定义,寻找失败则当a是一个值为undefined的global variant。

也就是说,VariableEnvironment中的变量及其运行时的值,是带scope的

来看一个例子:

/* global scope */
var local = true;
var global = true;

function outer() {
    /* local scope */
    var local = true;
    var global = false;

    /* nearest scope = outer */
    local = !global;

    function inner() {
        /* nearest scope = outer */
        local = false;
        global = false;

        /* nearest scope = undefined */
        /* defaults to defining a global */
        public = global;
    }
}

相关文章:

为什么数学函数Math.round(0.49999999999999994) 返回 1

java通过对象属性对常规对象的ArrayList进行排序

javascript - 如何在输入javascript时向输入元素添加货币模式?

java如何从文件里读取字符串

为什么打印“B”会明显的比打印“#”慢

javascript - 定位:content伪元素后的:first-letter

javascript - 除了明显的布局/CSS问题以外,浏览器兼容性问题?

javascript - 当我在页面加载时使Container/Parent Div .fadeIn断开时,jQuery(和所有#links)断开了-为什么?

单击链接时执行 Javascript 函数?