第四章 函数

• 可以在程序执行时动态创建函数
• 可以将函数赋值给变量，可以将函数的引用拷贝至另一个变量，可以扩充函数，除了某些特殊场景外均可被删除。
• 可以将函数作为参数传入另一个函数，也可以被当作返回值返回。
• 函数可以包含自己的属性和方法

// antipattern
// for demo purposes only
var add = new Function('a, b', 'return a + b');
add(1, 2); // returns 3

// named function expression
var add = function add(a, b) {
    return a + b;
};

// function expression, a.k.a. anonymous function
var add = function (a, b) {
    return a + b;
};

function foo() {
    // function body goes here
}

另外我们经常看到“函数直接量”。它用来表示函数表达式或带命名的函数表达式。由于这个术语是有歧义的，所以最好不要用它。

// this is a function expression,
// pased as an argument to the function `callMe`
callMe(function () {
    // I am an unnamed function expression
    // also known as an anonymous function
});
// this is a named function expression
callMe(function me() {
    // I am a named function expression
    // and my name is "me"
});
// another function expression
var myobject = {
    say: function () {
        // I am a function expression
    }
};

// global scope
function foo() {}
function local() {
    // local scope
    function bar() {}
    return bar;
}

function foo() {} // declaration
var bar = function () {}; // expression
var baz = function baz() {}; // named expression
foo.name; // "foo"
bar.name; // ""
baz.name; // "baz"

我们可以将一个带名字的函数表达式赋值给变量，变量名和函数名不同，这在技术上是可行的。比如：var foo = function bar(){};。然而，这种用法的行为在浏览器中的兼容性不佳（特别是IE中），因此并不推荐大家使用这种模式。

术语“提前”并未在ECMAScript中定义，但是并没有其他更好的方法来描述这种行为了。

// antipattern
// for illustration only
// global functions
function foo() {
    alert('global foo');
}
function bar() {
    alert('global bar');
}
function hoistMe() {
    console.log(typeof foo); // "function"
    console.log(typeof bar); // "undefined"
    foo(); // "local foo"
    bar(); // TypeError: bar is not a function
    // function declaration:
    // variable 'foo' and its implementation both get hoisted
    function foo() {
        alert('local foo');
    }
    // function expression:
    // only variable 'bar' gets hoisted
    // not the implementation
    var bar = function () {
        alert('local bar');
    };
}
hoistMe();

• 函数是对象
• 函数提供局部变量作用域

function writeCode(callback) {
    // do something...
    callback();
    // ...
}
function introduceBugs() {
    // ... make bugs
}
writeCode(introduceBugs);

var findNodes = function () {
    var i = 100000, // big, heavy loop
        nodes = [], // stores the result
        found; // the next node found
    while (i) {
        i -= 1;
        // complex logic here...
        nodes.push(found);
    }
    return nodes;
};

var hide = function (nodes) {
    var i = 0, max = nodes.length;
    for (; i < max; i += 1) {
        nodes[i].style.display = "none";
    }
};
// executing the functions
hide(findNodes());

// refactored findNodes() to accept a callback
var findNodes = function (callback) {
    var i = 100000,
        nodes = [],
        found;
    // check if callback is callable
    if (typeof callback !== "function") {
        callback = false;
    }
    while (i) {
        i -= 1;
        // complex logic here...
        // now callback:
        if (callback) {
            callback(found);
        }
        nodes.push(found);
    }
    return nodes;
};

// a callback function
var hide = function (node) {
    node.style.display = "none";
};
// find the nodes and hide them as you go
findNodes(hide);

// passing an anonymous callback
findNodes(function (node) {
    node.style.display = "block";
});

callback(parameters);

var myapp = {};
myapp.color = "green";
myapp.paint = function (node) {
    node.style.color = this.color;
};

var findNodes = function (callback) {
    // ...
    if (typeof callback === "function") {
        callback(found);
    }
    // ...
};

findNodes(myapp.paint, myapp);

var findNodes = function (callback, callback_obj) {
    //...
    if (typeof callback === "function") {
        callback.call(callback_obj, found);
    }
    // ...
};

findNodes(myapp.paint, myapp);

findNodes("paint", myapp);

var findNodes = function (callback, callback_obj) {
    if (typeof callback === "string") {
        callback = callback_obj[callback];
    }
    //...
    if (typeof callback === "function") {
        callback.call(callback_obj, found);
    }
    // ...
};

document.addEventListener("click", console.log, false);

var thePlotThickens = function () {
    console.log('500ms later...');
};
setTimeout(thePlotThickens, 500);

var setup = function () {
    alert(1);
    return function () {
        alert(2);
    };
};
// using the setup function
var my = setup(); // alerts 1
my(); // alerts 2

var setup = function () {
    var count = 0;
    return function () {
        return (count += 1);
    };
};
// usage
var next = setup();
next(); // returns 1
next(); // 2
next(); // 3

var scareMe = function () {
    alert("Boo!");
    scareMe = function () {
        alert("Double boo!");
    };
};
// using the self-defining function
scareMe(); // Boo!
scareMe(); // Double boo!

这种模式的另外一个名字是“函数的懒惰定义”，因为直到函数执行一次后才重新定义，可以说它是“某个时间点之后才存在”，简称“懒惰定义”。

1. 给他增加了一个属性
2. 函数对象赋值给一个新变量
3. 函数依旧可以作为方法来调用

// 1. adding a new property
scareMe.property = "properly";
// 2. assigning to a different name
var prank = scareMe;
// 3. using as a method
var spooky = {
    boo: scareMe
};
// calling with a new name
prank(); // "Boo!"
prank(); // "Boo!"
console.log(prank.property); // "properly"
// calling as a method
spooky.boo(); // "Boo!"
spooky.boo(); // "Boo!"
console.log(spooky.boo.property);    // "properly"
// using the self-defined function
scareMe(); // Double boo!
scareMe(); // Double boo!
console.log(scareMe.property); // undefined

(function () {
    alert('watch out!');
}());

• 使用函数表达式定义一个函数。（不能使用函数声明。）
• 在最后加入一对括号，这会使函数立即被执行。
• 把整个函数包裹到一对括号中（只在没有将函数赋值给变量时需要）。

(function () {
    alert('watch out!');
})();

(function () {
    var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        today = new Date(),
        msg = 'Today is ' + days[today.getDay()] + ', ' + today.getDate();
    alert(msg);
}()); // "Today is Fri, 13"

// prints:
// I met Joe Black on Fri Aug 13 2010 23:26:59 GMT-0800 (PST)
(function (who, when) {
    console.log("I met " + who + " on " + when);
}("Joe Black", new Date()));

var result = (function () {
    return 2 + 2;
}());

var result = function () {
    return 2 + 2;
}();

var result = (function () {
    return 2 + 2;
})();

var getResult = (function () {
    var res = 2 + 2;
    return function () {
        return res;
    };
}());

var o = {
    message: (function () {
        var who = "me",
            what = "call";
        return what + " " + who;
    }()),
    getMsg: function () {
        return this.message;
    }
};
// usage
o.getMsg(); // "call me"
o.message; // "call me"

立即执行的函数还有一些名字，比如“自调用函数”或者“自执行函数”，因为这些函数会在被定义后立即执行自己。

// module1 defined in module1.js
(function () {
    // all the module 1 code ...
}());

({
    // here you can define setting values
    // a.k.a. configuration constants
    maxwidth: 600,
    maxheight: 400,
    // you can also define utility methods
    gimmeMax: function () {
        return this.maxwidth + "x" + this.maxheight;
    },
    // initialize
    init: function () {
        console.log(this.gimmeMax());
        // more init tasks...
    }
}).init();

({...}).init();
({...}.init());

({d:600,c:400,a:function(){return this.d+"x"+this.c},b:function(){console.log(this.a())}}).b();

这种模式主要用于一些一次性的工作，并且在init()方法执行完后就无法再次访问到这个对象。如果希望在这些工作完成后保持对对象的引用，只需要简单地在init()的末尾加上return this;即可。

// BEFORE
var utils = {
    addListener: function (el, type, fn) {
        if (typeof window.addEventListener === 'function') {
            el.addEventListener(type, fn, false);
        } else if (typeof document.attachEvent === 'function') { // IE
            el.attachEvent('on' + type, fn);
        } else { // older browsers
            el['on' + type] = fn;
        }
    },
    removeListener: function (el, type, fn) {
        // pretty much the same...
    }
};

// AFTER
// the interface
var utils = {
    addListener: null,
    removeListener: null
};
// the implementation
if (typeof window.addEventListener === 'function') {
    utils.addListener = function (el, type, fn) {
        el.addEventListener(type, fn, false);
    };
    utils.removeListener = function (el, type, fn) {
        el.removeEventListener(type, fn, false);
    };
} else if (typeof document.attachEvent === 'function') { // IE
    utils.addListener = function (el, type, fn) {
        el.attachEvent('on' + type, fn);
    };
    utils.removeListener = function (el, type, fn) {
        el.detachEvent('on' + type, fn);
    };
} else { // older browsers
    utils.addListener = function (el, type, fn) {
        el['on' + type] = fn;
    };
    utils.removeListener = function (el, type, fn) {
        el['on' + type] = null;
    };
}

function func(a, b, c) {}
console.log(func.length); // 3

var myFunc = function (param) {
    if (!myFunc.cache[param]) {
        var result = {};
        // ... expensive operation ...
        myFunc.cache[param] = result;
    }
    return myFunc.cache[param];
};
// cache storage
myFunc.cache = {};

var myFunc = function () {
    var cachekey = JSON.stringify(Array.prototype.slice.call(arguments)),
        result;
    if (!myFunc.cache[cachekey]) {
        result = {};
        // ... expensive operation ...
        myFunc.cache[cachekey] = result;
    }
    return myFunc.cache[cachekey];
};
// cache storage
myFunc.cache = {};

var myFunc = function (param) {
    var f = arguments.callee,
        result;
    if (!f.cache[param]) {
        result = {};
        // ... expensive operation ...
        f.cache[param] = result;
    }
    return f.cache[param];
};
// cache storage
myFunc.cache = {};

function addPerson(first, last) {...}

function addPerson(first, last, dob, gender, address) {...}

addPerson("Bruce", "Wayne", new Date(), null, null, "batman");

addPerson(conf);

var conf = {
    username: "batman",
    first: "Bruce",
    last: "Wayne"
};
addPerson(conf);

• 不需要记住参数的顺序
• 可以很安全地跳过可选参数
• 拥有更好的可读性和可维护性
• 更容易添加和移除参数

• 需要记住参数的名字
• 参数名字不能被压缩

// define a function
var sayHi = function (who) {
    return "Hello" + (who ? ", " + who : "") + "!";
};
// invoke a function
sayHi(); // "Hello"
sayHi('world'); // "Hello, world!"
// apply a function
sayHi.apply(null, ["hello"]); // "Hello, hello!"

var alien = {
    sayHi: function (who) {
        return "Hello" + (who ? ", " + who : "") + "!";
    }
};
alien.sayHi('world'); // "Hello, world!"
sayHi.apply(alien, ["humans"]); // "Hello, humans!"

// the second is more efficient, saves an array
sayHi.apply(alien, ["humans"]); // "Hello, humans!"
sayHi.call(alien, "humans"); // "Hello, humans!"

// for illustration purposes
// not valid JavaScript
// we have this function
function add(x, y) {
    return x + y;
}
// and we know the arguments
add(5, 4);
// step 1 -- substitute one argument
function add(5, y) {
    return 5 + y;
}
// step 2 -- substitute the other argument
function add(5, 4) {
    return 5 + 4;
}

var add = function (x, y) {
    return x + y;
};
// full application
add.apply(null, [5, 4]); // 9
// partial application
var newadd = add.partialApply(null, [5]);
// applying an argument to the new function
newadd.apply(null, [4]); // 9

// a curried add()
// accepts partial list of arguments
function add(x, y) {
    var oldx = x, oldy = y;
    if (typeof oldy === "undefined") { // partial
        return function (newy) {
            return oldx + newy;
        };
    }
    // full application
    return x + y;
}
// test
typeof add(5); // "function"
add(3)(4); // 7
// create and store a new function
var add2000 = add(2000);
add2000(10); // 2010

// a curried add
// accepts partial list of arguments
function add(x, y) {
    if (typeof y === "undefined") { // partial
        return function (y) {
            return x + y;
        };
    }
    // full application
    return x + y;
}

function schonfinkelize(fn) {
    var slice = Array.prototype.slice,
    stored_args = slice.call(arguments, 1);
    return function () {
        var new_args = slice.call(arguments),
        args = stored_args.concat(new_args);
        return fn.apply(null, args);
    };
}

// a normal function
function add(x, y) {
    return x + y;
}
// curry a function to get a new function
var newadd = schonfinkelize(add, 5);
newadd(4); // 9
// another option -- call the new function directly
schonfinkelize(add, 6)(7); // 13

// a normal function
function add(a, b, c, d, e) {
    return a + b + c + d + e;
}
// works with any number of arguments
schonfinkelize(add, 1, 2, 3)(5, 5); // 16
// two-step currying
var addOne = schonfinkelize(add, 1);
addOne(10, 10, 10, 10); // 41
var addSix = schonfinkelize(addOne, 2, 3);
addSix(5, 5); // 16

1. 函数是一等对象，他们可以被作为值传递，也可以拥有属性和方法。
2. 函数拥有本地作用域，而大括号不产生块级作用域。另外需要注意的是，变量的声明会被提前到本地作用域顶部。

1. 带有名字的函数表达式
2. 函数表达式（和上一种一样，但是没有名字），也就是为大家熟知的“匿名函数”
3. 函数声明，与其它语言的函数语法相似

1. API模式，它们帮助我们为函数给出更干净的接口，包括：
   • 回调模式

     传入一个函数作为参数
     

   • 配置对象

      帮助保持函数的参数数量可控
     

   • 返回函数

      函数的返回值是另一个函数
     

   • 柯里化

      新函数在已有函数的基础上再加上一部分参数构成
     

2. 初始化模式，这些模式帮助我们用一种干净的、结构化的方法来做一些初始化工作（在Web页面和应用中非常常见），通过一些临时变量来保证不污染全局命名空间。这些模式包括：
   • 立即执行的函数

      当它们被定义后立即执行
     

   • 立即初始化的对象

      初始化工作被放入一个匿名对象，这个对象提供一个可以立即被执行的方法
     

   • 条件初始化

      使分支代码只在初始化的时候执行一次，而不是在整个程序生命周期中反复执行
     

3. 性能模式，这些模式帮助提高代码的执行速度，包括：
   • Memoization

      利用函数的属性，使已经计算过的值不用再次计算
     

   • 自定义函数

      重写自身的函数体，使第二次及后续的调用做更少的工作