Javascript的函数的声明方式和调用方式已是使人厌倦的老生常谈了,但有些东西就是这样的,你来讲一遍而后我再说一遍。每次看到书上或博客里写的Javascript函数有四种调用方式,我就会想起孔乙己:茴字有四种写法,你造吗?程序员
尽管缺陷有一堆,但Javascript仍是使人着迷的。Javascript众多优美的特性的核心,是做为顶级对象(first-class objects)的函数。函数就像其余普通对象同样被建立、被分配给变量、做为参数被传递、做为返回值以及持有属性和方法。函数做为顶级对象,赋予了Javascript强大的函数式编程能力,也带来了不太容易控制的灵活性。编程
一、函数声明闭包
变量式声明先建立一个匿名函数,而后把它赋值给一个指定的变量:app
var f = function () { // function body };
一般咱们没必要关心等号右边表达式的做用域是全局仍是某个闭包内,由于它只能经过等号左边的变量f来引用,应该关注的是变量f的做用域。若是f指向函数的引用被破坏(f = null),且函数没有被赋值给任何其它变量或对象属性,匿名函数会由于失去全部引用而被垃圾回收机制销毁。函数式编程
也可使用函数表达式建立函数:函数
function f() { // function body }
与变量式不一样的是,这种声明方式会为函数的一个内置属性name赋值。同时把函数赋值给当前做用域的一个同名变量。(函数的name属性,configurable、enumerable和writable均为false)性能
function f() { // function body } console.log(f.name); // "f" console.log(f); // f()
Javascript变量有一个的特别之处,就是会把变量的声明提早,表达式式的函数声明,也会把整个函数的定义前置,所以你能够在函数定义以前使用它:this
console.log(f.name); // "f" console.log(f); // f() function f() { // function body }
函数表达式的声明会被提高到做用域顶层,试试下面的代码,它们不是本文的重点:spa
var a = 0; console.log(a); // 0 or a()? function a () {}
Crockford建议永远使用第一种方式声明函数,他认为第二种方式放宽了函数必须先声明后使用的要求从而会致使混乱。(Crockford是一个相似于罗素口中用来比喻维特根斯坦的"有良心的艺术家"那样的"有良心的程序员",这句话很拗口吧)code
函数式声明
function f() {}
看起来是
var f = function f(){};
的简写。
而
var a = function b(){};
的表达式,建立一个函数并把内置的name属性赋值为"b",而后把这个函数赋值给变量a,你能够在外部使用a()来调用它,但却不能使用b(),由于函数已被赋值给a,因此不会再自动建立一个变量b,除非你使用var b = a声明一个变量b。固然这个函数的name是"b"而不是"a"。
使用Function构造函数也可用来建立函数:
var f = new Function("a,b,c","return a+b+c;");
这种方式实际上是在全局做用域内生成一个匿名函数,并把它赋值给变量f。
二、递归调用
递归被用来简化许多问题,这须要在一个函数体中调用它本身:
// 一个简单的阶乘函数 var f = function (x) { if (x === 1) { return 1; } else { return x * f(x - 1); } };
Javascript中函数的巨大灵活性,致使在递归时使用函数名遇到困难,对于上面的变量式声明,f是一个变量,因此它的值很容易被替换:
var fn = f; f = function () {};
函数是个值,它被赋给fn,咱们期待使用fn(5)能够计算出一个数值,可是因为函数内部依然引用的是变量f,因而它不能正常工做了。
函数式的声明看起来好些,但很惋惜:
function f(x) { if (x === 1) { return 1; } else { return x * f(x - 1); } } var fn = f; f = function () {}; // may been warning by browser fn(5); // NaN
看起来,一旦咱们定义了一个递归函数,便须注意不要轻易改变变量的名字。
上面谈论的都是函数式调用,函数还有其它调用方式,好比看成对象方法调用。
咱们经常这样声明对象:
var obj1 = { num : 5, fac : function (x) { // function body } };
声明一个匿名函数并把它赋值给对象的属性(fac)。
若是咱们想要在这里写一个递归,就要引用属性自己:
var obj1 = { num : 5, fac : function (x) { if (x === 1) { return 1; } else { return x * obj1.fac(x - 1); } } };
固然,它也会遭遇和函数调用方式同样的问题:
var obj2 = {fac: obj1.fac}; obj1 = {}; obj2.fac(5); // Sadness
方法被赋值给obj2的fac属性后,内部依然要引用obj1.fac,因而…失败了。
换一种方式会有所改进:
var obj1 = { num : 5, fac : function (x) { if (x === 1) { return 1; } else { return x * this.fac(x - 1); } } }; var obj2 = {fac: obj1.fac}; obj1 = {}; obj2.fac(5); // ok
经过this关键字获取函数执行时的context中的属性,这样执行obj2.fac时,函数内部便会引用obj2的fac属性。
但是函数还能够被任意修改context来调用,那就是万能的call和apply:
obj3 = {}; obj1.fac.call(obj3, 5); // dead again
因而递归函数又不能正常工做了。
咱们应该试着解决这种问题,还记得前面提到的一种函数声明的方式吗?
var a = function b(){};
这种声明方式叫作内联函数(inline function),虽然在函数外没有声明变量b,可是在函数内部,是可使用b()来调用本身的,因而
var fn = function f(x) { // try if you write "var f = 0;" here if (x === 1) { return 1; } else { return x * f(x - 1); } }; var fn2 = fn; fn = null; fn2(5); // OK
// here show the difference between "var f = function f() {}" and "function f() {}" var f = function f(x) { if (x === 1) { return 1; } else { return x * f(x - 1); } }; var fn2 = f; f = null; fn2(5); // OK
var obj1 = { num : 5, fac : function f(x) { if (x === 1) { return 1; } else { return x * f(x - 1); } } }; var obj2 = {fac: obj1.fac}; obj1 = {}; obj2.fac(5); // ok var obj3 = {}; obj1.fac.call(obj3, 5); // ok
就这样,咱们有了一个能够在内部使用的名字,而不用担忧递归函数被赋值给谁以及以何种方式被调用。
Javascript函数内部的arguments对象,有一个callee属性,指向的是函数自己。所以也可使用arguments.callee在内部调用函数:
function f(x) { if (x === 1) { return 1; } else { return x * arguments.callee(x - 1); } }
但arguments.callee是一个已经准备被弃用的属性,极可能会在将来的ECMAscript版本中消失,在ECMAscript 5中"use strict"时,不能使用arguments.callee。
最后一个建议是:若是要声明一个递归函数,请慎用new Function这种方式,Function构造函数建立的函数在每次被调用时,都会从新编译出一个函数,递归调用会引起性能问题——你会发现你的内存很快就被耗光了。