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 相关文章推荐
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
JS实现瀑布流布局
Oct 21 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
pm2启动ssr失败的解决方法
Jun 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
关于php内存不够用的快速解决方法
2013/10/26 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
php绘制一条直线的方法
2015/01/24 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
php新建文件的方法实例
2019/09/26 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
React优化子组件render的使用
2019/05/12 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
python中的reduce内建函数使用方法指南
2014/08/31 Python
Python中decorator使用实例
2015/04/14 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
Android笔试题总结
2014/11/29 面试题
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
库房管理员岗位职责
2015/02/12 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript