JavaScript函数声明的几种方式

夜雨炊烟

已于 2023-08-11 09:46:55 修改

阅读量226

点赞数

文章标签： javascript 前端开发语言

于 2023-05-22 09:50:13 首次发布

本文链接：https://blog.csdn.net/anthony1021/article/details/130800993

版权

前端再怎么发展也离不开JavaScript的贴心陪伴，函数作为JavaScript的第一等公民，有着它自己的亮点，下面我们来介绍下作为第一等公民有哪几种声明方式。

使用语法是ES5，ES6箭头函数代入就可以

普通函数声明

 function fun() {
   console.log("我是一等公民")
 }
 fun()

在声明的时候必须包含名称，因为如果不包含名称的话会被认定为表达式，而如果作为表达式的话又不能以function作为开头。所以，还是把名称加上吧。

括号里面可以传入参数，我们称它们为“形参”，调用的时候在调用方法中填入的叫做“实参”，可以看下面例子：

 function fun(a, b) {
   let sum = a + b;
   console.log("计算结果：", sum) // 5
 }
 fun(2, 3)

匿名函数

比较特殊的是匿名函数在创建之后是不可以直接运行访问的，如果想要访问可以使用下面这种方式：

 (function () {
    console.log('111');
 })()

因为不能直接访问，所以这个重担交给表达式处理会比较合适，可以通过赋值变量进行访问。

函数表达式

函数表达式允许我们创建一个没有任何函数名的匿名函数。并且通过声明一个变量通过赋值来执行它。

 let fun = function () {
    console.log('111');
  }
 fun()

除了使用匿名函数表达式外我们也可以使用命名函数表达式，方式如下：

 let fun = function name() {
   console.log('111');
  }
 fun()

在这种情况下，函数名称是不允许在函数外部访问的，只能在函数内部调用，可以看下面例子使用命名表达式实现经典斐波那契数列：

 let fun = function fib(n) {
   if (n < 0) {
    console.log('输入的数字不能小于0');
    return false
   } else {
     if (n == 1 || n == 2) {
       return 1;
     } else {
       return fib(n - 1) + fib(n - 2);
     }
   }
 }
  console.log(fun(6)); // 8

构造函数

主要是使用new函数名来进行实例化函数，与上面函数声明不同的是构造函数在定义时首字母大写，这个是作为规范来定义声明的。

使用构造函数可以更方便的创建对象实现复杂的需求，通过下面的例子可以有一个更清晰的认识

 function Fun(name, age) {
   // 使用this指向这个参数
   this.name = name
   this.age = age
  }
 let res1 = new Fun("小明", 18)
 let res2 = new Fun("小红", 28)
 let res3 = new Fun("小张", 24)
  
 console.log(res1, res2, res3);
 // { name: '小明', age: 18 } Fun { name: '小红', age: 28 } Fun { name: '小张', age: 24 }