【Day 21】JavaScript 函式

JavaScript (function) 函式

说明 : 用来将会重复使用的程序码封装在一起，方便重复执行。一个函式的定义由一系列的函式关键词组成，依次为：

• 函式的名称。
• 包围在括号()中，并由逗号区隔的一个函式参数列表。
• 包围在大括号{}中，用於定义函式功能的一些JavaScript语句。

陈述式函式(具名函式)

函数的宣告语法：

function functionName(parameter1, parameter2, ...) {
    // statements

    // return value;
}

我们用 function 这个关键字来宣告一个函数
紧接着是指定这个函数的名称 functionName
然後小括号 () 里面指定这个函数的参数，可以用逗点 , 分隔多个参数
最後在大括号 {} 里面则是你想封装在这个 function 的程序码
一个函数可以有返回值，使用 return 关键字来返回一个值
一个 function 如果不需要参数，小括号还是不能省略，写成如下:

function functionName() {
    // statements
    
    // return value;
}

一个 function 也可以没有返回值，亦即省略 return 语句，预设会返回 undefined

函式表达式(具名及匿名函式)

上述函式定义都是用的是陈述式，函式也同样可以由函式表达式来定义。这样的函式可以是匿名的；它不必有名称。
例如上面提到的函式也可这样来定义：

var expressionName = function functionName() {
    // statements
    
    // return value;
}

匿名写法则为:

var expressionName = function () {
    // statements
    
    // return value;
}

IIFE (立即执行函式)

IIFE (Immediately Invoked Function Expression) 是一个定义完马上就执行的JavaScript function。他又是Self-Executing Anonymous Function 翻译是自我执行匿名函式 ，也是一种常见的设计模式，包含两个主要部分：第一个部分是这样的写法可以避免里面的变化数字污染到全域范围。
第二个部分是马上执行函数的表达式()，JavaScript 引擎看到它会马上转译该函数。
写法为:

(function(){...})()

箭头函式

JavaScript在ES6(ECMAScript 2015)加入了箭头函式 箭头函数表达式 (=>) 的语法，使函式的语法更为简洁。

陈述式函式(具名函式)
function functionName(parameter1, parameter2, ...) {
    // statements

    // return value;
}

改为箭头函式写法为:

(parameter, parameter2, ...) => {
   // statements
   
   // return value;
}

函式表达式(具名及匿名函式)

var expressionName = function functionName(parameter, parameter2, ...) {
    // statements
    
    // return value;
}

改为箭头函式写法为:

var expressionName = (parameter, parameter2, ...) => {
   // statements
   
   // return value;
}

// 只有一个参数时,括号才能不加:

function(单一参数) {
  statements;
}

改为箭头函式写法为:

(单一参数) => { statements; }
单一参数 => { statements; }

//若无参数，就一定要加括号:

function() {
  statements;
}

改为箭头函式写法为:

() => { statements }