JavaScript的函数

很随意的总结，几乎是代码片段，纯粹当个人笔记。

 

JavaScript中，定义Function对象有两种方法。

函数声明(function declaration)

function fn() {
    // 代码
};

函数表达式(function expression)

var fn = function () {
    // 代码
};

 

 

函数作回调(callback)时的作用域

其实回调并不是传递一次性的匿名函数或全局函数，而是对象的方法。
看下面的代码，输出结果和我们所想的不一致。

var obj = {};
obj.color = "red";
obj.getColor = function () {
    return {
        _this: this,
        color: this.color
    }
};

function printColor(callback) {
    console.log(callback());
}

printColor(obj.getColor);   // console print {_this: Window, color: undefined}

要解决这个问题，可以利用call()或者apply():

function printColor(callback, obj) {
    console.log(callback.call(obj));
}

printColor(obj.getColor, obj);   // console print {_this: Object, color: "red"}

但这种写法不够直观，我们换一个思路试试：

function printColor(key, obj) {
    console.log(obj[key]());
}

printColor("getColor", obj);   // console print {_this: Object, color: "red"}

 

 

 

返回函数

所谓的返回函数，其实就是：函数执行完后返回一个匿名函数。

如下：

function fnA() {
    alert(1);
    return function () {
        alert(2);
    };
}

var fnB = fnA();  // alert 1
fnB(); // alert 2

实际应用中，可创建一个闭包，用来存储私有数据：

 

function setup() {
    var count = 0;
    return function () {
        return ++count;
    };
}

var next = setup();
next(); // return 1
next(); // return 2
next(); // return 3

 

个人觉得更好的用法是，结合即时函数：

var next = (function () {
    var count = 0;
    return function () {
        return ++count;
    };
})();

next(); // return 1
next(); // return 2
next(); // return 3

如果结合了即时函数，就可以做条件预加载(Conditional Advance Loading):·

var addEvent = (function (W) {
    if (W.addEventListener) {
        return function (target, type, handler) {
            target.addEventListener(type, handler, false);
        };
    } else if (W.attachEvent) {
        return function (target, type, handler) {
            target.attachEvent("on" + type, handler);
        };
    } else {
        return function (target, type, handler) {
            target["on" + type] = handler;
        };
    }
})(window);

关于返回函数，最大的价值还是在于创建闭包。如果要存储私有数据，闭包固然十分好用。
但如果像上述代码，并不需要存储私有数据，返回函数就显得有点多余。
但我们依然可以条件预加载：

var addEvent = function () {};
if (window.addEventListener) {
    addEvent = function (target, type, handler) {
        target.addEventListener(type, handler, false);
    };
} else if (window.attachEvent) {
    addEvent = function (target, type, handler) {
        target.attachEvent("on" + type, handler);
    };
} else {
    addEvent = function (target, type, handler) {
        target["on" + type] = handler;
    };
}

只是，这些写貌似没那么炫了...

如果只有一个判断条件，建议使用三元运算符，更直观更简单：

var addEvent = window.addEventListener ? function (target, type, handler) {
    target.addEventListener(type, handler, false);
} : function (target, type, handler) {
    target.attachEvent("on" + type, handler);
};

 

 

自定义函数

所谓的自定义函数，可以理解为：在函数内部覆盖(重新定义)函数自身。

function fnA() {
    alert(1);
    fnA = function () {
        alert(2);
    };
}
fnA();  // alert 1
fnA(); // alert 2

利用自定义函数的特点，我们可以对上面的addEvent进行优化：

var addEvent = function(target, type, handler) {
    if (target.addEventListener) {
        addEvent = function (target, type, handler) {
            target.addEventListener(type, handler, false);
        };
    } else if (target.attachEvent) {
        addEvent = function (target, type, handler) {
            target.attachEvent("on" + type, handler);
        };
    } else {
        addEvent = function (target, type, handler) {
            target["on" + type] = handler;
        };
    }
    addEvent(target, type, handler);
};

这种写法又叫：延迟加载(Lazy Loading) 或 惰性函数定义(Lazy Function Definition)。
当函数执行的那一刻才会进行“初始化”，重新去定义函数。

 

 

即时函数(immediate function)

什么是即时函数？顾名思义，就是立刻执行的函数。

下面三种都是即时函数的写法：

(function () {
    alert(1);
}());

(function () {
    alert(2);
})();

var fn = function() {
    alert(3);
}();

 

网页开发中，各种事件是最难抽象的，因为业务逻辑层出不穷。
看下面代码：

// code...
var $body = $("body"),
        MESSAGE = "Hello!";

$body.on("click", function() {
    console.log(MESSAGE);
});
// code...

这是一段十分常见的事件绑定的代码。
就这样看十分清晰，但如果把它摆在n段事件绑定的代码之中，估计就会让人抓狂了。
单单避免变量名冲突这一点，就十分蛋疼了。

利用即时函数让代码模块化：

// code...
(function () {
    var $body = $("body"),
            MESSAGE = "Hello!";

    $body.on("click", function() {
        console.log(MESSAGE);
    });
})();
// code...

 

 

即时对象初始化(immediate object initialization)

如果你不喜欢即时函数的方式，也可以换一个形式：

// code...
({
    $body: $("body"),
    MESSAGE: "Hello!",
    bindClick: function() {
        var msg = this.MESSAGE;
        this.$body.on("click", function() {
            console.log(msg);
        });
    },
    bindEvent: function() {
        this.bindClick();
    }
}).bindEvent();
// code...

这种做法，有一个比较大的缺陷是，大部分压缩器都不会对其进行“变量名压缩”。
目前只有 Google Closure Compile 的“高级模式”才能对其进行“变量名压缩”。

 

 

柯里化(Currying)

在纯粹的函数式编程语言中，函数并不描述为被调用(called或invoked)，而是描述为应用(applied)。

alert(1); // 调用函数
alert.apply(null, [1]); // 应用函数

柯里化例子：

function currying(fn) {
    var slice = Array.prototype.slice,
            storedArgs = slice.call(arguments, 1);
    return function () {
        var newArgs = slice.call(arguments),
                args = storedArgs.concat(newArgs);
        return fn.apply(null, args);
    };
}

function add(x, y) {
    return x + y;
}

add(5, 3);  // return 8
var add10 = currying(add, 10);
add10(11);  // return 21

何时使用柯里化？
当发现同一个函数，被调用多次，并且每次传递的参数绝大多数是相同的，这个时候应该用柯里化。

 

以上。

参考：《JavaScript设计》

 

 

本文作者：Maple Jan

本文链接：http://www.cnblogs.com/maplejan/archive/2013/06/17/3140004.html