30天不间断的文章之旅_函式的基本介绍

哎呀！因为周末打了疫苗，不小心烧了两天醒醒睡睡的，本来说好是30天不间断的文章之旅，断了2天，大家原谅原谅我吧～

那今天要来介绍的是JavaScript里最常见、最常被使用到的函式 Function。 那老样子若有错误或需要补充的地方，也欢迎在下方留言让我知道喔～～～谢谢大家！！

函式的结构

由上面的图可以知道

1. 当我们要宣告一段函式时，需要使用 function 的关键字。
2. 後面加上函式的名称，函式可以传入参数，但必须先给予参数一个名称(这里给a)，传入的参数跟参数的名称没有关系，而传入的参数可以是纯值、可以是物件、也可以是另一段函式。
3. 函式内可以包裹一段程序码，而范围就是限制在{}内。
4. 可以使用 return 回传一段值。
5. {}外可以呼叫函式执行，()内的数值就是参数，会被传入到函式内部使用。
   因此我们可以知道，函式是将一或多段的程序码包装起来，可以重复使用也方便维护。

函式定义的方式

• 函式陈述式
• 函式表达式
  （这里介绍常见的两个方式）

1. 函式陈述式

函式陈述式应该是最常见宣告函式的方式

像一开始的范例就是使用这个方式。
使用函式陈述式的方式建立的函式，必须给予函是一个名称，也称为具名函式。在这里的函式名称 aFunction。

2. 函式表达式

let aFunction = function(width, height) {
 console.log(width, height)
 return width * height;
}

console.log(aFunction(3, 4)); // 12

把一段函式透过等号运算值赋予到另一个变数上，这个就是函式表达式，这个方式可以不用帮函式加入名称，因此也称为匿名函式。
那如果我们想要在函式表达式的函式加上名字，可以吗？
ok！是可以这麽做的

let aFunction = function anotherFunction(width, height) {
  console.log(anotherFunction);
  return width * height;
}
console.log(aFunction(3, 4)); // 12

但是必须注意一个重点，这个 anotherFunction只会在自己的函式区块内有效，也就是说：

let aFunction = function anotherFunction(width, height) {
  console.log(anotherFunction); // function
  return width * height;
}
console.log(aFunction(3, 4)); // 12
console.log(anotherFunction); //anotherFunction is not defined

跳出自己的函式区块之後，anotherFunction就不存在了。

全域变数与区域变数

什麽是全域变数？什麽是区域变数？我们透过下面程序码来了解。

var global = '全域变数';
function aFunction() {
  var global = '区域变数';
  console.log(global); //区域变数
}
aFunction();
console.log(global); //全域变数

在上述程序码中，我们可以看到有两个一样的变数名称global，但是一个在aFunction函式外，另一个aFunction函式内。在ES6以前，JavaScript 变数有效范围的最小单位是以 function 做切分的。 因此在aFunction函式外的global是全域变数，而在aFunction函式内的global是属於区域变数。

全域变数是在整份程序码内都有效，而且会被记忆进电脑的记忆体内占用空间。
但是区域变数只在该函式内有效，当函式执行完，区域变数也随即被清空，记忆体会被释放。也就是说，跳出该函式的范围{}，就无法取得函式内所宣告的变数了。

因此我们试着在 aFunction 内跟外取得 global变数，会发现我们取得了两个不一样的值，这个就是全域变数与区域变数的概念。

Hoisting (提升)

在上一篇变数宣告时，有提到变数会有Hoisting的状况产生，还记得吗？

console.log(myName); // undefined
var myName = 'Iven';

如果在 var 的变数前加入 console.log()，这个时候并不会出错，则是会跳出 undefined，这表示这个变数在记忆体中已经有一个位置，只不过目前并没有值。

在函式中也是有着 Hoisting 的概念的。

console.log(aFunction);  //undefined
aFunction(); // aFunction is not a function
var aFunction =  function() {
  var global = '区域变数';
  console.log(global);
}

在函式表达式的 Hoisting 跟变数宣告一样，在函式执行之前，会先在记忆体中加入一个位置，但还没有把函式赋予到指定的变数上，因此会得到 aFunction is not a function的结果。

那函式陈述式呢？
函式陈述式就不一样罗！函式陈述式在创造阶段就会优先载入函式。

aFunction('一个人');
function aFunction(people) {
  console.log('我是'+people); //我是一个人
}

因此，在函式前方直接执行函式也可以运行。

以上是今天介绍的函式的基本观念，当然函式的学问绝对不只这些，还有立即函式、ES6推出的箭头函式，我会再慢慢介绍的。
如果我有写不对的地方，如果我有写错或是有需要补充的，都欢迎大家跟我说喔～
如果觉得我写得不错，很清楚的话也欢迎让我知道喔～
谢谢大家观看