javascript 理解和使用回调函数

本文介绍了JavaScript中函数作为对象的概念,展示了如何将函数作为参数传递和作为返回值使用。此外,还探讨了不同类型的回调函数及其应用实例,包括匿名函数、this对象的保护以及多重回调的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在javascript中,function是内置的类对象,也就是说它是一种类型的对象,可以和其他String、Array、Number、Objec类的对象一样用于内置对象的管理。因为function实际上是一种对象,它可以“存储在变量中,通过参数传递给(另一个)函数(function),在函数内部创建,从函数中返回结果值”。

因为函数名本身是变量,所以函数也可以作为值来使用。也就是说,不仅可以像传递参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回。

function callSomeFunction(someFunction, somaArgument) {
    return someFunction(somaArgument);
  }

  function add(num) {
    return num + 10;
  }
  var result1 = callSomeFunction(add, 10);
  console.log(result1); // 20;

  function getGreeting(name) {
    return "hello "+ name;
  }

  var result2 = callSomeFunction(getGreeting, "world");
  console.log(result2); // hello world;
这个calSomeFunction()函数是通用的,即无论第一个参数中传递进来的是什么函数,它都返回执行第一个参数后的结果。要访问函数的指针而不执行函数的话,必须去掉函数名后的那对括号。因此上面的列子中传递给callSomeFunction()的是add和getGreeting,而不是执行它们之后的结果。

下面我们再看几种回调函数。

在jQuery中常用的函数:

$("#btn").click(function() {
  alert("Btn  Clicked");
});
如上面的例子,我们传递了一个匿名函数给click方法的形参。click方法将会调用(或执行)我们传递给它们的回调函数。这个例子就是一个典型的回调函数的方式。

再看一个javascript的典型例子:

function callFunction(something) {
    for (var item in something) {
      console.log(item + ": " + something[item]);
    }

  }

  function getSome(obj, callback) {
    callback(obj);
  }

  getInput({name: "优快云", lang: "Javascript"}, callFunction);
返回的结果是优快云:Javascript。

讲callFunction作为参数传递给了getSome,在函数内,使用callback回调值,在calFunction中处理这个值。这样就形成了一个很好的函数处理过程。将各段处理都分开。

使用含有this对象的回调函数。当回调函数是一个含有this对象的方法时,我们必须修改执行回调函数的方法以保护this对象的内容。否则this对象将会指向全局的window对象,或者指向包含函数。

var obj = {
    name: null,
    setName: function (firstName, lastName) {
      this.name = firstName + "-" + lastName;
    }
  }

  function getName(firstName, lastName, callback) {
    callback(firstName, lastName);
  }

  getName('Tom','Jony',obj.setName);
  console.log(obj.name); // null
  console.log(window.name); // Tom-Jony
当obj.setName被执行时,this.name 不会设置obj 对象的name,而是设置window对象中的name,因为getName是一个全局函数。出现这种现象是因为在全局函数中this对象指向了window对象。
这个时候我们可以使用Call和Apply函数保护this对象。

var obj = {
    name: null,
    setName: function (firstName, lastName) {
      this.name = firstName + "-" + lastName;
    }
  }

  function getName(firstName, lastName, callback, callbackObj) {
    callback.call(callbackObj, firstName, lastName);
    // callback.apply(callbackObj, [firstName, lastName]);
  }

  getName('Tom', 'Jony', obj.setName, obj);
  console.log(obj.name); // Tom-Jony
这样就可以通过call函数正确的设置this对象,现在我们可以正确的执行回调函数并它正确地设置obj对象中的name。使用apply也是一样的。

多重回调函数也是可以得。一个典型的例子就是jQuery的ajax函数。

function successCallback() {
    // Do stuff before send
}

function successCallback() {
    // Do stuff if success message received
}

function completeCallback() {
    // Do stuff upon completion
}

function errorCallback() {
    // Do stuff if error received
}

$.ajax({
    url:"http://favicon.png",
    success:successCallback,
    complete:completeCallback,
    error:errorCallback

});








评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值