学习面向对象javascript(2)函数

学习面向对象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!

 

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