网页设计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的引用, 即在函数名的后面没有括号“（）”，所以实际函数并没有被调用。如在函数名后有（）表示调用它，取它的返回值。