理解JavaScript中的函数

落日映苍穹つ 2022-06-13 04:06 291阅读 0赞

本文旨在提供web开发人员必须了解的所有JavaScript函数的基本知识。函数于软件开发者而言并不是什么奇幻世界。如果你的日常活动涉及到编码，哪怕是一点点，那么在一天结束的时候，你一定创建/修改了一个或多个函数。简而言之函数只不过是一组执行某个操作的语句。函数可能会有一些输入参数（在函数体中使用），并在执行后返回值。

JavaScript函数也具有这些特性，但它们不仅仅是常规函数。JavaScript函数是对象，几乎JavaScript中的所有一切都是对象。

## **1、定义函数** ##

作为对象，JavaScript函数可能会有属性和其他函数（方法）。让我们来看看JavaScript中的一个典型的函数定义。

function myNotSoGreatFunc(visitor) { 
       console.log("Welcome to Code Morning Mr. " + visitor);
    }

**函数定义从关键字function开始，然后是函数名，空的或有参数的括号。实际的函数代码（JavaScript语句）被封装在一对花括号内\{ \}。对于函数而言，return语句是可选的。JavaScript函数总是会返回一个值。当function主体中没有return语句时，那么function返回undefined。函数体内部的语句在执行时，一旦执行到return时，函数就执行完毕，并将结果返回**。

由于JavaScript的函数也是一个对象，上述定义的myNotSoGreatFunc()函数实际上是一个函数对象，而函数名myNotSoGreatFunc可以视为指向该函数的变量。因此，第二种定义函数的方式如下：

var myNotSoGreatFunc = function(visitor) { 
       console.log("Welcome to Code Morning Mr. " + visitor);
    };

在这种方式下，function (visitor) \{ … \}是一个匿名函数，它没有函数名。但是，这个匿名函数赋值给了变量myNotSoGreatFunc，所以，通过变量myNotSoGreatFunc就可以调用该函数。

上述两种定义完全等价，注意第二种方式按照完整语法需要在函数体末尾加一个分号，表示赋值语句结束。

当你想传递一个函数作为参数给另一个函数时，函数表达式就非常方便了。让我们用一个简单的例子来试着了解这一点。

首先我已经创建了两个匿名函数。第一个返回两个数的加法运算，第二个返回两个数的乘法运算。相当简单，没有什么可值得炫耀的地方。然后，我定义函数calculate，这个函数接受函数作为第一个参数后跟两个参数接受两个数字。

我可以通过传递任意函数作为第一个参数来调用函数calculate。

var sum = calculate(add, 2, 3); // sum = 5
    var multiplication = calculate(multiply, 2, 3); // multiplication = 6

你可以看到将函数作为参数传递是多么容易。这种模式在AJAX中大量使用，当你在AJAX调用完成后，传递回调函数处理成功或失败的场景时就用到了这种将函数作为参数传递的情况。

## **2、函数的参数** ##

JavaScript是非常灵活的，调用函数时，函数的参数数量可以比要求的更少或更多。如果你调用的函数的参数比声明的少，那么缺少的参数被设置为undefined。

function callMe(a, b, c) { 
       console.log("c is " + typeof c);
    }
    
    callMe("Code", "Morning"); 
    // Output: "c is undefined"
    callMe("Learn", "JavaScript", "Functions"); 
    // Output: "c is string"

所有的JavaScript函数有一个特殊的对象，叫做arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array。该对象可以被用来访问单个参数或获得传递到函数的参数总数。

function callMe() { 
       var i;
       for (i = 0; i < arguments.length; i++) {
          console.log(arguments[i]);
       }
       console.log("Total arguments passed: " + arguments.length);
    }

此函数假设没有传递任何参数，但就像我说的，你可以传递任何数量的参数到JavaScript函数中。我可以像这样调用这个函数：

callMe("Code", "Morning", "Mr. Programmer");
    // Output":
    // Code
    // Morning
    // Mr. Programmer
    // Total arguments passed: 3

每个参数可以从arguments对象作为一个数组项被访问。被传递给函数的arguments的总数可从arguments.length属性获得。实际上arguments最常用于判断传入参数的个数。你可能会看到这样的写法：

// foo(a[, b], c)
    // 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null：
    function foo(a, b, c) { 
        if (arguments.length === 2) {
            // 实际拿到的参数是a和b，c为undefined
            c = b; // 把b赋给c
            b = null; // b变为默认值
        }
        // ...
    }

要把中间的参数b变为“可选”参数，就只能通过arguments判断，然后重新调整参数并赋值。

由于JavaScript函数允许接收任意个参数，于是我们就不得不用arguments来获取所有参数：

为了获取除了已定义参数a、b之外的参数，我们不得不用arguments，并且循环要从索引2开始以便排除前两个参数，这种写法很别扭，只是为了获得额外的rest参数，有没有更好的方法？

ES6标准引入了rest参数，上面的函数可以改写为：

function foo(a, b, ...rest) { 
        console.log('a = ' + a);
        console.log('b = ' + b);
        console.log(rest);
    }
    
    foo(1, 2, 3, 4, 5);
    // 结果:
    // a = 1
    // b = 2
    // Array [ 3, 4, 5 ]
    
    foo(1);
    // 结果:
    // a = 1
    // b = undefined
    // Array []

rest参数只能写在最后，前面用…标识，从运行结果可知，传入的参数先绑定a、b，多余的参数以数组形式交给变量rest，所以，不再需要arguments我们就获取了全部参数。

如果传入的参数连正常定义的参数都没填满，也不要紧，rest参数会接收一个空数组（注意不是undefined）。

因为rest参数是ES6新标准，所以你需要测试一下浏览器是否支持。

你是C++或C\#程序员吗？你见过使用默认参数的函数吗？也许你会回答yes！ ECMAScript 6带来了JavaScript的这一特性，就是你可以定义带有默认参数的函数。

function greetMyVisitors(name, profession = "The cool programmer") { 
        alert("Welcome Mr. " + name + ", " + profession);
    }

该函数有礼貌地地迎接了博客访问者。它有两个参数name 和profession，并在消息框中显示一个欢迎消息。如果在调用过程中没有参数（或“undefined”）传递，那么第二个参数取用默认值。

greetMyVisitors("Justin Bieber", "The singer"); 
    // Shows the message "Welcome Mr. Justin Bieber, The singer"
    
    greetMyVisitors("Bob Martin"); 
    // Shows the message "Welcome Mr. Bob Martin, The cool programmer"
    
    greetMyVisitors("John Papa", undefined); 
    // Shows the message "Welcome Mr. John Papa, The cool programmer"

## **3、注意return语句** ##

JavaScript引擎有一个在行末自动添加分号的机制，这可能让你栽到return语句的一个大坑：

function foo() { 
        return { name: 'foo' };
    }
    
    foo(); // { name: 'foo' }

如果把return语句拆成两行：

function foo() { 
        return
            { name: 'foo' };
    }
    
    foo(); // undefined

要小心了，由于JavaScript引擎在行末自动添加分号的机制，上面的代码实际上变成了：

function foo() { 
        return; // 自动添加了分号，相当于return undefined;
            { name: 'foo' }; // 这行语句已经没法执行到了
    }

所以正确的多行写法是：

function foo() { 
        return { // 这里不会自动加分号，因为{表示语句尚未结束
            name: 'foo'
        };
    }

## **4、立即执行函数** ##

IIFE是被立即调用执行的匿名函数表达式。IIFE看上去像这样：

(function() { // Your awesome code here }());

所有你要做的就是创建一个匿名函数，在函数定义后马上放一对圆括号以调用函数，最后将所有代码封装在另一对圆括号中。最外层的括号将它里面的所有一切转变成一个表达式，因为括号不能包含JavaScript语句。函数定义后面的圆括号则立即调用函数。

IIFE块中定义的任何变量或函数对块而言是本地的，并且不能被这个范围以外的任何代码改变。

看看IIFE的这个例子。此函数没有调用也会自动执行。

(function() { console.log("I run on my own."); }());

只需复制并粘贴代码，看看在浏览器控制台中的输出。如果你不知道去哪里找浏览器控制台，那么只要在浏览器窗口中按下F12就会出现开发者工具。跳转console选项卡以查看console.log语句的所有输出。

IIFE是一个在代码中创建局部范围的很好方法。它们可以帮助你保护变量和函数，以避免被应用程序的其他部分更改或覆盖。

## **5、变量的作用域** ##

在JavaScript中，用var申明的变量实际上是有作用域的。如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量：

'use strict';
    
    function foo() { 
        var x = 1;
        x = x + 1;
    }
    
    x = x + 2; // ReferenceError! 无法在函数体外引用变量x

如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响：

'use strict';
    
    function foo() { 
        var x = 1;
        x = x + 1;
    }
    
    function bar() { 
        var x = 'A';
        x = x + 'B';
    }

由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行：

'use strict';
    
    function foo() { 
        var x = 1;
        function bar() { 
            var y = x + 1; // bar可以访问foo的变量x!
        }
        var z = y + 1; // ReferenceError! foo不可以访问bar的变量y!
    }

如果内部函数和外部函数的变量名重名怎么办？

'use strict';
    
    function foo() { 
        var x = 1;
        function bar() { 
            var x = 'A';
            alert('x in bar() = ' + x); // 'A'
        }
        alert('x in foo() = ' + x); // 1
        bar();
    }

这说明JavaScript的函数在**查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量**。

## **6、变量提升** ##

**JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部**：

'use strict';
    
    function foo() { 
        var x = 'Hello, ' + y;
        alert(x);
        var y = 'Bob';
    }
    
    foo();

虽然是strict模式，但语句var x = ‘Hello, ’ + y;并不报错，原因是变量y在稍后申明了。但是alert显示Hello, undefined，说明变量y的值为undefined。**这正是因为JavaScript引擎自动提升了变量y的声明，但不会提升变量y的赋值**。

对于上述foo()函数，JavaScript引擎看到的代码相当于：

function foo() { 
        var y; // 提升变量y的申明
        var x = 'Hello, ' + y;
        alert(x);
        y = 'Bob';
    }

由于JavaScript的这一怪异的“特性”，**我们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量**：

function foo() {
        var
            x = 1, // x初始化为1
            y = x + 1, // y初始化为2
            z, i; // z和i为undefined
        // 其他语句:
        for (i=0; i<100; i++) {
            ...
        }
    }

## **7、全局作用域** ##

不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性：

'use strict';
    
    var course = 'Learn JavaScript';
    alert(course); // 'Learn JavaScript'
    alert(window.course); // 'Learn JavaScript'

因此，直接访问全局变量course和访问window.course是完全一样的。

你可能猜到了，由于函数定义有两种方式，以变量方式var foo = function () \{\}定义的函数实际上也是一个全局变量，因此，顶层函数的定义也被视为一个全局变量，并绑定到window对象：

'use strict';
    
    function foo() { 
        alert('foo');
    }
    
    foo(); // 直接调用foo()
    window.foo(); // 通过window.foo()调用

进一步大胆地猜测，我们每次直接调用的alert()函数其实也是window的一个变量：

'use strict';
    
    window.alert('调用window.alert()');
    // 把alert保存到另一个变量:
    var old_alert = window.alert;
    // 给alert赋一个新函数:
    window.alert = function () { }
    
    alert('无法用alert()显示了!');
    // 恢复alert:
    window.alert = old_alert;
    alert('又可以用alert()了!');

这说明JavaScript实际上只有一个全局作用域。任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误。

全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。

减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：

// 唯一的全局变量MYAPP:
    var MYAPP = {};
    
    // 其他变量:
    MYAPP.name = 'myapp';
    MYAPP.version = 1.0;
    
    // 其他函数:
    MYAPP.foo = function () { 
        return 'foo';
    };

把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。许多著名的JavaScript库都是这么干的：jQuery，YUI，underscore等等。

## **8、没有语句块级别的变量作用域** ##

由于**JavaScript的变量作用域实际上是函数内部，我们在for循环等语句块中是无法定义具有块级作用域的变量的**：

'use strict';
    
    function foo() { 
        for (var i=0; i<100; i++) {
            //
        }
        i += 100; // 仍然可以引用变量i
    }

为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量：

'use strict';
    
    function foo() { 
        var sum = 0;
        for (let i=0; i<100; i++) {
            sum += i;
        }
        i += 1; // SyntaxError
    }

## **9、函数绑定为对象的方法** ##

在一个对象中绑定函数，称为这个对象的方法。在JavaScript中，对象的定义是这样的：

var xiaoming = {
        name: '小明',
        birth: 1990
    };

但是，如果我们给xiaoming绑定一个函数，就可以做更多的事情。比如，写个age()方法，返回xiaoming的年龄：

var xiaoming = {
        name: '小明',
        birth: 1990,
        age: function () { 
            var y = new Date().getFullYear();
            return y - this.birth;
        }
    };
    
    xiaoming.age; // function xiaoming.age()
    xiaoming.age(); // 今年调用是27,明年调用就变成28了

绑定到对象上的函数称为方法，和普通函数也没啥区别，但是它在内部使用了一个this关键字，这个东东是什么？

在一个方法内部，this是一个特殊变量，它始终指向当前对象，也就是xiaoming这个变量。所以，this.birth可以拿到xiaoming的birth属性。

让我们拆开写：

function getAge() { 
        var y = new Date().getFullYear();
        return y - this.birth;
    }
    
    var xiaoming = {
        name: '小明',
        birth: 1990,
        age: getAge
    };
    
    xiaoming.age(); // 27, 正常结果
    getAge(); // NaN

单独调用函数getAge()怎么返回了NaN？请注意，我们已经进入到了JavaScript的一个大坑里。

JavaScript的函数内部如果调用了this，那么这个this到底指向谁？

答案是，视情况而定！

如果以对象的方法形式调用，比如xiaoming.age()，该函数的this指向被调用的对象，也就是xiaoming，这是符合我们预期的。

**　　如果单独调用函数，比如getAge()，此时，该函数的this指向全局对象，也就是window**。

更坑爹的是，如果这么写：

var fn = xiaoming.age; // 先拿到xiaoming的age函数
    fn(); // NaN

也是不行的！要保证this指向正确，必须用obj.xxx()的形式调用！

由于这是一个巨大的设计错误，要想纠正可没那么简单。ECMA决定，**在strict模式下让函数的this指向undefined**，因此，在strict模式下，你会得到一个错误：

'use strict';
    
    var xiaoming = {
        name: '小明',
        birth: 1990,
        age: function () { 
            var y = new Date().getFullYear();
            return y - this.birth;
        }
    };
    
    var fn = xiaoming.age;
    fn(); // Uncaught TypeError: Cannot read property 'birth' of undefined

这个决定只是让错误及时暴露出来，并没有解决this应该指向的正确位置。

有些时候，喜欢重构的你把方法重构了一下：

'use strict';
    
    var xiaoming = {
        name: '小明',
        birth: 1990,
        age: function () { 
            function getAgeFromBirth() { 
                var y = new Date().getFullYear();
                return y - this.birth;
            }
            return getAgeFromBirth();
        }
    };
    
    xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined

结果又报错了！原因是this指针只在age方法的函数内指向xiaoming，在函数内部定义的函数，this又指向undefined了！（在非strict模式下，它重新指向全局对象window！）

修复的办法也不是没有，我们**用一个that变量首先捕获this**：

'use strict';
    
    var xiaoming = {
        name: '小明',
        birth: 1990,
        age: function () { 
            var that = this; // 在方法内部一开始就捕获this
            function getAgeFromBirth() { 
                var y = new Date().getFullYear();
                return y - that.birth; // 用that而不是this
            }
            return getAgeFromBirth();
        }
    };
    
    xiaoming.age(); // 27

**用var that = this;，你就可以放心地在方法内部定义其他函数，而不是把所有语句都堆到一个方法中**。

--------------------

在这篇文章中，我几乎已经涵盖了有关函数的所有内容。函数被认为是JavaScript中的一等公民，理解函数可能是最重要的事情，如果你想掌握JavaScript的话。

本文转载自：[深入理解JavaScript中的函数][JavaScript]以及[廖雪峰的JavaScript教程函数篇][JavaScript 1]

[JavaScript]: http://www.codeceo.com/article/javascript-function-coding.html?ref=myread
[JavaScript 1]: http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344992519683bcfa2e33760462fb5db8eb9430924be000