網頁設計t實戰之JavaScrip(5) -- 函數function(函數定義、函數表達式、函數生成器、箭頭函數、Function構造函數、默認參數、剩餘參數、可變參數、塊級函數)

一、函數概述

• 函數是爲了完成某一功能的程序指令(語句)的集合或程序塊。在JavaScript中，每個函數其實都是一個Function對象。
• 函數分爲：自定義函數和系統函數
• 函數的調用方式：
  （1）普通調用：functionName(實際參數…)
  （2）通過指向函數的變量去調用：
  　　　　var functionVar=函數名;
  　　　　functionVar(實際參數…);
  　　調用函數時，傳遞給函數的值被稱爲函數的實參（值傳遞），對應位置的函數參數名叫作形參。如果實參是一個包含原始值(數字，字符串，布爾值)的變量，則就算函數在內部改變了對應形參的值，返回後，該實參變量的值也不會改變。如果實參是一個對象引用，則對應形參會和該實參指向同一個對象。假如函數在內部改變了對應形參的值，返回後，實參指向的對象的值也會改變：
• 函數返回值:
  　　一個函數中沒有使用return語句，則它默認返回undefined。要想返回一個特定的值，則函數必須使用 return 語句來指定一個要返回的值。

二、函數定義

1、函數聲明 (函數語句)

function 函數名(參數1, 參數2,… )
{
語句;
return 返回值;
}

參數可以有，也可以沒有。
return 也可以沒有。

function fun1(parm1)
{
	return parm1+2;
}
function fun2(parm1)
{
	alert(parm1);
	return ;
}

function fun3()
{
	alert("無參數，無返回值");
}

2、函數表達式

var myFunction = function 函數名(參數）
{
語句;
return 返回值;
}

• 函數名，可以省略，即匿名函數。
• 一個函數最多可以有255個參數
• 返回值可有可無。

// 匿名函數
var no_name = function(a, b) {
    return a+b;
}
var ret = no_name(10,20);
var has_name = function func_name(a, b) {
    return a+b;
}
ret = has_name(1, 2);

• 當函數只使用一次時，通常使用IIFE (立即調用函數表達式）
  (function() {
  語句；
  return 返回值;
  })();

var ret = (function(a, b) {
		   return a+b;
		})(1,2);

3、函數生成器聲明

function* 函數名(參數) {
　　　函數體
}

稍微不好理解，看一下例子：

function* generator(x) {
      console.log('x', x);
      let a = yield x;
      console.log('a', a);
      let b = yield (x + 1) + a;
      console.log('b',b);
      yield a + b;
      console.log('a + b =', a + b);
      return a + b;
 }
generator(10);
let g = generator(10);
console.log(g.next());
console.log(g.next(1000).value);
console.log(g.next(50));
console.log(g.next());

4、箭頭函數表達式 (=>)

(參數) => { 函數體 } 參數=> 表達式
無參數時需要用()表示. 只有一個參數時不需要括號. (例如 foo => 1)

var absx = (a) => { if (a < 0) { return -a; } return a; }
var ret = absx(-10); // ret = 10; 

5、Function構造函數

new Function (參數, 函數體)

const sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 6));

6、生成器函數的構造函數

new GeneratorFunction (參數, 函數體)

var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor
var g = new GeneratorFunction("a", "yield a * 2");
var iterator = g(10);
console.log(iterator.next().value); // 20

三、函數參數

1、默認參數

如果沒有值或傳入了未定義的值，默認函數參數允許形式參數使用默認值初始化。

function x(a, b = 1) {
  return a * b;
}
var ret = x(2); // ret = 2 <-- 2*1:b的值爲默認值
ret = x(2,3); // ret = 6 <-- 2*3:b的值不是默認值

2、剩餘參數

剩餘參數語法允許將數量不限的參數描述成一個數組

unction(a, b, …theArgs) {
// …
}

• 一個函數，僅能出現一個剩餘參數
• 一個函數，如果有剩餘參數，剩餘參數必須是最後一個參數

function sum(...args) {
    // args收集裏了所有的參數，形成的要一個數組
    let sum = 0;
    for (let i = 0; i < args.length; i++) {
        sum += args[i];
    }
    return sum;
}
console.log(sum(1)) //1   
console.log(sum(1, 2)) //3
console.log(sum(1, 2, 3)) //6
console.log(sum(1, 2, 3, 4)) //10

3、可變參數（arguments對象）

當參數個數不確定時，可以用arguments對象實現可變參數。
arguments 是一個對應於傳遞給函數的參數的類數組對象。

arguments對象是所有（非箭頭）函數中都可用的局部變量。使用arguments對象在函數中引用函數的參數。此對象包含傳遞給函數的每個參數，第一個參數在索引0處。

function add() {
    var sum =0,
        len = arguments.length;
    for(var i=0; i<len; i++){
        sum += arguments[i];
    }
    return sum;
}
add()                        // 0
add(1)                       // 1
add(1,2,3,4);                // 10
add(3,4);                   // 7

四、塊級函數

在strict模式下，塊裏的函數作用域爲這個塊。

'use strict'; // 指定strict模式
// 外層的函數， 可認爲是全局的f()
function f() { 
  return 1; 
}

{  // 一個塊，
  // 在塊中再定義一個f()函數，只在塊內可以使用。
  function f() { 
    return 2; 
  }
}

f() === 1; // true // 此時使用的是外層的f()函數，而不是塊內的f()函數。
// 如果【'use strict'】去掉，那麼f() 應該返回2，調用的是塊中定義f()函數

五、函數是否存在

typeof 操作符檢測一個函數是否存在。

 if ('function' === typeof window.mytest) {
   window.mytest();
 }
 else
 {
     console.log("no exist function");
 }

• 在if語句中，使用了mytest的引用, 即在函數名的後面沒有括號“（）”，所以實際函數並沒有被調用。如在函數名後有（）表示調用它，取它的返回值。