zoukankan      html  css  js  c++  java
  • 【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 测试结果)
    JavaScript回调函数 - 星期五 - 星期五
     
     
    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 测试结果)
    JavaScript回调函数 - 星期五 - 星期五
     
     
    举例:为数组增加两个方法,其中用到回调函数
    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测试结果)
    JavaScript回调函数 - 星期五 - 星期五
     
  • 相关阅读:
    HDU 1730 类NIM模型
    HDU 4315 阶梯博弈变形
    HDU 3389 阶梯博弈变形
    HDU 1524 树上无环博弈 暴力SG
    HDU 3094 树上删边 NIM变形
    vim的安装与配置
    Apache Mysql 搭配详解
    [置顶] 博客转移
    “玲珑杯”线上赛 Round #15 河南专场 C 咸鱼魔法记
    “玲珑杯”线上赛 Round #15 河南专场 F 咸鱼文章
  • 原文地址:https://www.cnblogs.com/daishuguang/p/3918643.html
Copyright © 2011-2022 走看看