Javascript中匿名函数的多种调用方式总结

Javascript中匿名函数的多种调用方式总结

什么是匿名函数

匿名函数就是没有名字的函数，也称为“内联函数”、“临时函数”或“lambda函数”。

匿名函数的定义方式

函数表达式

函数表达式是定义匿名函数最常用的方式。语法格式如下：

var func = function() {
  // 函数体
}

立即执行函数表达式

立即执行函数表达式是一种定义后就立即执行的匿名函数。它的作用是避免污染全局命名空间，使得内部变量无法被外界访问。语法格式如下：

(function() {
  // 函数体
})()

回调函数

回调函数是一种将函数作为参数传递给另一个函数的方式。这种方式常用于异步编程中的事件处理，例如定时器和Ajax等。语法格式如下：

function asyncFunction(callback) {
  // 异步操作结束后调用回调函数
  callback()
}
// 使用方式
asyncFunction(function() {
  // 回调函数体
})

匿名函数的多种调用方式

作为函数调用

最普通的方式是将函数作为普通函数调用，直接通过函数名加括号的方式调用：

function() {
  // 函数体
}()

作为方法调用

将函数作为对象的方法调用，在该对象上调用该函数。语法格式如下：

var obj = {
  func: function() {
    // 函数体
  }
}
obj.func()

作为构造函数调用

将函数作为构造函数使用，返回一个新的对象。语法格式如下：

var func = function() {
  // 函数体
}
var obj = new func()

apply/call调用

通过apply/call方法调用函数，并且可以绑定函数内部this指针和参数。语法格式如下：

function func(arg1, arg2) {
  // 函数体
}
func.call(thisObj, arg1, arg2)
func.apply(thisObj, [arg1, arg2])

示例说明

示例一：使用回调函数进行异步加载

function ajax(url, callback) {
  var xhr = new XMLHttpRequest()
  xhr.open('GET', url)
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      callback(xhr.responseText)
    }
  }
  xhr.send()
}
ajax('/data.json', function(data) {
  var obj = JSON.parse(data)
  console.log(obj)
})

在上述示例中，定义了一个名为ajax的函数，用于发送Ajax请求。异步操作完成后，调用回调函数处理返回的数据。

示例二：使用立即执行函数创建沙箱环境

(function() {
  // 将代码放在匿名函数中
  var x = 1
  console.log(x)
})()
console.log(typeof x) // undefined

在上述示例中，使用立即执行函数创建一个沙箱环境，防止全局污染。在匿名函数内定义变量x，在函数外部无法访问。