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 相关文章推荐
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
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中计算字符串相似度的函数代码
2012/12/29 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
lib.utf.js
2007/08/21 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
Python循环语句中else的用法总结
2016/09/11 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
实例详解Python模块decimal
2019/06/26 Python
python datetime中strptime用法详解
2019/08/29 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
python压包的概念及实例详解
2021/02/17 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
100%羊绒:NakedCashmere
2020/08/26 全球购物
教师实习自我鉴定
2013/12/14 职场文书
自我评价是什么
2014/01/04 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
会议开幕词
2015/01/28 职场文书
学子宴致辞大全
2015/07/27 职场文书
主婚人致辞精选
2015/07/28 职场文书
Pandas数据类型之category的用法
2021/06/28 Python
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js