JavaScript 作用域、命名空间及闭包
变量作用域:
1、一个变量的作用域是程序源代码中定义这个变量的区域
2、在函数内声明的变量是局部变量,它只在该函数及其嵌套作用域里可见(js 函数可嵌套定义);不在任何函数内声明或在函数内不使用 var 或 let 关键字声明的变量是全局变量,它在整个 javascript 程序里都可见
3、javascript 中没有块级作用域,取而代之的是函数作用域
4、局部变量会遮盖全局变量
5、注意变量的声明提前,即所有变量都会把声明提前到它的作用域顶端
6、若使用 let 声明变量,则该变量只属于就近的花括号括起来的语句块!!!
let test = "global"; function fun() { let test = "local"; // 若改成 test = "local"; 则会修改全局变量 test console.log("infun: ", test); } fun(); // 输出 local console.log("outfun: ", test); // 输出 global var j = 10; // 由于声明提前,所以函数内的 j != 10 function check() { var i = 0; // 因为函数作用域,所以会出现声明提前的现象(let 声明除外),即变量声明之前就可以使用,但其值为 undefined console.log("j = ", j); for (var j = 0; j < 5; ++j) i++; console.log("i = ", i, "j = ", j); } check(); // 输出 j = undefined i = 5 j = 5
命名空间:
一般情况下,在 javascript 中是无法声明只在一个代码块内可见的变量(let 可以声明),基于这个原因,我们常常会简单地定义一个函数用作临时的命名空间
// function 前面的左圆括号是必须的,若省略则会将关键字 function 解析为函数声明语句, // 而不是正确地解析为函数定义表达式 var sum = (function () { var a = 2, b = 3; // 在这里面定义的变量无法从外面访问,所以不会污染全局命名空间 return a + b; }()); // 后面的圆括号表示结束函数定义并立即调用它 console.log(sum); // 输出 5
作用域链:
如果将一个局部变量看作是自定义实现的对象的属性的话,每一段 javascript 代码(全局代码或函数)都有一个与之相关的作用域链。这个作用域链是一个对象列表或链表,定义了这段代码“作用域中” 的变量。当 javascript 需要查找某个变量时,它会从链中的第一个对象开始查找,若未找到,则查找下一个对象,以此类推。如果作用域链上没有任何一个对象符合查找内容,则会抛出一个引用错误异常。
let global = "globalone"; function f() { let global = "globaltwo"; function f1() { let global = "globalthree"; } } /* 在这段代码里 global 的值在作用域链里为:globalthree -> globaltwo -> globalone, 若查询代码在 f1 里,则会从 globalthree 开始寻找,若在 f 里,则从 globaltwo 开始寻找 若找不到,则往箭头方向继续寻找下去,箭头反方向对它是不可见的 */
闭包:
函数对象可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数作用域内,这种特性在计算机科学文献中被称为“闭包”。从技术角度讲,所有的 javascript 函数都是闭包
var counter = (function () { var count = 0; return function () { return ++count; }; }()); // 自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。 console.log(counter()); // 输出 1 console.log(counter()); // 输出 2 console.log(counter()); // 输出 3
注:命名空间通常也是一个函数
// 同一个作用域链内定义的闭包会共享同样的私有变量或变量 // 以下代码生成 10 个闭包,所有闭包共享变量 i function constfuncs() { var funcs = []; for (var i = 0; i < 10; ++i) funcs[i] = function () { return i; // 嵌套函数不会将作用域内的私有成员复制一份,也不会对所绑定的变量生成静态快照 }; return funcs; } var funcs = constfuncs(); // 当 constfuncs 返回时 i = 10 console.log(funcs[5]()); // 输出 10
上一篇: 浅析PHP中的UNICODE 编码与解码
下一篇: 留言板(初学者使用js实现)