读书笔记-你不知道的JS上-函数作用域与块作用域

函数作用域

  Javascript具有基于函数的作用域,每声明一个函数,都会产生一个对应的作用域。

    //全局作用域包含f1
function f1(a) {
var b = 1;
//f1作用域包含a,b,f2
function f2() {
//f2有自己的
//...代码
}
return a + b;
}
//无法从外部访问内部作用域
console.log(b); //error

  

IIFE

   如果需要封装某些变量,但同时不想多出一个函数名与调用函数,可以使用IIFE,立即执行函数。

    var a = 1;
//为了封装a变量需要声明一个函数并同时调用
function fn() {
var a = 2;
console.log(a); //
}
fn();
console.log(a); //
//可以使用IIFE
(function() {
var a = 2;
console.log(a); //
})();

  当函数被括号包起来时,被当成一个函数表达式了,所以可以立即执行,区分函数声明和函数表达式最简单的方法就是看function关键字是否是第一个词。

    console.log(fn()); //
function fn() {
return 1;
}
console.log(fn2()); //error
//匿名函数表达式 不会提升声明
(function fn2() {
return 1;
})

  匿名函数表达式使用很方便,但是也有几个缺点。

  1、调试时无法根据函数名进行追踪。

  2、没有函数名,调用自身只能使用被废弃的arguments.callee。

  3、缺失可读性。

  所以说,作者建议给匿名函数加个函数名就可以了。

  

  IIFE还有另外一种改进形式。

    (function() {
var a = 1;
console.log(a); //
}());

  这两种功能上是一致的。

  IIFE的一个非常普遍的进阶用法是把它们当做函数调用并传递参数进去。

    var a = 2;
(function(global) {
var a = 1;
console.log(a); //
//将传进去的window更名为global
//使得语义更明确 并且解析全局变量时不会一层层作用域查找
console.log(global.a); //
}(window));

  另外一个应用场景是解决undefined标识符的默认值被错误覆盖。(测试不出undefined可以被改变值,暂不贴代码)

  IIFE还有一种变化的用途是倒置代码的运行顺序。将需要运行的函数放后面,IIFE执行之后当参数传进去。

    var a = 2;
(function IIFE(def) {
def(window);
})(function(global) {
var a = 3;
console.log(a); //
console.log(global.a); //
});
//相当于
(function(global) {
var a = 3;
console.log(a); //
console.log(global.a); //
})(window);

  jQuery源码就是用这种形式,当初一脸懵逼,根本看不懂。。。

块作用域

  除Javascript外很多编程语言都支持块作用域。

    //块状作用域
for (var i = 0; i < 10; i++) {
console.loe(i);
}

  然而,JS并没有,表面上没有。

  1、with语句会创建出块级作用域。

  2、try/catch的catch分句会创建一个块级作用域。

let

  ES6引入了let关键字,提供了另外一种变量声明方式。

  let关键字可以将变量绑定到所在的任意作用域中,简单来说,就是提供了块级作用域。

    {
var a = 1;
}
console.log(a); //
{
let b = 1;
}
console.log(b); //error

  let还有两个特性,首先,不会有变量提升。

    {
console.log(a); //error
let a = 1;
}

  第二个就是暂时性死区。

  简单来说,就是在有let的块级作用域中,变量在声明前被暂时锁住,不允许在声明前进行使用。

    var a = 2; //声明全局变量
{
console.log(a); //还是报错了!
let a = 1;
}

  ES6还提供了const关键字,也可以提供块级作用域,意义参照C++。

上一篇:JavaWeb之Servlet:Cookie 和 Session


下一篇:读书笔记-你不知道的JS上-混入与原型