You Don't Know JS: Scope & Closures (第3章: 函数 vs 块作用域)

Posted 2021-01-10 Mr-chen

第二章，作用域由一系列的bubbles组成。每一个都代表了一个container或bucket，装着被声明的identifiers(variables, functions)。这些bubbles相互嵌套。这种嵌套是在开发阶段写完的。

 

什么制造了一个新的bubble? 只是函数吗？其他的JS结构可以创建bubbles of scope吗？

 

Function Vs. Block Scope

---

 

 

Scope From Functions

探索函数作用域和它的暗示implications.

函数作用域内的所有变量都属于这个函数，并能够反复在这个函数内使用（甚至在嵌套的作用域中）。

这种设计方法非常有用，可以充分利用动态的自然javascript变量， 在需要时携带不同类型的值。

另一方面，如果不小心，变量跨出一个作用域将导致一些意外的陷阱。

 

Hiding in Plain Scope

软件界的设计原则： 最少的特权。最少的暴露。比如为一个对象／模块的API， 你应当只暴露那些必要的代码。

这个原则扩展到：哪个作用域包括变量和函数的选择！

因此，变量／函数不应该都在全局作用域中。这违背了原则！

 

 避免碰撞

无限循环了

function foo() {
    function bar(a) {
        i = 3; // changing the `i` in the enclosing scope\'s for-loop
        console.log( a + i );
    }

    for (var i=0; i<10; i++) {
        bar( i * 2 ); // oops, infinite loop ahead!
    }
}

foo();

 

 

Global "Namespaces"

全局作用域可能发生变量碰撞。比如多个库被引用进你的程序。导致一些函数／变量的名字相同。

可以使用‘namespace’，声明一个对象。在这个对象内使用库的方法：

var MyReallyCoolLibrary = {
    awesome: "stuff",
    doSomething: function() {
        // ...
    },
    doAnotherThing: function() {
        // ...
    }
};

 

 

Module 管理

避免变量碰撞的另一个方法是更现代的module方法。使用相关的managers。

---

 

 

Functions As Scopes

函数作为作用域 。

使用(声明的函数)()；可以立即执行。这个方法用于解决2个问题：

• 1. 只想把函数当作用域，并立即执行代码。
• 2. 函数没有名字。通过(函数)()；就无需名字了，⚠️这个函数只需要执行一次，才能这么写。

理解：

注意用括号（）包裹了函数，因此这个函数不再是一个标准的声明declaration。而是当做函数表达式对待functio-expression。

⚠️，区别declaration和expression，最简单的方法在于function这个词是否位于statment的第一个位置。是的话就是一个函数声明，否则就是函数表达式。

 

关键区别是 函数的名字作为一个identifier绑定在哪里？

var a = 2;

function foo() {　　　　　　　　//绑定在这个enclosing scope， 因此可以直接使用foo()调用这个函数
    var a = 3;
    console.log( a ); // 3
} 
foo(); 

 
(function bar(){  　　　　　　 // 名字bar没有绑定在enclosing scope,而是绑定在自己的函数内。
    var a = 3;　　　　　　　　　// 标志符bar只会在{..}的块作用域中出现。
    console.log( a ); // 3

})();

---

第4章hoisting的一个案例解释了表达式的identifier绑定在内部。
上面的立即执行函数等同于
以上是关于You Don't Know JS: Scope & Closures (第3章: 函数 vs 块作用域)的主要内容，如果未能解决你的问题，请参考以下文章
 
 You Don't Know JS: this & Object Prototypes( 第2章 this)
 You Don't Know JS: Scope & Closures (第4章: Hoisting)
 You Don't Know JS: Scope & Closures (附加：Lexical／dynamic作用域)
 You Don't Know JS: Scope & Closures (第3章: 函数 vs 块作用域)
 You Don't Know JS: this & Object Prototypes( 第一章 this or That?)
 (未完成👃)You Don't Know JS: Scope & Closures (第5章: Scope & Closures)