JavaScript函数

1. 函数的作用

函数允许我们封装一系列代码来完成特定任务。当想要完成某一任务时，只需要调用相应的代码即可。方法（method）一般为定义在对象中的函数。JavaScript 使用关键字 function 定义函数。

函数的作用：

• 功能的封装，直接调用，代码复用率提高
• 构建对象的模板（构造函数）

2. 函数的声明

• 函数声明

function 函数名(形参列表){
    //函数体
}

• 函数表达式

var 函数名 = function(形参列表){
    //函数体
}

• 函数声明与var变量声明类似，会进行提升

foo();  // 函数声明提升到代码的最前边，可以直接调用函数
function foo(){
  console.log("hell world");
}
// 变量声明提升  变量声明提升到代码的前边，函数声明之后正常代码之前
console.log(a);   //undefined  这里不报错，因为后边有var a的声明。变量的声明进行提升到前边
var a = 'hello';  
console.log(a);   //'hello'

3. 函数内部属性

只有在函数内部才能访问的属性。this也可以在函数外部进行使用。

• arguments

ECMAScript函数的参数与大多数其他语言中的函数的参数有所不同，ECMAScript函数不介意传递参数的个数以及参数类型，这是因为函数的参数在函数内部是使用一个类数组对象来表示的。这个类数组对象就是arguments，它包含着传入函数中的所有参数。这个对象还有一个名为callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。

function add(a,b){
  return a+b;
}
add(22,42,12,44);
/*参数：接收实参的快捷方式
	函数外部：实参保存的就是原始数据
	函数内部：arguments保存真正的实参
*/
// arguments类数组对象
arguments = {
	"0" : 22,
	"1" : 42,
	"2" : 12,
    "3" : 44
};

callee 属性是 arguments 对象的一个成员，仅当相关函数正在执行时才可用。

callee 属性的初始值就是正被执行的 Function 对象。

// 实现匿名的递归函数
var sum = function (n) {
  if (1 == n) {
      return 1;
  } else {
      return n + arguments.callee(n - 1);
  }
}
console.log(sum(6));//输出结果：21

• this

在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

1. 在方法中，this 表示该方法所属的对象。

2. 如果单独使用，this 表示全局对象。

3. 在函数中，this 表示全局对象。

4. 在事件中，this 表示接收事件的元素。

5. 在显式函数绑定时，我们可以自己决定this的指向

4. IIFE

Immediately Invoked Function Expression，意为立即调用的函数表达式，声明函数的同时立即调用这个函数。

作用：

• 页面加载完成后只执行一次的设置函数。

• 将设置函数中的变量包裹在局部作用域中，不会泄露成全局变量。

(function foo(){
  var a = 10;
  console.log(a);
})();

为什么需要IIFE？

        如果只是为了立即执行一个函数，显然IIFE所带来的好处有限。实际上，IIFE的出现是为了弥补JS(ES5)在作用域方面的缺陷：JS只有全局作用域（global scope）、函数作用域（function scope），从ES6开始才有块级作用域（block scope）。对比现在流行的其他面向对象的语言可以看出，JS在访问控制这方面是多么的脆弱！那么如何实现作用域的隔离呢？在JS中，只有function才能实现作用域隔离，因此如果要将一段代码中的变量、函数等的定义隔离出来，只能将这段代码封装到一个函数中。在我们通常的理解中，将代码封装到函数中的目的是为了复用。在JS中，当然声明函数的目的在大多数情况下也是为了复用，但是JS迫于作用域控制手段的贫乏，我们也经常看到只使用一次的函数：这通常的目的是为了隔离作用域了！既然只使用一次，那么立即执行好了！既然只使用一次，函数的名字也省掉了！这就是IIFE的由来。

5. 作用域

ES5中

函数作用域： 在 JavaScript函数中声明的变量，会成为函数的局部变量。

                        函数内部声明的变量，在函数外部不能访问。

全局作用域：函数之外声明的变量，会成为全局变量。

                        函数外部声明的变量，在函数内部可以访问。

                        当函数嵌套，在这个时候，内部函数与外部函数的这个变量就组成了闭包。

// ES5中没有块级作用域
{
  var a = 10
}
console.log(a); // 10

//全局作用域：global/window/本文件内
var v1 = 10;
v2 = 20; // 所有末定义直接赋值的变量自动声明为拥有全局作用域
function foo() {
  // 函数作用域、局部作用域
  var a = 3;
  console.log(v1, v2); 
  console.log(this);
}
foo()
console.log(a); // a is not defined

var a = 10;

function foo() {
  // 当函数内部有变量a时，会产生局部作用域，外界全局作用域中的a不会对函数内部造成影响
  // 如果把函数内部的变量a注释掉是，函数内部的a输出的就是全局作用域中的a
  console.log(a); //undefined
  var a = 100;
  console.log(a); // 100

  function fn() {
    console.log(a); //undefined
    var a = 200;
    console.log(a); // 200
  }
  fn()
}
foo()

作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。

作用域链：

• 自由变量：当前作用域没有定义的变量，这成为自由变量 。自由变量的值如何得到，要到创建这个函数的那个父级作用域寻找，如果没有就一直向上级祖先元素寻找。

• 作用域链：一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃。这种一层一层的关系，就是作用域链 。

6. 函数调用

• 函数名(实参列表);

• 函数名.call(执行环境对象,实参列表);

• 函数名.apply(执行环境对象,实参列表数组);

• 函数名.bind(执行环境对象)(实参列表);

注意：如果call和apply的第一个参数是null，那么this在node环境下指向的是global对象，在HTML中指向的是window对象。

总结：call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加，这是它们的区别，根据自己的实际情况来选择使用。

7. 函数的应用

• 回调函数

//定义主函数，回调函数作为参数
function A(callback) {
  callback();
  console.log('我是主函数');
}
//定义回调函数
function B() {
  // 模仿延时操作
  setTimeout(() => {
    console.log('我是回调函数');
  }, 3000);
}
//调用主函数，将函数B传进去
A(B);

回调函数的作用：回调函数一般都用在耗时操作上面：因为主函数不用等待回调函数执行完，可以接着执行自己的代码。比如ajax请求，比如处理文件等。  

• 作为返回值

var a = 10
function fn() {
  var b = 20
  function bar() {
    console.log(a + b) //30
  }
  return bar
}
var x = fn(), // 执行fn() 返回的是bar
b = 200
x() //执行x，就是执行bar函数

8. 闭包

闭包就是指有权访问另一个函数作用域中的变量的函数。

MDN 上面这么说：闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。

闭包的生成有三个必要条件

• 函数嵌套函数

• 内部函数引用了外部函数中的数据（属性、函数）

• 参数和变量不会被回收

这样就形成了一个不会销毁的函数空间

• 产生一个闭包

创建闭包最常见方式，就是在一个函数内部创建另一个函数。

function func() {
  var a = 1, b = 2;

  function closure() {
    return a + b;
  }
  return closure;
}
console.log(func()()); // 3

闭包的作用域链包含着它自己的作用域，以及包含它的函数的作用域和全局作用域。

• 闭包的用途

一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

function f1() {
  var n = 999;
  nAdd = function () { n += 1 }
  function f2() {
    console.log(n);
  }
  return f2;
}
var result = f1();
result(); // 999
nAdd();
result(); // 1000

• 使用闭包的注意点

1. 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露，这是IE的BUG。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2. 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。多个子函数的scope都是同时指向父级，是完全共享的。因此当父级的变量对象被修改时，所有子函数都受到影响。

解决内存泄露问题：在使用完之后把变量设置为null