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函数也有三种定义方式，但与普通函数稍有不同，具体如下
- 通过GeneratorFunction构造器
new GeneratorFunction ([arg1[, arg2[, ...argN]],] functionBody)
- 通过function* 声明（function* statement）
function* name([param[, param[, ... param]]]) {
statements
}
- 通过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
