学习面向对象javascript（二）函数

在这篇文章中，将会介绍一些function的知识，比如function的使用，变量作用域，匿名函数，回调，自执行函数，内部函数，闭包等相关的知识。其中，闭包的知识会在下一次的文章中介绍。

function的使用

javascript是非常灵活的语言。
比如，定义一个函数

 

function sum(a, b) {
    var c = a + b;
    return c;
}

 

执行sum(1,2)得到3，
执行sum(1)，由于javascript允许少传参数，所以后面一个参数将被设成undefined，所以得到NaN，
执行sum(1,2,3,4,5,6)，javascript也允许多传参数，后面多余的参数将会被忽略，所以得到3。
可见javascript是非常灵活的。
另外，当创建一个function的时候，javascript会自动创建一个叫做arguments的数组，里面包含了所以参数。

 

function args() {
     return arguments;
}

 

args();  // []
args( 1, 2, 3, 4, true, 'ninja');  // [1, 2, 3, 4, true, "ninja"]

 

 

作用域

在javascript中，变量不是被定义在一个代码块里面的，而是在一个function里面。也就是说，如果在function内部定义一个临时变量，那么在function外面是没法访问到的，然而将变量定义在一个if或者for代码块里面，在代码块外面是可以访问得到的。如果在任何function外部定义变量，那么这个变量就是全局变量，全局变量在任何function里面都是可以访问得到的。下面我们来看一下例子：

 

var global = 1;
function f() {
  var local = 2;
  global++;
  return global;
}
f();  // 2
local;  // ReferenceError: local is not defined

 

我们看到，在函数f里面成功访问到了global变量。但是在函数外部，访问不到local变量。再看下面的代码：

 

function f() {
    if(true){
        var local = 0;
    }
    local++;
    return local;
}
f();  // 1

 

可以发现，local变量并不是出了if块就不能被访问了。在代码块外面同样可以访问。由此看来javascript的变量的作用域是函数级的，不是块级的。
另外，值得一提的是，如果在函数中定义变量时，没用用var来声明，那么这个变量会被定义为全局变量。看下面代码：

 

function f() { 
    local=2; 
}
local;  // ReferenceError: local is not defined
f();  // undefined
local;  // 2

 

可以发现，在f()函数被调用前，local变量是不存在的，调用后，local可以在函数外部被访问，成为全局变量。
因此，在我们平时开发中，应该尽量用var来定义变量。避免定义全局变量，可以想象多个人在一个脚本中对一个全局变量操作，是相当难控制的。
在一个函数中，定义了一个和外部全局变量同名的变量是，在函数内，局部变量的优先级高于全局变量。为了直观一点，看下面的代码：

 

var a = 123;
function f() { 
  alert(a);
  var a = 1;
  alert(a); 
} 
f();

 

这段代码并不像你所想的一样，第一个alert弹出123，第二个alert弹出1，而是分别弹出undefined和1。这正是因为在函数内部，局部变量的优先级高于全局变量，所以，局部变量会覆盖所有同名的全局变量。

函数也是数据

在javascript中，函数也是数据，定义函数可以有以下两种方式：

 

function f(){
    return 1;
}
var f = function(){
    return 1;
}

 

用typeof来验证f，返回"function"，因此，函数是一种特殊的数据。同时，函数还可以像普通变量一样赋值给其他变量，甚至删除掉。

 

var sum = function(a, b) {
    return a + b;
}
var add = sum;
delete sum;  // true
typeof sum;  // "undefined"
typeof add;  // "function"
add(1,2);  // 3

匿名函数

在javascript中，function可以在不给予函数名的情况下使用。比如：

 

function(a){
    return a;
}

但是这样的函数并没有什么用处，要让他能被调用，可以有下面两种方法：

• 把一个匿名函数当做函数B的参数，然后在函数B中做一些有用的操作。
• 可以定义一个匿名函数并且立即执行他。

下面我们针对这两种方法来进行更细一些的了解。

 

回调函数

由于函数可以像其他数据一样被赋给变量，能被定义、删除、复制，所以，同样的也可以被当做参数传递到另一个函数。
下面的例子是向函数中传入两个函数，执行以后返回两个函数返回值的和。

 

function invoke_and_add(a, b){
  return a() + b();
}

 

然后定义两个简单的函数

 

function one() {
  return 1;
}
function two() {
  return 2;
}

 

现在我们把这两个函数传入到invoke_and_add方法中。

 

invoke_and_add(one, two);  // 3

 

执行以后，返回3。
另外，同样可以传入两个匿名函数来试试。

 

invoke_and_add(function(){return 1;}, function(){return 2;});  // 3

 

像这样类似的，传入一个函数A到另一个函数B中，在B中执行A，A就叫做回调函数。如果A是匿名函数的话，可以叫做匿名回调函数。
再看一个例子：

 

/**
*把a，b，c 3个数乘以2以后，返回积的数组
*/
function multiplyByTwo(a, b, c) {
  var i, ar = []; 
  for(i = 0; i < 3; i++) {
    ar[i] = arguments[i] * 2;
  } 
  return ar;
}
function addOne(a) {
  return a + 1;
}

 测试：

 

multiplyByTwo(1, 2, 3);  // [2, 4, 6]
addOne(100);  // 101

 

现在，我们需要传入3个数字，然后先对着3个数字乘以2，再在积上加1。我们通常会想到，先调用multiplyByTwo方法，在循环结果，把各个结果传入addOne方法，最后得到我们想要的。这样做，必然会需要循环数组两次来算出结果。
有了回调函数，我们就可以这样做，稍微把multiplyByTwo方法修改一下。

 

function multiplyByTwo(a, b, c, callback) {
  var i, ar = []; 
  for(i = 0; i < 3; i++) {
    ar[i] = callback(arguments[i] * 2);
  } 
  return ar;
}

 

多加入一个callback参数，在方法中一次性就得到最终需要的结果。

 

multiplyByTwo(1, 2, 3, addOne);  // [3, 5, 7]

 

由此，可见使用callback函数，不仅可以减少我们的代码量，还可以优化性能。

自执行函数

下面我们来看匿名函数的另一种用法—自执行函数。它可以在函数被定义以后马上被执行。

 

(
  function(){
    alert('boo');
  }
)()

 

 将匿名函数放在一对小括号里面，后面在跟一对小括号就可以。后面的小括号内可以传入函数所需要的实参。比如：

 

(
  function(name){
    alert('Hello ' + name + '!');
  }
)('dude')

 

使用自执行函数的好处在于，你可以不必为函数创建全局变量。但是缺点是，自执行函数只能执行一次，除非你把它放在循环里或者其他方法里。因此，自执行函数适合用在一次性执行的地方或者初始化的地方。

 

内部函数(私有函数)

在函数中，还可以定义另一个函数。比如：

 

function a(param) {
  function b(theinput) {
    return theinput * 2;
  };
  return 'The result is ' + b(param);
};

 

这样的函数b就叫做内部函数。执行一下。

 

a(8);  // "The result is 16"
b(2);  // b is not defined

 

可以发现，函数b提示没有定义。因此也叫私有函数。
定义内部函数有什么好处呢？
首先，可以保持外部命名空间比较干净，减小了命名冲突的几率。
第二，由于它的私有性，你可以把不想提供给外部的函数私有化。

 

函数中返回函数

在之前，我们知道，函数总是返回一个值，如果函数没有显式的返回一个值，那么他将返回undefined。同样，函数也可以返回一个函数。

 

function a() {
  alert('A!'); 
  return function(){
    alert('B!'); 
  };
}

 

在上面这个例子中，函数a完成了自己的工作(弹出“A!”)，之后又返回一个做别的工作(弹出“B!”)的函数。你可以把返回的这个函数重新赋值给一个变量。然后把这个变量像其他普通函数一样调用。

 

var newFunc = a();   // 弹出"A!"
newFunc();  //弹出"B!"

 

如果你不想重新定义一个变量就立即执行return的函数的话，你可以在外部函数后面加一对小括号来立即执行他。

 

a()();  // 先弹出"A!"，再弹出"B!"

重写本函数

由于函数可以返回函数，因此你可以用新的函数来替换掉旧的函数。

 

a = a(); // 弹出"A!"
a = a(); // 弹出"B!"

 

你可以发现，第一次重写弹出A!，第二次重写弹出B!。
当一个函数有一些一次性的初始化工作要做时，这就很有用了。在函数被调用时，为了避开重复做一些不必要的事，可以在第一次调用完函数后重写他自己。
在上面的例子中，我们从外部把函数重写了。但是我们也可以在内部重写他。

 

function a() {
  alert('A!');
  a = function(){
    alert('B!');
  };
}

 

在第一次执行a()的时候，会弹出A!，我们可以把它看做是一次性初始化工作。
在这之后，每次执行a()，都会弹出B!

 

至此，函数方面的知识暂时介绍到这了。下一次的文章中会介绍函数的另一个重要特性----闭包的有关知识。