Javascript学习笔记之函数篇(六) : 作用域与命名空间


Posted in Javascript onNovember 23, 2014

在之前的介绍中,我们已经知道 Javascript 没有块级作用,只有函数级作用域。

function test() { // a scope

    for(var i = 0; i < 10; i++) { // not a scope

        // count

    }

    console.log(i); // 10

}

Javascript 中也没有显示的命名空间,这就意味着一切都定义在全局作用域中。每一次引用一个变量时,Javascript 会往上遍历整个全局作用域直到找到该变量。如果遍历完整个全局作用域仍然没有找到该变量,则抛出一个 ReferenceError 错误。

请输入图片描述

隐式全局变量

// script A

foo = '42';

// script B

var foo = '42'

上面的两个例子产生不一样的效果。第一个将在全局作用域中定义变量 foo,而第二个则在当前作用域定义变量 foo。
我们一定要注意,如果不使用关键字 var 将会带来意想不到的影响。

// global scope

var foo = 42;

function test() {

    // local scope

    foo = 21;

}

test();

foo; // 21

由于在函数 test 内没用 var 来定义变量 foo,所以将覆盖函数外部的全局变量 foo。尽管看上去不是什么大问题,但是如果有成千上万行代码时,这将是个难以追踪的 bug。

// global scope

var items = [/* some list */];

for(var i = 0; i < 10; i++) {

    subLoop();

}

function subLoop() {

    // scope of subLoop

    for(i = 0; i < 10; i++) { // missing var statement

        // do amazing stuff!

    }

}

上例中,外部的循环将会在执行第一次的时候就停止,这是因为 subloop 函数内部的变量 i 将会覆盖外部的全局变量 i。我们只需要在函数内部加上一个 var 就可以避免这个错误,所以我们在定义变量时一定不要忘记加上关键字 var。除非我们确实希望对外部的全局变量造成影响。

局部变量

Javascript 中局部变量只可以通过两个方式产生,一是通过关键字 var 来声明,一是作为函数的形参。

// global scope

var foo = 1;

var bar = 2;

var i = 2;

function test(i) {

    // local scope of the function test

    i = 5;

    var foo = 3;

    bar = 4;

}

test(10);

此时,函数 test 内部的变量 i 和 foo 是局部变量,而 bar 则会覆盖外部的全局变量 bar。

提升(Hoisting)

Javascript 将会提升变量声明,这就意味着 var 表达式和函数声明都将被提升到作用域的顶部。

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 表达式和函数 test 的声明都将提升至顶部,因此程序将正常运行并不会报错。

// var statements got moved here

var bar, someValue; // default to 'undefined'

// the function declaration got moved up too

function test(data) {

    var goo, i, e; // missing block scope moves these here

    if (false) {

        goo = 1;

    } else {

        goo = 2;

    }

    for(i = 0; i < 100; i++) {

        e = data[i];

    }

}

bar(); // fails with a TypeError since bar is still 'undefined'

someValue = 42; // assignments are not affected by hoisting

bar = function() {};

test();

由于 Javascript 没有块级作用域,这不仅将提升 var 表达式,同时也会使得 if 结构变得不够直观。
在上例中,尽管看上去 if 在对全局变量 goo 进行操作,实际上,由于变量 goo 被提升,所以修改的是局部变量。
如果没有对提升规则有所了解,你可能会认为下面的代码将会抛出 ReferenceError 错误。

// check whether SomeImportantThing has been initialized

if (!SomeImportantThing) {

    var SomeImportantThing = {};

}

当然上面的代码是没有错误的,因为在代码在运行前,var 表达式已经被提升到顶部。

var SomeImportantThing;

// other code might initialize SomeImportantThing here, or not

// make sure it's there

if (!SomeImportantThing) {

    SomeImportantThing = {};

}

这里要推荐下 @nightire 凡哥的博文 《理解 JavaScript(二)》,里面对提升的讲解非常透彻。
名称解析顺序

当尝试在一个函数作用域内访问一个 foo 变量时,Javascript 将会按照下面的顺序查找:

当前作用域内是否有 var foo 的定义。
函数形参中是否有 foo 变量。
函数自身的名称是否为 foo。
跳到外层定义域,再从第一部开始查找起。
命名空间

一个最常见的问题就是命名冲突,这是因为 Javascript 只有一个全局作用域所带来的。但这个问题可以通过匿名的外部函数解决。

(function() {

    // a self contained "namespace"

    window.foo = function() {

        // an exposed closure

    };

})(); // execute the function immediately

上例中的匿名函数被认为是表达式,所以它们会被执行。

( // evaluate the function inside the parentheses

function() {}

) // and return the function object

() // call the result of the evaluation

当然我们也可以用其他方式来调用函数表达式,不同的结构,但是同样的效果。

// A few other styles for directly invoking the 

!function(){}()

+function(){}()

(function(){}());

// and so on...

总结

建议大家使用匿名的外部函数来将代码封装到空间内,这样不仅可以解决命名空间的冲突,同时也有利于程序的模块化。
此外,使用全局变量不是一个好习惯,这将带来高成本的维护代价而且容易产生错误。

命名空间同类型、函数、变量、模板等都属于实体(entity)。
实体的主要的共性是,可以具有名称。(此外,标签也可以具有名称,但它不是实体。)
而命名空间作用域是作用域中的一类统称,和块作用域、类作用域、函数原型作用域、函数作用域(仅对标签有效)并列。命名空间内声明的名称在命名空间作用域中。全局名称被认为在隐含的全局命名空间作用域中。

命名空间作用确实就是作用域,但是,他又不同于简单的作用域,你可以分多次在多处声明同一个命名空间,但是里面的内容不能重定义,他们最终都会合成一个命名空间,就像std,到处宏定义

Javascript 相关文章推荐
js模拟类继承小例子
Jul 17 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 #Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 #Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 #Javascript
js实例属性和原型属性示例详解
Nov 23 #Javascript
JS常用函数使用指南
Nov 23 #Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 #Javascript
理解jQuery stop()方法
Nov 21 #Javascript
You might like
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
js实现tab切换效果
2017/02/16 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
python单例模式原理与创建方法实例分析
2019/10/26 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
python实现xml转json文件的示例代码
2020/12/30 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
2014年廉洁自律承诺书
2014/05/26 职场文书
学校社会实践活动总结
2014/07/03 职场文书
基层党支部整改方案
2014/10/25 职场文书
2014年度个人总结范文
2015/03/09 职场文书
女性健康讲座主持词
2015/07/04 职场文书
生产车间管理制度
2015/08/04 职场文书
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS