「前端」JavaScript中函数的定义方法

函数时我们在日常开发过程中经常使用的工具，它的定义方法大概就是两种：函数声明和函数表达式

函数定义

函数表达式

函数表达式是 JavaScript 中的一个既强大又容易令人困惑的特性。函数表达式有几种不同的语法形式。下面是最常见的一 种形式。

var functionName = function(arg0, arg1, arg2){
 //函数体
}; 

举个栗子：

示例1：

var x = function (a, b) {return a * b};// 返回入参之积

示例2：

 /**
   *  防止SQL注入,校验查询条件输入字段不能包含sql关键字
   */
  var antiSql = function(str) {
    const reg = /select|update|delete|exec|count|'|"|=|;|>|<|%/i;
    if (str) {
      if (reg.test(str)) {  // 存在输入sql关键字的情况，根据情况判断是否进行提示并阻止查询
        return false;
      } else {
        return true;
      }
    } else {
      return true
    }
  }

这种形式看起来好像是常规的变量赋值语句，即创建一个函数并将它赋值给变量 functionName。 这种情况下创建的函数叫做匿名函数（anonymous function），因为 function 关键字后面没有标识符。 （匿名函数有时候也叫***拉姆达函数***。）匿名函数的 name 属性是空字符串。

函数表达式与其他表达式一样，在使用前必须先赋值。以下代码会导致错误。

示例3：

  getNowDate(); // 报错，因为此时函数还不存在

  /**
   * 转换日期格式:yyyyMMdd
   */
  var getNowDate = function() {
    const value = new Date(); // 获取当前时间
    const year = value.getFullYear(); // 获取当前年
    const mouth = (value.getMonth() + 1) < 10 ? '0' + (value.getMonth() + 1) : (value.getMonth() + 1); // 获取当前月份
    const date = value.getDate() < 10 ? '0' + value.getDate() : value.getDate(); // 获取当前日
    return (year + '' + mouth + '' + date); // 返回yyyy MM dd格式日期
  }

自调用函数

函数表达式可以 “自调用”。自调用表达式会自动调用。如果表达式后面紧跟 () ，则会自动调用。不能自调用声明的函数。

通过添加括号，来说明它是一个函数表达式：

示例:4：

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

---

函数声明

首先是 function 关键字，然后是函数的名字，这就是指定函数名的方式。Firefox、Safari、Chrome 和 Opera 都给函数定义了一个非标准的 name 属性，通过这个属性可以访问到给函数指定的名字。这个 属性的值永远等于跟在 function 关键字后面的标识符；

//只在 Firefox、Safari、Chrome 和 Opera 有效
alert(functionName.name); //"functionName" 

函数定义栗子：

示例5：

 // 业务类别 返回变成下拉框的值
 function listToLabelvalue(data: any = [], label, value) {
    const tempArr = [];
    if (data) {
      data.forEach(item => {
        const tempObj = {
          'value': item[value],
          'label': item[label]
        };
        tempArr.push(tempObj);
      });
    }
    return tempArr;
  }

示例6：

/**
 *删除session指定值
 */
function  clearSession(key) {
    const session = window.sessionStorage;
    session.removeItem(key); // 删除session指定值
  }

关于函数声明，它的一个重要特征就是***函数声明提升（function declaration hoisting）***，意思是在执行代码之前会先读取函数声明。这就意味着可以把函数声明放在调用它的语句后面。

sayHi(); // 不会报错
function sayHi(){
 alert("Hi!");
} 

函数提升也是区别函数声明和函数表达式的重要标准，理解这一点，再看一个例子：

// 代码运行结果并不是你想设计的
if(condition){
 function sayHi(){
 	alert("Hi!");
 }
} else {
 function sayHi(){
 	alert("Yo!");
 }
} 

表面上看，以上代码表示在 condition 为 true 时，使用一个 ***sayHi()***的定义；否则，就使用另 一个定义。实际上，这在 ***ECMAScript ***中属于无效语法，JavaScript 引擎会尝试修正错误，将其转换为合 理的状态。但问题是浏览器尝试修正错误的做法并不一致。大多数浏览器会返回第二个声明，忽略 ***condition ***；Firefox 会在 *** condition ***为 true 时返回第一个声明。因此这种使用方式很危险，不应该 出现在你的代码中。不过，如果是使用函数表达式，那就没有什么问题了

//可以这样做
var sayHi;
if(condition){
 	sayHi = function(){
 	alert("Hi!");
 };
} else {
 	sayHi = function(){
 	alert("Yo!");
 };
} 

---

JavaScript中，函数可以作为一个值，也可以参与表达式：

示例7：

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3);

示例8：

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3) * 2;