JavaScript 链式作用域与变量提升机制详解

JavaScript 链式作用域基础

JavaScript 链式作用域

关于 JavaScript 链式作用域的论述，即便如《JavaScript权威指南》这般权威著作，描述也往往显得冗长，尽管其准确性毋庸置疑：JavaScript 中的函数是在其被定义的作用域内运行，而非在执行时的作用域中运行。

这一概念初看晦涩，但程序设计的核心原则是简化与易理解。掌握 JavaScript 中“一切皆对象”这一经典理念至关重要。

通俗而言，链式作用域是 JavaScript 的一项核心特性：子函数能够访问父函数的所有变量，包括全局变量 window（通常定义的函数 function a(){} 实质上是 window 对象的子函数）。此外，函数定义存在两种略有差异的方式：

var a=function(){}和function a(){}，

关于这两者的具体区别，将在后文进行解释。

因此，Crockford 在《JavaScript语言精粹》中建议，为了养成良好的编码习惯，应在函数内部直接于开头定义变量。这一点与许多其他语言提倡的“尽量推迟变量定义（使用前再定义）”的要求存在显著差异。

变量提升与预编译机制

参考 laruence 提供的示例：

var name = 'laruence';
functionecho(){
   alert(name);
   var name = 'eve';
   alert(name);
   alert(age);
}
 
echo();

该示例具有一定的迷惑性，容易让人误以为输出结果为“laruence,eve,error”，但实际输出为“undefined,eve,error”。关键原因在于 echo() 函数中定义了 var name='eve'。若换一种写法，该示例的逻辑便清晰可见：

var name = 'laruence';
function echo() {
   var name;
   alert(name);
   name = 'eve';
   alert(name);
   alert(age);
}
 
echo();

实际上，上述函数在 JavaScript 引擎解析时，会被处理为如下形式。对于初学者，理解至此已足够；但若具备 Java 等其他语言的编程经验，极易受固有思维束缚（笔者也曾因此受困）。因此，遵循 Crockford 的建议，务必在函数顶部定义变量。

回顾之前提出的问题：

var a=function(){} 与 function a(){} 的区别。

它们的区别与变量定义类似，依然基于“一切皆对象”的原则。

两者在函数调用时基本等价，但若在定义函数前调用，则会出现问题。区别在于等号与 function 关键字：var 和 function 定义在预编译阶段被提前，但 var 仅占位，具体赋值需等待 JavaScript 引擎执行到该行；而 function 定义会在预编译阶段直接放入调用对象中。

函数声明与变量声明的区别

仍需举例说明：

示例一：

alert( echo );//function echo(){return 1;};
function echo(){return 1;};
alert( a );//undefined
var a=function(){return 1;};

由此引申，函数定义也应遵循“先定义后调用”的原则，建议将函数定义置于顶部。

这归根结底是编码习惯问题，JavaScript 中的一些优良习惯与其他语言不同。建议阅读《JavaScript语言精粹》，学习一门语言时，最好从欣赏优秀代码开始。在 JavaScript 学习中，通过一系列充满迷惑性的代码来加深理解实则是一种误区。

this 关键字与调用上下文

另外补充一点，关于 this 关键字，laruence 的解释简洁到位：“谁调用，谁就是 this”。英文版解释更为详尽：“In JavaScript this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of.”，中文解释为：“在 JavaScript 中，this 永远引用我们所执行函数的拥有者，更准确地说，this 引用一个函数的方法对象”。

查看以下示例，同样具有误导性：

function a(){
 g_value="uk";
}
a();
alert(g_value);

实际上，更友好的写法应为：

function a(){
 this.g_value="uk";
}
a();//a.apply(this);
alert(this.g_value);

关于 this 关键字，它与其他语言存在区别。首先，它并非实例的引用，而是调用它的上下文。上述示例中的 a()，等价于 a.apply(this)。

call 和 apply 的用法相同，区别仅在于参数传递方式：一个是一个一个传递参数，另一个则是将参数作为类数组传递（注意此处为类数组）。

感谢阅读，希望能对大家有所帮助，感谢各位对本站的支持！