js作用域与定名空间

2024年1月11日 160次阅读 来源: gecko23

只管 JavaScript 支撑一对花括号建立的代码段，然则并不支撑块级作用域；
而仅仅支撑 函数作用域。

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

注重: 假如不是在赋值语句中，而是在 return 表达式或许函数参数中，{...} 将会作为代码段剖析，
而不是作为对象的字面语法剖析。假如考虑到 自动分号插进去，这能够会致使一些不容易发觉的毛病。

译者注：假如 return 对象的左括号和 return 不在一行上就会失足。

// 译者注：下面输出 undefined
function add(a, b) {
    return 
        a + b;
}
console.log(add(1, 2));

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

每次援用一个变量，JavaScript 会向上遍历悉数作用域直到找到这个变量为止。
假如抵达全局作用域然则这个变量仍未找到，则会抛出 ReferenceError 非常。

隐式的全局变量

// 剧本 A
foo = '42';

// 剧本 B
var foo = '42'

上面两段剧本效果差别。剧本 A 在全局作用域内定义了变量 foo，而剧本 B 在当前作用域内定义变量 foo。

再次强调，上面的效果完整差别，不运用 var 声明变量将会致使隐式的全局变量发生。

// 全局作用域
var foo = 42;
function test() {
    // 部分作用域
    foo = 21;
}
test();
foo; // 21

在函数 test 内不运用 var 关键字声明 foo 变量将会掩盖外部的同名变量。
早先这看起来并非大问题，然则当有不计其数行代码时，不运用 var 声明变量将会带来难以跟踪的 BUG。

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

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

外部轮回在第一次挪用 subLoop 以后就会停止，由于 subLoop 掩盖了全局变量 i。
在第二个 for 轮回中运用 var 声明变量能够防备这类毛病。
声明变量时相对不要脱漏 var 关键字，除非这就是希冀的影响外部作用域的行动。

部分变量

JavaScript 中部分变量只能够经由过程两种体式格局声明，一个是作为函数参数，另一个是经由过程 var 关键字声明。

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

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

    var foo = 3;
    bar = 4;
}
test(10);

foo 和 i 是函数 test 内的部分变量，而对 bar 的赋值将会掩盖全局作用域内的同名变量。

变量声明提拔（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];
    }
}

上面代码在运转之前将会被转化。JavaScript 将会把 var 表达式和 function 声明提拔到当前作用域的顶部。

// 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 表达式被从轮回内移到外部，而且使一些 if 表达式更难看懂。

在本来代码中，if 表达式看起来修正了悉数变量 goo，实际上在提拔划定规矩被应用后，倒是在修正部分变量。

假如没有提拔划定规矩（hoisting）的学问，下面的代码看起来会抛出非常 ReferenceError。

// 搜检 SomeImportantThing 是不是已被初始化
if (!SomeImportantThing) {
    var SomeImportantThing = {};
}

实际上，上面的代码一般运转，由于 var 表达式会被提拔到全局作用域的顶部。

var SomeImportantThing;

// 别的一些代码，能够会初始化 SomeImportantThing，也能够不会

// 搜检是不是已被初始化
if (!SomeImportantThing) {
    SomeImportantThing = {};
}

译者注：在 Nettuts+ 网站有一篇引见 hoisting 的文章，个中的代码很有启发性。

// 译者注：来自 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 重新开始。

注重: 自定义 arguments 参数将会阻挠原生的 arguments 对象的建立。

定名空间

只要一个全局作用域致使的罕见毛病是定名争执。在 JavaScript中，这能够经由过程 匿名包装器 轻松处理。

(function() {
    // 函数建立一个定名空间

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

})(); // 马上实行此匿名函数

匿名函数被认为是 表达式；因而为了可挪用性，它们起首会被实行。

( // 小括号内的函数起首被实行
function() {}
) // 而且返回函数对象
() // 挪用上面的实行效果，也就是函数对象

有一些其他的挪用函数表达式的要领，比方下面的两种体式格局语法差别，然则效果如出一辙。

// 别的两种体式格局
+function(){}();
(function(){}());

结论

引荐运用匿名包装器（译者注：也就是自实行的匿名函数）来建立定名空间。如许不仅能够防备定名争执，
而且有利于顺序的模块化。

别的，运用全局变量被认为是不好的习气。如许的代码倾向于发生毛病和带来高的保护本钱。

    原文作者：gecko23
    原文地址: https://segmentfault.com/a/1190000000736812
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞