因一段JavaScript代码引发的闲扯

电玩女神 2022-08-01 13:43 267阅读 0赞

前两天，一朋友给我发了一段JavaScript代码：

问题的原型在这里：[javascript关于闭包的面试题][javascript]  
这里主要利用两个知识点：**声明提升** 和 **闭包**。  
在JavaScript中，没有用`var`关键字声明的变量均是隐式的全局变量。首先将全局变量声明提前，代码是这样子：

然后根据个人理解来解释一下原因：

var result1=f1();
    var result2=f1();

这里两次调用`f1()`，因返回的`f2`起到了闭包的作用，因而`result1`和`result2`都各自保存对`n`的引用，但是`nAdd`被赋值了两次，后一次赋值覆盖了前一次的值。为了便于解释，引入两个临时变量，当第一次调用`f1`时，代码是这样子的:

第二次调用`f1`时，代码应该是这样子的：

所以当调用`nAdd()`时，只影响`result2`中`n`的值，对`result1`中的`n`没有影响。在后面再对`result1`和`result2`追加一次调用，结果应该是这样子的：

var result1=f1();
        var result2=f1();
    　　result1(); // 999
        result2();//999
    　　nAdd();
      　result1(); // 999
        result2();//1000
        result1(); // 999
        result2();//1001

问题就解释到这里。如果你有其它理解，欢迎留下评论。

查找了关于声明提升和闭包的文章，除了扯一下这两点，也一并扯扯JavaScript中的回调函数、作用域和IIFEs(Immediately-Invoked Function Expressions)。

### 声明提升(Hoisting) ###

对于变量声明或函数表达式。可以看作由两部分组成：声明和赋值。JavaScript隐式地提升**声明部分**到封闭函数的顶部，而将**赋值**留在原地。需要注意的一点是：变量和函数声明存在此特征，但是函数表达式是没有这个特征的。看几段代码就知道这是怎么一回事了。

var x= 0;
    var f=function(){ x=1; };
    f();
    alert(x); 
    function f(){ x = 2; } f();
    alert(x);

猜猜上面的结果是什么？看看下面的等效代码，来校验一下你猜的答案：

var x;
    var y;
    function f(){ x = 2; } x = 0;
    f = function(){ x = 1; } f();
    alert(x); 
    f();
    alert(x);

两次弹出的结果都是1，你猜对了吗？  
再举两个简单的例子来分别说明一下变量声明提升和函数声明提升。

(function() { var foo = 1; alert(foo + " " + bar + " " + baz); var bar = 2; var baz = 3; })();

能猜出结果吗？看看下面的等效代码，来校验一下你猜的答案：

(function() { var foo; var bar; var baz; foo = 1; alert(foo + " " + bar + " " + baz); bar = 2; baz = 3; })();

所以结果是`1`、`undefined`、`undefined`。  
函数声明提前的好处是可以提前调用要定义的函数：

foo();
    function foo() { 
      alert("Hello!");
    }
    //其等效的代码
    function foo() { 
      alert("Hello!");
    }
    foo();

正如之前所说的，函数表达式是没有声明提前的，所以按上述方式调用会出错：

foo();    //undefined is not a function
    var foo = function() {
      alert("Hello!");
    };

### 闭包 ###

闭包是JavaScript最优雅、最具表现力的特性之一。创建闭包的两种常见方式：  
1、将内部函数作为值从外部函数返回

2、利用变量的作用范围形成闭包函数

var F;
    function B() { 
        var temp="abc";
        F=function () { 
            alert("利用变量范围形成闭包函数处理本地变量temp = "+temp);
        }
    }
    B();
    F();

要熟练掌握闭包，就得知道关于它的三个基本事实。  
**事实一：JavaScript允许你引用在当前函数以外定义的变量。**  
ES5中可以用`let`关键字定义块级作用域，但在ES5之前，JavaScript没有块级作用域的概念，只有函数作用域和全局作用域（*try…catch块是能形成块级作用域，异常绑定的变量只作用于catch块*）。在函数外部一般无法访问函数内部定义的局部变量，但是闭包可以。(见上述代码)  
**事实二：即使外部函数已经返回，当前函数仍然可以引用在外部函数所定义的变量。**

function show(temp){ 
        function make(filling){ 
            return temp + " and " + filling;
        }
        return  make;
    }
    var ham = show("ham");
    ham("cheese");    //ham and cheese
    var turkey = show("turkey");
    turkey("swiss");  //turkey and swiss

尽管由相同的`make`函数定义，但是`ham`和`turkey`是两个完全不同的函数，都保持着各自的作用域。  
**事实三：闭包可以更新外部变量的值。**  
这一点在本文开始处已经有体现了。因为**闭包存储的是外部变量的引用而不是值**，所以对于任何具有访问这些外部变量的闭包，都可以更新。

### 作用域 ###

首先看一个嵌套函数的作用域问题：

如果你认为结果是\[“local”,”global”\]和\[“global”\]，那么你就错了。在JavaScript中是没有块级作用域的（至少在ES 6之前，ES6将通过`let`关键字支持[块级作用域][Link 1]），所以返回的结果应该\[“local”,”local”\]和\[“local”\]。但是要模拟一下块级作用域呢？接着看代码：

利用`var`声明和函数表达式就可以模拟块级作用域效果了，但为什么第一组返回\[“local”,”local”\]而不是\[“local”,”global”\]呢？看下面的一段简单代码：

var name = "Pomy"
    function getName(){ 
        var name = "dwqs";
        console.log(name);
    }
    getName();   //"dwqs"

分析一下：首先在全局范围内声明了一个变量`name`，并赋值为Pomy;然后，声明了一个函数`getName`，在其内部定义一个和全局变量同名的变量`name`，并赋值为dwqs；最后调用函数`getName`，在控制台输出dwqs。

在变量作用域中，JavaScript解释器会先在当前的执行域中寻找变量`name`，若找到变量`name`，则使用变量`name`，停止搜寻；反之，则向上一级作用域继续搜寻变量`name`，一直搜寻到顶级作用域，若没有找到变量，则抛出错误。

下面的代码就能很好的解释上面的废话了：

在函数paris中并没有定义`myFriend`变量，则在其父作用域france中搜寻，也没有定义`myFriend`变量，继续向上搜寻，在祖先作用域europe中找到变量，停止搜寻，输出变量的值。

这种查找方式被称为[词法（静态）作用域][Link 2]。程序的静态结构决定了变量的作用域，而变量作用域是由其内部的代码定义的，并且嵌套函数能够接近外部作用域声明的变量。无论是以函数调用还是其它方式调用，其词法（静态）作用域取决于函数在哪里被声明。

对于JavaScript，在多层嵌套的作用中，同名变量是能被识别的，在这种情况下，局部变量优先于全局变量。如果你声明了同名的全局变量和局部变量，当在函数中使用时，局部变量会被优先使用，这种行为被称为遮蔽(*shadowing*)。简单地说，就是局部变量覆盖了全局变量。

var test = "I'm global";
    
    function testScope() { 
      var test = "I'm local";
    
      console.log (test);     
    }
    
    testScope();           // output: I'm local
    console.log(test);     // output: I'm global

最后，看一道[javascript-puzzlers][]的测试题：  
![test][]

结果是21，在JavaScript中，函数参数是绑定到`arguments`对象上的，因而变量的改变和`arguments`的改变都会映射到另一方，即使它们不在同一个作用域。

### 回调函数 ###

在JavaScript中，函数是一等对象，这样造成的结果是函数可以作为参数传递给另一个函数或作为一个函数的返回值。

将函数作为参数或者返回值的函数称为[高阶函数][Link 3]，被作为参数传递的函数称为[回调函数][Link 4]。

回调函数常用的一个方式是当调用`window`对象的`setTimeout`或`setInterval`函数时—它们接收一个回调函数作为参数：

function showMessage(message){ 
      setTimeout(function(){ 
        alert(message);
      }, 3000);  
    }
    showMessage('Function called 3 seconds ago');

[Try out the example in JS Bin][]  
另一个示例是，当为页面上的元素添加事件监听时，需要在事件触发时提供一个回调函数：

// HTML
    <button id='btn'>Click me</button>;
    
    // JavaScript
    function showMessage(){ 
      alert('Woohoo!');
    }
    
    var el = document.getElementById("btn");
    el.addEventListener("click", showMessage);

[Try out the example in JS Bin][Try out the example in JS Bin 1]  
然而理解高阶函数和回调函数最快的方式是自己去创建，因此，现在就创建一个：

function fullName(firstName, lastName, callback){ 
      console.log("My name is " + firstName + " " + lastName);
      callback(lastName);
    }
    
    var greeting = function(ln){ 
      console.log('Welcome Mr. ' + ln);
    };
    
    fullName("Jackie", "Chan", greeting);

[Try out the example in JS Bin][Try out the example in JS Bin 2]  
回调本质上是一种设计模式，并且jQuery(包括其他框架)的设计原则遵循了这个模式。回调函数一般在同步情境下是最后执行的，而在异步情境下有可能不执行，因为事件没有被触发或者条件不满足。

回调函数的使用场合：

*  资源加载：动态加载js文件后执行回调，加载`iframe`后执行回调，`ajax`操作回调，图片加载完成执行回调等等。
 *  `DOM`事件及`Node.js`事件基于回调机制(Node.js回调可能会出现多层回调嵌套的问题)。
 *  `setTimeout`的延迟时间为0，这个hack经常被用到，`setTimeout`调用的函数其实就是一个callback的体现
 *  链式调用：链式调用的时候，在赋值器(setter)方法中(或者本身没有返回值的方法中)很容易实现链式调用，而取值器(getter)相对来说不好实现链式调用，因为你需要取值器返回你需要的数据而不是this指针，如果要实现链式方法，可以用回调函数来实现
 *  `setTimeout`、`setInterval`的函数调用得到其返回值。由于两个函数都是异步的，即：他们的调用时序和程序的主流程是相对独立的，所以没有办法在主体里面等待它们的返回值，它们被打开的时候程序也不会停下来等待，否则也就失去了`setTimeout`及`setInterval`的意义了，所以用`return`已经没有意义，只能使用callback。callback的意义在于将timer执行的结果通知给代理函数进行及时处理。

### IIFEs(Immediately-Invoked Function Expressions) ###

一个[立即执行函数][Link 5]是在创建之后立即执行的函数表达式。

有两种语法稍微有点不同的方式来创建IIFEs：

// variant 1
    
    (function () { 
      alert('Woohoo!');
    })();
    
    // variant 2
    
    (function () { 
      alert('Woohoo!');
    }());

还有很多种方式来创建IEFEs，收集的方式如下：

( function() {}() );
    ( function() {} )();
    [ function() {}() ];
    
    ~ function() {}();
    ! function() {}();
    + function() {}();
    - function() {}();
    
    delete function() {}();
    typeof function() {}();
    void function() {}();
    new function() {}();
    new function() {};
    
    var f = function() {}();
    
    1, function() {}();
    1 ^ function() {}();
    1 > function() {}();

ps:除了能提高一下逼格，基本都没什么用。

关于IEFEs，还需要知道的三件事。  
**1、如果你给函数分配了变量，就不需要将整个函数括放在括号里，因为它已经是一个表达式**

var sayWoohoo = function () { 
      alert('Woohoo!');
    }();

**2、IIFE末尾的分号是必须的，否则代码可能会不正常运行**  
**3、可以给IIFE传递参数（毕竟也是一个函数），可以参考下面的示例：**

(function (name, profession) { console.log("My name is " + name + ". I'm an " + profession + "."); })("Jackie Chan", "actor"); // output: My name is Jackie Chan. I'm an actor.

[Try out the example in JS Bin][Try out the example in JS Bin 3]

将全局对象作为参数传递给IIFE是很普遍的模式，因而它能调用内部函数而不依赖`window`对象，这样能在浏览器环境中保持代码的独立性。不管运行平台是什么，下面的代码将创建一个变量`global`来指向全局对象：

(function (global) {
      // access the global object via 'global'
    })(this);
    </code></pre>
    
    <p>This code will work both in the browser (where the global object is <code>window</code>), or in a Node.js environment (where we refer to the global object with the special variable <code>global</code>). </p>
    
    <p>One of the great benefits of an IIFE is that, when using it, you don’t have to worry about polluting the global space with temporary variables. All the variables you define inside an IIFE will be local. Let’s check this out:</p>
    
    1(function(){
    
      var today = new Date();
      var currentTime = today.toLocaleTimeString();
      console.log(currentTime);   // output: the current local time (e.g. 7:08:52 PM)
    
    })();
    
    console.log(currentTime);   // output: undefined

[Try out the example in JS Bin][Try out the example in JS Bin 4]

是上面的示例中，第一个`console.log()`运行正常，而第二个`console.log()`运行失败，由于IIFE，`today` 和 `currentTime`成了局部变量。

我们都知道，**闭包是保存外部变量的引用，而不是值的副本，因此，它返回外部变量的最新值**。那么，你认为下面的输出会是什么？

[Try out the example in JS Bin][Try out the example in JS Bin 5]

并不是按照我们的期望依次输出数组的四个元素，而是输出四次`undefined`。因为`i`的最新值是4，而`fruits[4]`是`undefined`。

为了修复这个问题，可以把`setTimeout()`放在IIFE中，并提供一个变量来保存`i`的副本：

[Try out the example in JS Bin][Try out the example in JS Bin 6]

另外一种方式是将`i`作为参数传递给IIFE：

**原文：[http://www.ido321.com/1592.html][http_www.ido321.com_1592.html]**

#### **相关文章：** ####

关于闭包最详细的解释：[Javascript Closures][]  
JavaScript的声明提升：[Back to Basics: JavaScript Hoisting][Back to Basics_ JavaScript Hoisting]  
JavaScript的作用域：[Demystifying JavaScript Variable Scope][]  
函数和函数作用域：[Functions][]  
作用域和上下文：[认识javascript中的作用域和上下文][javascript 1]  
回调函数和IIFEs：[Demystifying JavaScript Closures, Callbacks and IIFEs][Demystifying JavaScript Closures_ Callbacks and IIFEs]  
立即调用的函数表达式：[深入理解JavaScript系列（4）：立即调用的函数表达式][JavaScript_4]

[javascript]: http://segmentfault.com/q/1010000002880935
[Link 1]: http://www.sitepoint.com/preparing-ecmascript-6-let-const/
[Link 2]: http://en.wikipedia.org/wiki/Lexical_scoping#Lexical_scoping
[javascript-puzzlers]: http://javascript-puzzlers.herokuapp.com/
[test]: http://7mno74.com1.z0.glb.clouddn.com/2015-06-13_142512.png
[Link 3]: http://en.wikipedia.org/wiki/Higher-order_function
[Link 4]: http://en.wikipedia.org/wiki/Callback_%28computer_programming%29
[Try out the example in JS Bin]: http://jsbin.com/sakiqepato/4/edit?js,console,output
[Try out the example in JS Bin 1]: http://jsbin.com/sakiqepato/5/edit?html,js,console,output
[Try out the example in JS Bin 2]: http://jsbin.com/sakiqepato/6/edit?js,console,output
[Link 5]: http://en.wikipedia.org/wiki/Immediately-invoked_function_expression
[Try out the example in JS Bin 3]: http://jsbin.com/sakiqepato/9/edit?js,console,output
[Try out the example in JS Bin 4]: http://jsbin.com/sakiqepato/10/edit?js,console,output
[Try out the example in JS Bin 5]: http://jsbin.com/sakiqepato/11/edit?js,console,output
[Try out the example in JS Bin 6]: http://jsbin.com/sakiqepato/12/edit?js,console,output
[http_www.ido321.com_1592.html]: http://www.ido321.com/1592.html
[Javascript Closures]: http://jibbering.com/faq/notes/closures/
[Back to Basics_ JavaScript Hoisting]: http://www.sitepoint.com/back-to-basics-javascript-hoisting/
[Demystifying JavaScript Variable Scope]: http://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/
[Functions]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions
[javascript 1]: http://yanhaijing.com/javascript/2013/08/30/understanding-scope-and-context-in-javascript/
[Demystifying JavaScript Closures_ Callbacks and IIFEs]: http://www.sitepoint.com/demystifying-javascript-closures-callbacks-iifes/
[JavaScript_4]: http://www.cnblogs.com/tomxu/archive/2011/12/31/2289423.html