当前位置: 首页 > 编程笔记 >

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

燕禄
2023-03-14
本文向大家介绍Javascript学习笔记之函数篇(六) : 作用域与命名空间,包括了Javascript学习笔记之函数篇(六) : 作用域与命名空间的使用技巧和注意事项,需要的朋友参考一下

在之前的介绍中,我们已经知道 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学习笔记之函数篇(五) : 构造函数的使用技巧和注意事项,需要的朋友参考一下 Javascript 中的构造函数与其他语言相比也是不同的。任何通过关键字 new 调用的函数都可以当做构造函数。 在构造函数体内,this 指向新创建的对象。如果构造函数体内没有显示的 return 表达式,那么我们就

  • 本文向大家介绍Javascript学习笔记之函数篇(四):arguments 对象,包括了Javascript学习笔记之函数篇(四):arguments 对象的使用技巧和注意事项,需要的朋友参考一下 每一个 Javascript 函数都能在自己作用域内访问一个特殊的变量 - arguments。这个变量含有一个传递给函数的所有参数的列表。 arguments 对象不是一个数组。尽管在语法上它跟数组

  • 本文向大家介绍Javascript学习笔记之 函数篇(二) : this 的工作机制,包括了Javascript学习笔记之 函数篇(二) : this 的工作机制的使用技巧和注意事项,需要的朋友参考一下 全局作用域下 this; 当在全局作用域中使用 this,它指向全局对象。 这里详细介绍下全局对象: 全局对象(Global object) 是在进入任何执行上下文之前就已经创建了的对象; 这个对

  • 本文向大家介绍Javascript学习笔记之 函数篇(三) : 闭包和引用,包括了Javascript学习笔记之 函数篇(三) : 闭包和引用的使用技巧和注意事项,需要的朋友参考一下 Javascript 中一个最重要的特性就是闭包的使用。因为闭包的使用,当前作用域总可以访问外部的作用域。因为 Javascript 没有块级作用域,只有函数作用域,所以闭包的使用与函数是紧密相关的。 模拟私有变量

  • 本文向大家介绍JavaScript学习笔记之JS函数,包括了JavaScript学习笔记之JS函数的使用技巧和注意事项,需要的朋友参考一下 函数就是包裹在花括号中的代码块,前面使用了关键词function: 函数参数   函数的参数可以任意多个,不用声明变量类型,只用给出变量名: 函数返回值   在函数中使用return语句,函数会停止执行,返回调用它的地方。   函数的返回值也不用声明类型,直接

  • 本文向大家介绍JavaScript 学习笔记之变量及其作用域,包括了JavaScript 学习笔记之变量及其作用域的使用技巧和注意事项,需要的朋友参考一下 一、变量 ECMAscript变量是松散型变量,所谓松散型变量,就是变量名称可以保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符。 定义:var firstDemo; 二、变量的作用域 2.1基本概念 使用var 定义变量:定义该变量的