函数几种声明方式

93 阅读2分钟

常见的函数声明

//声明函数
function myfun() {
  console.log('123')
}
//调用函数
myfun();//123

或着使用变量声明函数
var myfun = function() {
  console.log('123')
}
myfun();//123

这就是常见的函数声明,用函数声明的名字加()就可以调用函数方法了

匿名函数

//匿名函数顾名思义,就是没有名字的函数
function() {
  console.log('123')
}
//但是这样写会报错,而且也不会执行,这就需要用到下面的自执行函数
(function() {
  console.log('123');
})();

匿名函数因为没有名字所以没法用名字调用这个方法,就需要用自执行调用

自执行函数

(function myfun() {
  console.log('123')
})();

js 中()括号里只能是表达式,所以这里的 function就会被解析为表达式,而不是函数声明,在后面再跟一个括号,就会自执行一次函数

箭头函数

//函数只执行一行表达式时
(a, b) => (console.log(a + b))
//如果只有一个参数也可以简写
n => console.log(n)

箭头符号=>左边()是参数,右边()是表达式(执行逻辑),如果只有一行表达式时就可以用()包裹这行表达式直接返回结果

//函数想执行多行表达式时
let sum = (a, b) => {
  let result = a + b
  console.log(result)
  return result
}
console.log(sum(1, 2))

当有多行表达式的时候需要用花括号{}包裹,使用花括号要用 return 显式的返回结果

回调函数

function myfun(callback) {
  callback()
}
function callback() {
  console.log('123')
}
myfun(callback)

虽然不传递这个 callback 参数也能执行,且执行结果一样,但是从封装角度来讲,传递了这个参数,对于维护更好

Promise

//创建一个 promise对象
const promise = new Promise()

//它有两个参数,一个表示成功(解决),一个表示失败(拒绝)
const promise = new Promise((resolve, reject) =>{
  if(success){
    return resolve('成功')
  } else {
    return reject('失败')
  }
})

.then()方法处理resolve成功状态的回调函数
.catch()方法处理 reject 失败状态的回调函数

 promise.then(result => {
   console.log(result);
 }).catch(error => {
   console.log(error)
 })
 //promise 可以链式调用,一个可以接很多个.then.then,就像这样promise.then(//回调函数).then(//回调函数).then(...).catch(...)
 //但是.catch 只有一个

promise一般用于请求接口的时候,等待数据请求完成之后再进行其他操作时使用