资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/js作用域与命名空间

js作用域与命名空间

antyiwei / 2226人阅读

摘要：全局变量函数内的局部作用域和是函数内的局部变量，而对的赋值将会覆盖全局作用域内的同名变量。命名空间只有一个全局作用域导致的常见错误是命名冲突。另外两种方式结论推荐使用匿名包装器译者注也就是自执行的匿名函数来创建命名空间。

尽管 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 会按照下面顺序查找：

当前作用域内是否有 var foo 的定义。

函数形式参数是否有使用 foo 名称的。

函数自身是否叫做 foo。

回溯到上一级作用域，然后从 #1 重新开始。

  
注意: 自定义 arguments 参数将会阻止原生的 arguments 对象的创建。
命名空间

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

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

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

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

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

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

有一些其他的调用函数表达式的方法，比如下面的两种方式语法不同，但是效果一模一样。

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

推荐使用匿名包装器（译者注：也就是自执行的匿名函数）来创建命名空间。这样不仅可以防止命名冲突，
而且有利于程序的模块化。

另外，使用全局变量被认为是不好的习惯。这样的代码倾向于产生错误和带来高的维护成本。

云服务器 私有云 js 命名空间 js命名空间 js 命名函数空间 js+命名空间树

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85349.html

相关文章

  • ES6 变量作用域与提升：变量的生命周期详解

    摘要：不同的是函数体并不会再被提升至函数作用域头部，而仅会被提升到块级作用域头部避免全局变量在计算机编程中，全局变量指的是在所有作用域中都能访问的变量。 ES6 变量作用域与提升：变量的生命周期详解从属于笔者的现代 JavaScript 开发：语法基础与实践技巧系列文章。本文详细讨论了 JavaScript 中作用域、执行上下文、不同作用域下变量提升与函数提升的表现、顶层对象以及如何避免创建...

    lmxdawn 评论0 收藏0

  • 细说 Javascript 函数篇（六） : 作用域与命名空间

    在之前的介绍中，我们已经知道 Javascript 没有块级作用，只有函数级作用域。 function test() { // a scope for(var i = 0; i < 10; i++) { // not a scope // count } console.log(i); // 10 } Javascript 中也没有显示的命名空间，这就...

    VishKozus 评论0 收藏0

  • 作用域与闭包

    摘要：依然持有对该作用域的引用，而这个引用就叫作闭包。无论通过何种手段将内部函数传递到所在的词法作用域以外，它都会持有对原始定义作用域的引用，无论在何处执行这个函数都会使用闭包。 因为最近项目比较少，闲来觉得需要学习《你不知道的JavaScript》；跟大家分享一下； 什么是作用域 需要一套设计良好的规则来存储变量，并且之后可以方便地找到这些变量。这套规则被称为作用域 执行 var a = ...

    shery 评论0 收藏0

  • 作用域与作用域链

    摘要：作用域首先分为两个部分全局作用域和局部作用域。局部作用域在函数内部声明的变量和函数保存在函数的局部作用域中。作用域链作用域链是因为函数发生了嵌套，当一个函数嵌套在另一个函数内就发生了作用域的嵌套。 1.作用域比较复杂的说法是根据名称来查找变量的一套规则，还有的说法是变量数据的集合。作用域其实是指一个包含了所有在同一个区域声明的变量和函数的集合，那么如何决定这些变量数据和函数是属于同一区...

    Invoker 评论0 收藏0

  • Js基础知识（三） - 作用域与闭包

    摘要：是词法作用域工作模式。使用可以将变量绑定在所在的任意作用域中通常是内部，也就是说为其声明的变量隐式的劫持了所在的块级作用域。 作用域与闭包 如何用js创建10个button标签，点击每个按钮时打印按钮对应的序号？ 看到上述问题，如果你能看出来这个问题实质上是考对作用域的理解，那么恭喜你，这篇文章你可以不用看了，说明你对作用域已经理解的很透彻了，但是如果你看不出来这是一道考作用域的题目，...

    lemanli 评论0 收藏0

发表评论

登陆后可评论

0条评论

antyiwei

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<