JavaScript基础知识点解读—函数

说起ECMAScript中什么最有意思，我想那莫过于函数了——而有意思的根源，则在于函数实际上是对象。每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。

如何理解函数是对象？

在JavaScript基础知识点解读—对象这篇文章的后半部分已经介绍过JavaScript中函数和对象之间的关系。

创建函数

有三种基本的函数创建方式。

// 1 使用function声明
function add(num1, num2) {
  return num1 + num2;
}

// 2 函数表达式
var add = function(num1, num2) {
  return num1 + num2;
}

// 3 使用new Function创建
var add = new Function("num1", "num2", "return num1 + num2"); //不推荐

创建函数的时候一定要理解在JavaScript中函数没有重载。

什么是重载？

面向对象编程语言的三大基本特征：封装，继承和多态。

实现多态的两种方式：
覆盖（重写），子类重新定义父类中的虚函数
重载，是指允许存在多个同名函数，而这些函数的参数表不同（或许参数个数不同，或许参数类型不同，或许两者都不同）。

更多的面向对象语言的特性就不做更多的解释。一定要记住JavaScript中没有重载。为什么？因为使用function声明的函数后面声明的函数会把前面声明的函数覆盖掉，同一个函数名只保留一个最后一个定义的函数体。使用var声明的函数表达同样存在覆盖的情况，看下面例子。

// 1 使用function声明函数
function addSomeNumber(num) {
  return num + 100;
}
function addSomeNumber(num) {
  return num + 200;
}
var result = addSomeNumber(100); // 300

// 使用函数表达式
var addSomeNumber = function(num) {
  return num + 100;
};
addSomeNumber = function(num) {
  return num + 100;
};
var result = addSomeNumber(100); // 300

函数声明和函数表达式

思考！函数声明和函数表达式有什么区别？

函数声明有函数提升的作用，即解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问）。至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。

// 函数声明
sum(10, 10); // 20
function sum(num1, num2) {
  return num1 + num2;
}

// 函数表达式
sum(10, 10); // 报错 Uncaught TypeError: sum is not a function
var sum = function(num1, num2) {
  return num1 + num2;
}

作为值的函数

在ECMAScript中，函数名本身就是变量，所以函数也可以作为值来使用。比如下面的程序。

function callSomeFunction(someFn, someArgument) {
  return someFn(someArgument);
}

function add10(num) {
  return num + 10;
}

var result = callSomeFunction(add10, 10);
console.log(result); // 20

这里记住函数名也是变量，和普通变量的区别是在函数名变量后面加上“()”后可以执行即可。

函数内部属性

在函数内部有两个特殊的对象：arguments和this。

arguments，是一个类数组对象，它里面存的是传入函数中的所有参数。这个对象还有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。请看下面这个非常经典的阶乘函数。

function factorial(num) {
  if(num <= 1) {
    return 1;
  } else {
    return num * factorial(num - 1);
  }
}

定义阶乘函数一般都要用到递归算法；如上面的代码所示，在函数有名字且名字以后也不会变的情况下，这样定义没有问题。问题是这个函数的执行与函数名factorial紧紧耦合在了一起。想要消除这种紧密耦合的现象，可以像下面这样使用arguments.callee。

function factorial(num) {
  if (num <= 1){
    return 1;
  } else {
    return num * arguments.callee(num - 1);
  }
}

使用arguments.callee到底有什么作用呢？请看下面的程序。

var trueFactorial = factorial;
factorial = funciton() { return 0; };
console.log(trueFactorial(5)); // 120
console.log(factorial(5)); // 0

将factorial函数的指针赋值给trueFactorial 后，即使原函数factorial被重新定义，函数trueFactorial依然可以实现阶乘的功能。

this，是函数内部的另一个特殊对象。this引用的是函数据以执行的环境对象。说到this，顿时感觉有说不完的话要表达了。

思考！在程序执行的过程中，this到底指向（代表）了什么？

请看下面的程序，程序有些长，也可以先看下面this指向的规律后再分析程序。

// 1
var color = "red";
var obj = {
  color: "blue"
};
function getColor() {
  console.log(this.color);
};
getColor(); // "red"
obj.getColor = getColor;
obj.getColor(); // "blue"

// 2
function colorFull() {
  var color = "yellow";
  function getColor() {
    console.log(this.color);
  }
  getColor(); // "red"
}
colorFull();

// 3
var name = "window";
var object = {
  name: "object",
  sayName: function() {
    function innerFunction() {
      console.log(this.name); // "window"
    }
    innerFunction();
    return function() {
      console.log(this.name); // "window"
    }
  }
}
object.sayName()();
// 4
var obj = {
  value: 37,
  fun: function() {
    return this.value;
  }
}
var fun1 = obj.fun;
console.log(fun1()); // undefined
// 原型链中的this
var obj = {
  a: 2,
  b: 5,
  fun: function() {
    return this.a + this.b;
  }
}
var o = Object.create(obj);
o.a = 1;
o.b = 2;
console.log(o.fun()); // 3
// 构造函数中的this
function C() {
  this.a = 1;
}
var o1 = new C();
console.log(o1.a); // 1

function C2() {
  this.a = 2;
  return {a: 3}
}
var o2 = new C2();
console.log(o2.a); // 3 好诡异

从上面的程序中我们可以得出使用this的几条规律。

1. this的指向是在函数执行时候确定的。

2. 函数如果有直接调用者对象（如object.fun()），那么函数内部的this执行该调用者对象（即object）；如果函数没有直接调用者对象，那么函数内部的this对象指向的是window对象。原型链中的方法的this仍然指向调用它的对象

3. 构造函数的this与被创建的新对象绑定，当构造器返回的默认值是一个this引用的对象是，可以手动设置返回其他的对象，如果返回值不是一个对象，则返回this。

上面是在es5中this的使用，在es6中新增了箭头函数。箭头函数中的this指向与上述有所不同。请看下面的程序。

var name = "window";
var object = {
  name: "objcet",
  sayName: function() {
    return () => {
      console.log(this.name); // "object"
    }
  }
}
object.sayName()();

var anotherObject = {
  name: "anotherObject"
}
/*
object.sayName()执行完后返回的箭头函数里面的this已经指向了object，此处的this已经固定不会被更改了
*/
object.sayName().call(anotherObject); // "object"

/*
object.sayName只是一个函数指针，该函数并未执行，其内部嵌套的箭头函数中的this
*/
object.sayName.call(anotherObject)(); // "anotherObject"

上面的es6中的箭头函数转换成es5，其实是下面这样的。

var name = "window";
var object = {
  name: "object",
  sayName: function() {
    var _this = this;
    return function() {
      console.log(_this.name);
    }
  }
}

箭头函数不绑定this，它会捕捉其所在（即定义的位置）上下文的this值作为自己的this值

var adder = {
  base: 1,
  add: function(a) {
    var f = v => v + this.base; // 此时已经确定了this的值即adder
    return f(a);
  }
  addThruCall: funcntion(a) {
    var f = v => v + this.base;
    var b = {
      base: 2
    }
    return f.call(b, a);
  }
};
console.log(adder.add(1)); // 2
console.log(adder.addThruCall(1)) // 仍然 2，其内部的this并没有因为call() 而改变，其this值仍然为函数inFun的this值，指向对象adder

call(), apply(), bind()方法对于箭头函数来说只是传入参数，并不影响this的值。

参考文章

this 指向详细解析（箭头函数）