笔记 07 JS 函数 – 作用域与命名空间

原文地址

函数

函数是JavaScript中的一等对象
=> 可以把函数像其它值一样传递。

作用域与命名空间

尽管 JavaScript 支持一对花括号创建的代码段，
但是并不支持块级作用域； 而仅仅支持 函数作用域。

JavaScript 中没有显式的命名空间定义，
这就意味着所有对象都定义在一个全局共享的命名空间下面。

每次引用一个变量，
JavaScript 会向上遍历整个作用域直到找到这个变量为止。
如果到达全局作用域但是这个变量仍未找到，
则会抛出 ReferenceError 异常。

function test() { // 一个作用域
    for(var i = 0; i < 10; i++) { // 不是一个作用域
        // count
    }
    console.log(i); // 10
}

// 下面输出 undefined
/**
 * [注意] 如果不是在赋值语句中，
 * 而是在 return 表达式或者函数参数中，
 * {...} 将会作为代码段解析，
 * 而不是作为对象的字面语法解析。
 * 如果考虑到 自动分号插入，这可能会导致一些不易察觉的错误。
 */
function add(a, b) {
    return 
        a + b;
}
console.log(add(1, 2));

隐式的全局变量

// 脚本 A
foo = '42';

// 脚本 B
var foo = '42'

/**
 * 脚本 A 在全局作用域内定义了变量 foo，
 * 而脚本 B 在当前作用域内定义变量 foo
 */

// 全局作用域
var foo = 42;
function test() {
    // 局部作用域
    // 不使用 var 声明变量将会导致隐式的全局变量产生。
    // 在函数 test 内不使用 var 关键字声明 foo 变量将会覆盖外部的同名变量。
    foo = 21;
}
test();
foo; // 21

/**
 * 外部循环在第一次调用 subLoop 之后就会终止，
 * 因为 subLoop 覆盖了全局变量 i。
 * 在第二个 for 循环中使用 var 声明变量可以避免这种错误。
 * 声明变量时绝对不要遗漏 var 关键字，
 * 除非这就是期望的影响外部作用域的行为。=> 升级变量
 */

// 全局作用域
var items = [/* 数组 */];
for(var i = 0; i < 10; i++) {
    subLoop();
}

function subLoop() {
    // subLoop 函数作用域
    for(i = 0; i < 10; i++) { // 没有使用 var 声明变量
        // 干活
    }
}

局部变量

JavaScript 中局部变量只可能通过两种方式声明，
一个是作为函数参数，另一个是通过 var 关键字声明。

// 全局变量
var foo = 1;
var bar = 2;
var i = 2;

function test(i) {
    // 函数 test 内的局部作用域
    i = 5;

    var foo = 3;
    bar = 4;
    /**
     * foo 和 i 是函数 test 内的局部变量，
     * 而对 bar 的赋值将会覆盖全局作用域内的同名变量
     */
}
test(10);

变量声明提升（Hoisting）

JavaScript 会提升变量声明。
这意味着 var 表达式
和 function 声明都将会被提升到当前作用域的顶部。

bar();
var bar = function() {};
var someValue = 42;

test();
function test(data) {
    if (false) {
        goo = 1;

    } else {
        var goo = 2;
    }
    for(var i = 0; i < 100; i++) {
        var e = data[i];
    }
}

/*  等同以下  */

// var 表达式被移动到这里
var bar, someValue; // 缺省值是 'undefined'

// 函数声明也会提升
function test(data) {
    var goo, i, e; // 没有块级作用域，这些变量被移动到函数顶部
    if (false) {
        goo = 1;

    } else {
        goo = 2;
    }
    for(i = 0; i < 100; i++) {
        e = data[i];
    }
}

bar(); // 出错：TypeError，因为 bar 依然是 'undefined'
someValue = 42; // 赋值语句不会被提升规则（hoisting）影响
bar = function() {};

test();

// 代码正常运行，因为 var 表达式会被提升到全局作用域的顶部。

// 检查 SomeImportantThing 是否已经被初始化
if (!SomeImportantThing) {
    var SomeImportantThing = {};
}

/* 等同以下 */
var SomeImportantThing;

// 其它一些代码，可能会初始化 SomeImportantThing，也可能不会

// 检查是否已经被初始化
if (!SomeImportantThing) {
    SomeImportantThing = {};
}

// 来自 Nettuts+ 的一段代码，生动的阐述了 JavaScript 中变量声明提升规则
var myvar = 'my value';

(function() {
    alert(myvar); // undefined
    var myvar = 'local value';
})();

名称解析顺序

JavaScript 中的所有作用域，
包括全局作用域，
都有一个特别的名称 this 指向当前对象。

函数作用域内也有默认的变量 arguments，其中包含了传递到函数中的参数。

当访问函数内的 foo 变量时，JavaScript 会按照下面顺序查找：

1. 当前作用域内是否有 var foo 的定义。
2. 函数形式参数是否有使用 foo 名称的。
3. 函数自身是否叫做 foo。
4. 回溯到上一级作用域，然后从 #1 重新开始。

命名空间

只有一个全局作用域导致的常见错误是命名冲突。
在 JavaScript中，这可以通过 匿名包装器 轻松解决。

(function() {
    // 函数创建一个命名空间

    window.foo = function() {
        // 对外公开的函数，创建了闭包
    };

})(); // 立即执行此匿名函数

// 匿名函数被认为是 表达式；
// 因此为了可调用性，它们首先会被执行。

( // 小括号内的函数首先被执行
function() {}
) // 并且返回函数对象
() // 调用上面的执行结果，也就是函数对象

// 另外两种方式
+function(){}();
(function(){}());