JavaScript函数学习总结(一)---函数定义

博客原文地址：Claiyre的个人博客

如需转载，请在文章开头注明原文地址

在许多传统的OO语言中，对象可以包含数据，还可拥有方法，也就是属于该对象的函数。但在JavaScript中，函数也被认为是一个对象，一个Function对象，因此函数被称为JavaScript的一级公民（ first-class objects）！

普通函数定义与初始化

1.通过构造器Function

我们知道，JavaScript中Array，Date等基本类型的声明是通过其对应的构造器（关键字）来声明的。如

var arr1 = new Array();   #声明一个空数组
var date1 = new Date();   #声明一个时间对象，获取当前时间

与定义其他基本对象类型如Array，Date一样，JavaScript的函数是通过关键字Function来定义并初始化的

 new Function([arg1],[arg2](,[arg3,...]),functionBody);

举个栗子

var f1 = new Function('name','age','console.log("hello," + name);console.log("You are " + age)');
f1("Claiyre",20);

当然，除了这种‘吃力不讨好’的定义方法外，你还有其他更简洁的方法来定义一个函数！

2.通过函数声明（function statement）

语法：

function name([arg1,[,arg2,[...argn]]]) {
   functionBody;
 }

name是指定的函数名，arg是函数的参数，可以为任意多个（当然，不能超过可以表示的范围），functionBody为函数体。

栗子如下

function sayHi (name,age){
       console.log("hello," + name);
       console.log("you are " + age);
 }

3.通过函数表达式（function expression)

语法

   function [name]([arg1,[,arg2,[...argn]]]) {
       console.log("hello," + name);
       console.log("you are " + age);
   }

4.总结

• 方式2和方式3拥有几乎相同的语法，极其相似。但聪明的你一定发现了它们的不同之处了对不对O(∩_∩)O——函数表达式定义一个函数时可以省略函数名，从而创建一个匿名函数或一个立即执行函数(IIFE)。
• 相比于方式2和方式3，方式1用Function构造器声明函数的方式更为低效，因为后者生成的对象是在函数被创建时解析的，前者是和其他代码一起解析的。
• 通过函数调用的方式调用Function 的构造函数（不用new关键字）跟方式1是一样的
• 使用Function构造器，并不会在创建它的上下文(Context)中创建闭包，所以它们只能访问自身局部变量和全局变量，相当于它们总是在全局作用域中被创建的，即便实际并不是！

myName = 'outer';
var person = {
                myName: 'inner',
                sayHi: new Function('like','console.log("I am "+ myName + "!I like " + like)')
            };
 person.sayHi("banana");

结果如下：

generator（生成器）函数的定义

generator是ES6标准引入的新的数据类型，旨在利用生成器函数返回一个对象，该对象遵守迭代器协议，而generator的环境(context)在每次执行后都会被保存，以便迭代器对象再次使用，每次迭代就相当于生成一个新的函数，这也是命名为generator（函数生成器）的缘故吧。迭代器协议是ES6标准引入的新协议之一，具体参见 the iterable protocol

与普通函数类似，generator函数也有三种定义方式，但与普通函数稍有不同，具体如下

1. 通过GeneratorFunction构造器

    new GeneratorFunction ([arg1[, arg2[, ...argN]],] functionBody)

1. 通过function* 声明（function* statement）

    function* name([param[, param[, ... param]]]) {
         statements
     }

1. 通过function表达式（function expression）

    function* [name]([param1[, param2[, ..., paramN]]]) {
       statements
    }

调用一个生成器函数并不会立即执行它的主体，而是返回一个与该函数对应的迭代器对象，当调用这个迭代器对象的next()方法时，生成器函数的主体才会被执行，直到遇见第一个 yield表达式

纸上谈兵终觉浅，我们来看一个例子

function* idMaker(){
  var index = 0;
  while(index < 3)
    yield index++;
}

var gen = idMaker();   // 此时并没有执行idmaker的主体

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // undefined

即可用yield指定要返回的值，也可用 yield* 委派另一个generator函数对象

如下

function* generatorOne(index){
   yield index;
   yield* generatorTwo(index);
   yield index+10;
}

 function* generatorTwo(index){
   yield index+1;
   yield index+2;
   yield index+3;
}

var ge = generatorOne(10);
console.log(ge.next());
console.log(ge.next());
console.log(ge.next());
console.log(ge.next());
console.log(ge.next());
console.log(ge.next());

运行结果如下：

我们可以看到ge.next()返回了一个对象，该对象有两个属性，value是其返回的值，done代表迭代器是否迭代到了尽头

generator就像是一个不用占用任何全局变量就可以记住执行状态的函数，它的好处当然不只是上面例子那样简单，关于优点和用处，个人认为廖雪峰老师写的已相当不错，参见generator

箭头函数的定义

ES6标准有一个深受广大程序猿喜爱的新属性，那就是箭头函数。它的定义就是用一个箭头。其具体语法如下

let add = x => x+1 ;
add(10);   //11

是不是很简便呢？

当然如果有多个参数的话，需要给所有参数加上括号

let add = (x,y) => x+y ;
add(5,6);

以此类推，如果函数体有多条语句的话，也应该给函数体加上{}

此外，箭头函数的另一个特殊之处是它的this总是指向词法作用域，不能被改变,比如：

var myName = "outer";
var person = {
    myName:"inner",
    age:20
};
var sayHi= ()=>console.log(this.myName);
sayHi();                                  //outer
sayHi.call(person);                       //outer

参考资料：

MDN JavaScript