【JavaScript】JavaScript回调函数

什么是Javascript 回调函数？

函数和其他数据一样可以被赋值，删除，拷贝等，所以也可以把函数作为参数传入到另一个函数中。

这个函数就是所谓的回调函数

 

举例：

//不带参数的case

function A(b, c) {

    return b() + c();

}

 

function B() {

    return 10;

}

 

function C() {

    return 7;

}

 

console.log(A(B, C));

 

//带参数的case

//(将参数重组后，传入d, 作为回调函数的参数，这里给我们提供了灵活性，回调函数的参数，完全由我们做主) 

function A(m, n, fun) {

    var d = m+n;

    return fun(d);

}

 

function fun(c) {

    return c

}

 

console.log(A(5, 4, fun));

 

//result (firebug 测试结果)

 

关于：（http://www.cnblogs.com/fighting_cp/archive/2010/09/20/1831844.html）

Javascript call和apply方法 

call和apply方法用于切换方法的执行上下文，这是一个非常酷的特性。（它两个的区别是参数形式不一样，作用相同）

 

区分apply,call就一句话,

 

foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3)

 

call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同.

 

call, apply方法区别是,从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的.

 

举例：用B的setMessage方法给A的message属性赋值

function funA(){

    this.message;

    this.getMessage = function() {

        return this.message;

    } 

}

 

function funB(){

    this.message;

    this.setMessage = function(msg) {

        this.message = msg;

    }

}

 

var b = new funB();

var a = new funA();

b.setMessage.call(a, "this is a's message!");

 

console.log(a.getMessage());

 

 

//Not Work Case:

//如果message是私有属性就不work

function funA(){

    var message;

    this.getMessage = function() {

        return message;

    } 

}

 

function funB(){

    var message;

    this.setMessage = function(msg) {

        message = msg;

    }

}

 

var b = new funB();

var a = new funA();

b.setMessage.call(a, "this is a's message!");

 

console.log(a.getMessage());

 

//result (firebug 测试结果)

 

举例：为数组增加两个方法，其中用到回调函数

Function.prototype.method = function(name, fn) {

    this.prototype[name] = fn;

    return this;

}

 

if ( !Array.prototype.forEach ) { 

  //这里fn 作为回调函数，我们为它定义了三个参数 数组元素，数组元素的序号，数组本身

  Array.method('forEach', function(fn, thisObj) {

    var scope = thisObj || window;

    for ( var i = 0, len = this.length; i < len; ++i ) {

      fn.call(scope, this[i], i, this);

    }

  });

}

 

if ( !Array.prototype.filter ) {

  Array.method('filter', function(fn, thisObj) {

    var scope = thisObj || window;

    var a = [];

    for ( var i = 0, len = this.length; i < len; ++i ) {

      if ( !fn.call(scope, this[i], i, this) ) {

        continue;

      }

      a.push(this[i]);

    }

    return a;

  });

}

 

举例测试：

Function.prototype.method = function(name, fn) {

    this.prototype[name] = fn;

    return this;

}

 

if ( !Array.prototype.forEach ) { 

  Array.method('forEach', function(fn, thisObj) {

    var scope = thisObj || window;

    for ( var i = 0, len = this.length; i < len; ++i ) {

      fn.call(scope, this[i], i, this);

    }

  });

}

 

//因为Javascript参数是可变的，所以定义callback方法时，参数个数自己选择，但是注意顺序

var a = function(item, i, array) {

    console.log("array[" + i + "] ->" + item + "    array:" + array);

}

 

var array = [1, 28, '163', 4, 'javascript'];

 

array.forEach(a);

 

//result: （firebug测试结果）

其他参考资料：

http://recurial.com/programming/understanding-callback-functions-in-javascript/

http://www.impressivewebs.com/callback-functions-javascript/

http://zhenghaoju700.blog.163.com/blog/static/135859518201281072518533/