JavaScript权威指南

函数本身就是一段JavaScript代码，定义一次但可能被调用任意次。如果函数挂载在一个对象上，作为对象的一个属性，通常这种函数被称作对象的方法。用于初始化一个新创建的对象的函数被称作构造函数。

相对于其他面向对象语言，在JavaScript中的函数是特殊的，函数即是对象。JavaScript可以把函数赋值给变量，或者作为参数传递给其他函数，甚至可以给它们设置属性等。

JavaScript的函数可以嵌套在其他函数中定义，这样定义的函数就可以访问它们外层函数中的任何变量。这也就是所谓的“闭包”，它可以给JavaScript带来强劲的编程能力。

1.函数定义

function函数语句函数表达式

//一.函数语句类：
//打印对象所有属性名称和值。
function printprops(obj) {
    for (var key in obj) {
        console.log(key + "：" + obj[key]);
    }
}
//计算阶乘的递归函数，函数名称将成为函数内部的一个局部变量。
function factorial(n) {
    if (n <= 1) return 1;
    return n * factorial(n);
}
//二.函数表达式类：
//计算n的平方的函数表达式。这里将一个函数赋给一个变量。
var square = function (x) { return x * x; }
//兔子数列。函数表达式也可以包含名称，方便递归。
var foo = function foo(n) {
    if (n <= 1) return 1;
    else foo(n - 1) + foo(n - 2);
}
//数组元素升序排列。函数表达式也能作为参数传递给其他函数。
var data = [5, 3, 7, 2, 1];
data.sort(function (a, b) { return a - b; });
//函数表达式有时定义后立即调用。
var tensquared = (function (x) { return x * x; }(10));

函数命名
函数名称要求简洁、描述性强，因为这样可以极大改善代码的可读性，方便别人维护代码；函数名称通常是动词或以动词开头的词组。通常来说，函数名编写有两种约定：

likeThis()like_this()

项目中编写方法名时尽量选择一种保持代码风格一致。还有，对于一些私有函数（不作为公用API的一部分），这种函数通常以一条下划线作为前辍。

2.函数调用

函数声明后需要通过调用才能被执行。JavaScript中通常有4种方式来调用函数：

call()apply()

下面就通过一些具体示例来演示上述4中函数的调用方式。

1.对于普通函数，通过调用表达式就可直接调用，这种方式很直接也很常见。

//定义一个普通函数。
var strict = function () { return !this; }; //检测当前运行环境是否为严格模式。
//通过函数名直接调用。
console.log(strict()); 

this

2.通常，保存在对象属性里的JavaScript函数被称作“方法”。

//定义一个对象直接量。
var calc = {
    a: null,
    b: null,
    add: function () { //将函数保存在对象属性中。
        return this.a + this.b;
    }
};
//通过对象名调用方法。
calc.a = 1, calc.b = 2;
console.log(calc.add()); 

thisthis

this

thisthisthisthisundefined

var o = {
    m: function () { //对象中的方法
        var self = this; //将this的值保存在一个变量中
        console.log(this === o); //输出true，表明this就是这个引用对象o
        f(); //调用嵌套函数f()
        function f() { //定义一个嵌套函数（**普通函数，非对象方法）
            console.log(this === o); //输出false，this的值为全局对象或undefined
            console.log(self === o); //输出true，变量self指外部函数的this值
        }
    }
}

newreturnprototypethis

//与普通函数一样的定义方式。
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function () {
        console.log("My name is " + this.name + ", I am " + this.age + " years old.");
    }
}
//用关键字new调用构造函数，实例化对象。
var obj = new Person("Lamb", "21");
obj.say();//调用对象方法。

call()apply()this

//定义一个打印函数。
function print() {
    if (this.text) {
        alert(this.text);
    } else {
        alert("undefined");
    }
}
//call方法间接调用方法，并指定其调用上下文。
print.call({ text: "hello" });

call()apply()

3.函数的实参和形参

JavaScript中的函数定义不需要指定函数形参的类型，调用函数时也不检查传入形参的个数。这样，同时也会留下两个疑问给我们：

1. 当调用函数时的实参个数和声明的形参个数不匹配的时候如何处理；
2. 如何显式测试函数实参的类型，以避免非法的实参传入函数。

下面就简单介绍JavaScript是如何对上述两个问题做出处理的。

undefined

function getPropertyNames(obj,/*optional*/arr) {
    arr=arr||[];
    for (var property in obj) { arr.push(property); }
    return arr;
}

/*optional*/

arguments

//返回传入实参的最大值。
function max(/* ... */) {
    var max = Number.NEGATIVE_INFINITY; //该值代表负无穷大。
    for (var i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}
//调用。
var largest = max(10, 45, 66, 35, 21); //=>66

arguments[]

calleecaller

calleecaller

//callee可以用来递归匿名函数。
var sum = function (x) {
    if (x <= 1) return 1;
    return x + arguments.callee(x - 1);
}
//调用函数b，方法a中打印结果为函数b。
 var a = function () {
     alert(a.caller);
 }
 var b = function () {
     a();
 }

注意，在ECMAScript 5严格模式下，对这两个属性进行读写会产生一个类型错误。

实参类型
声明JavaScript函数时形参不需要指定类型，在形参传入函数体之前也不会做任何类型检查，但是JavaScript在必要的时候会进行类型转换，例如：

function mult(a, b) {
    return a * b;
}
function conn(x, y) {
    return x + y;
}
console.log(mult(3, "2")); //字符串类型自动转为数字类型，输出结果：6
console.log(conn(3, "2")); //数字类型自动转为字符串类型，输出结果："32"

上述的两种类型存在隐式转换关系所以JS可以自动转换，但是还存在其他情况：比如，一个方法期望它第一个实参为数组，传入一个非数组的值就可能引发问题，这时就应当在函数体中添加实参类型检查逻辑。

4.作为值的函数

开篇提到过，在JavaScript中函数不仅是一种语法，函数即是对象，简单归纳函数具有的几种性质：

1.函数可以被赋值给一个变量；

function square(x) { return x * x; }
var s = square; //现在s和square指代同一个函数对象
square(5); //=>25
s(5); //=>25

2.函数可以保存在对象的属性或数组元素中；

var array = [function (x) { return x * x; }, 20];
array[0](array[1]); //=>400

3.函数可以作为参数传入另外一个函数；

//这里定义一些简单函数。
function add(x, y) { return x + y; }
function subtract(x, y) { return x - y; }
function multipty(x, y) { return x * y; }
function divide(x, y) { return x / y; }
//这里函数以上面某个函数做参数。
function operate(operator, num1, num2) {
    return operator(num1, num2);
}
//调用函数计算(4*5)-(2+3)的值。
var result = operate(subtract, operate(multipty, 4, 5), operate(add, 2, 3));
console.log(result); //=>15

4.函数可以设置属性。

//初始化函数对象的计数器属性。
uniqueInteger.counter = 0;
//先返回计数器的值，然后计数器自增1。
function uniqueInteger() {
    return uniqueInteger.counter+=1;
}

当函数需要一个“静态”变量来在调用时保持某个值不变，最方便的方式就是给函数定义属性，而不是定义全局变量，因为定义全局变量会让命名空间变的杂乱无章。

5.作为命名空间的函数

函数中声明的变量只在函数内部是有定义，不在任何函数内声明的变量是全局变量，它在JavaScript代码中的任何地方都是有定义的。JavaScript中没有办法声明只在一个代码块内可见的变量的。基于这个原因，常常需要定义一个函数用作临时的命名空间，在这个命名空间内定义的变量都不会污染到全局变量。

//该函数就可看作一个命名空间。
function mymodule() {
    //该函数下的变量都变成了“mymodule”空间下的局部变量，不会污染全局变量。
}
//最后需要调用命名空间函数。
mymodule();

mymodule

//将上面mymodule()函数重写成匿名函数，结束定义并立即调用它。
(function () {
    //模块代码。
}());

6.闭包

变量作用域函数作用域链

• 变量作用域：无非就是两种，全局变量和局部变量。全局变量拥有全局作用域，在任何地方都是有定义的。局部变量一般是指在函数内部定义的变量，它们只在函数内部有定义。

• 函数作用域链：我们知道JavaScript函数是可以嵌套的，子函数对象会一级一级地向上寻找所有父函数对象的变量。所以，父函数对象的所有变量，对子函数对象都是可见的，反之则不成立。需要知道的一点是，函数作用域链是在定义函数的时候创建的。

关于“闭包”的概念书本上定义很具体，但是也很抽象，很难理解。简单的理解，“闭包”就是定义在一个函数内部的函数（这么说并不准确，应该说闭包是函数的作用域）。

var scope = "global scope"; //全局变量
function checkscope() {
    var scope = "local scope"; //局部变量
    function f() { return scope; } //在作用域中返回这个值
    return f();
}
checkscope(); //=>"local scope"

f()

counteruniqueInteger

//初始化函数对象的计数器属性。
uniqueInteger.counter = 0;
//先返回计数器的值，然后计数器自增1。
function uniqueInteger() {
    return uniqueInteger.counter+=1;
}

uniqueInteger

//利用闭包重写。
var uniqueInteger = (function () { //定义函数并立即调用
    var counter = 0; //函数的私有状态
    return function () {
        return counter += 1;
    };
})();
//调用。
uniqueInteger(); //=>1
uniqueInteger(); //=>2
uniqueInteger(); //=>3

counter

counter

function counter() {
    var n = 0;
    return {
        count: function () { return n += 1; },
        reset: function () { n = 0; }
    };
}
var c = counter(), d = counter(); //创建两个计时器
c.count(); //=>0
d.count(); //=>0 能看出它们互不干扰
c.reset(); //reset和count方法共享状态
c.count(); //=>0 因为重置了计数器c
d.count(); //=>1 而没有重置计数器d

thisthisthatarguments

var name = "The Window";
var object = {
    name: "My Object",
    getName: function () {
        var that = this;
        return function () {
            return that.name;
        };
    }
};
console.log(object.getName()()); //=>"My Object"

到这里如果你还不明白我在说什么，这里推荐两篇前辈们写的关于“闭包”的文章。
阮一峰，学习Javascript闭包（Closure）
russj，JavaScript 闭包的理解

7.函数属性、方法和构造函数

前文已经介绍过，在JavaScript中函数也是对象，它也可以像普通对象一样拥有属性和方法。

arguments.lengthlength

function check(args) {
    var actual = args.length; //参数的真实个数
    var expected = args.callee.length; //期望的实参个数
    if (actual!=expected) { //如果不同则抛出异常
        throw Error("Expected "+ expected+"args；got "+ actual);
    }
}
function f(x,y,z) {
    check(arguments); //检查实参和形参个数是否一致。
    return x + y + z;
}

prototype

call()apply()thisfunc()obj

func.call(obj);
func.apply(obj);

call()apply()

func.call(obj, 1, 2); //实参可以为任意数量
func.apply(obj, [1, 2]); //实参都放在了一个数组中

下面看一个有意思的函数，他能将一个对象的方法替换为一个新方法。这个新方法“包裹”了原始方法，实现了AOP。

//调用原始方法之前和之后记录日志消息
function trace(o, m) {
    var original = o[m]; //在闭包中保存原始方法
    o[m] = function () { //定义新方法
        console.log(new Date(), "Entering：", m); //输出日志消息
        var result = original.apply(o, arguments); //调用原始方法
        console.log(new Date(), "Exiting：", m); //输出日志消息
        return result; //返回结果
    }
}

这种动态修改已有方法的做法，也被称作“猴子补丁（monkey-patching）”。

bind()方法
bind()方法是ES5中新增的方法，这个方法的主要作用是将函数绑定至某个对象。该方法会返回一个新的函数，调用这个新的函数会将原始函数当作传入对象的方法来调用。

function func(y) { return this.x + y; } //待绑定的函数
var o = { x: 1 }; //将要绑定的对象
var f = func.bind(o);//通过调用f()来调用o.func()
f(2); //=>3

bind()

if (!Function.prototype.bind) {
    Function.prototype.bind = function (o /* , args */) {
        //将this和arguments保存在变量中，以便在嵌套函数中使用。
        var self = this, boundArgs = arguments;
        //bind()方法返回的是一个函数。
        return function () {
            //创建一个参数列表，将传入bind()的第二个及后续的实参都传入这个函数。
            var args = [], i;
            for (var i = 1; i < boundArgs.length; i++) {
                args.push(boundArgs[i]);
            }
            for (var i = 0; i < arguments.length; i++) {
                args.push(boundArgs[i]);
            }
            //现在将self作为o的方法来调用，传入这些实参。
            return self.apply(o,args);
        }
    }
}

functionFunction()Function()

var f = Function("x", "y", "return x*y;");
//等价于下面的函数
var f = function f(x, y) { return x * y; }

Function()

var scope = "global scope";
function checkscope() {
var scope = "local scope";
return Function("return scope;"); //无法捕获局部作用域
}
checkscope(); //=>"global scope"

8.函数式编程

JavaScript中可以像操控对象一样操控函数，也就是说可以在JavaScript中应用函数式编程技术。

map()reduce()

//首先定义两个简单的函数。
var sum = function (x, y) { return x + y; }
var square = function (x) { return x * x }
//将上面的函数和数组方法配合使用计算出平均数和标准差。
var data = [1, 1, 3, 5, 5];
var mean = data.reduce(sum) / data.length;
var deviations = data.map(function (x) { return x - mean; });
var stddev = Math.sqrt(deviations.map(square).reduce(sum) / (data.length - 1));

高阶函数
所谓高阶函数就是函数操作函数，它接收一个或多个函数作为参数，并返回一个新的函数。

//返回传入函数func返回值的逻辑非。
function not(func) {
    return function () {
        var result = func.apply(this, arguments);
        return !result;
    };
}
//判断传入参数a是否为偶数。
var even = function (x) {
    return x % 2 === 0;
}
var odd = not(even); //odd为新的函数，所做的事和even()相反。
[1, 1, 3, 5, 5].every(odd); //=>true 每个元素都是奇数。

f()g()f(g())

//返回一个新的函数，计算f(g(...))。
function compose(f, g) {
    return function () {
        //需要给f()传入一个参数，所以使用f()的call()方法。
        //需要给g()传入很多参数，所以使用g()的apply()方法。
        return f.call(this, g.apply(this, arguments));
    }
}
var square = function (x) { return x * x; }
var sum = function (x, y) { return x + y; }
var squareofsum = compose(square, sum);
squareofsum(2, 3); //=>25

memorize()

//返回f()的带有记忆功能的版本。
function memorize(f) {
    //将值保存在闭包中。
    var cache = {};
    return function () {
        //将实参转换为字符串形式，并将其用做缓存的键。
        var key = arguments.length + Array.prototype.join.call(arguments, ",");
        if (key in cache) {
            return cache[key];
        } else {
            return cache[key] = f.apply(this, arguments);
        }
    }
}

memorize()memorize()

//返回两个整数的最大公约数。
function gcd(a, b) {
    var temp;
    if (a < b) { //确保 a >= b
        temp = b;
        b = a;
        a = temp;
    }
    while (b != 0) { //这里是求最大公约数的欧几里德算法
        temp = b;
        b = a % b;
        a = temp;
    }
    return a;
}
var gcdmemo = memorize(gcd);
gcdmemo(85, 187);
//当写一个递归函数时，往往需要实现记忆功能。
var factorial = memorize(function (n) {
    return (n <= 1) ? 1 : n * factorial(n - 1);
});
factorial(5); //=>120

9.参考与扩展

本篇内容源自我对《JavaScript权威指南》第8章 函数 章节的阅读总结和代码实践。总结的比较粗糙，你也可通过原著或MDN更深入了解函数。

[1] David Flanagan，JavaScript权威指南(第6版)
[2] MDN，JavaScript 参考文档 - Functions - JavaScript | MDN