（三）JavaScript-彻底理解函数:重载、内部属性{arguments[callee]、this、caller}、函数属性和方法{length、prototype、apply()、call()}

1.说明

       本文内容主要基于《JavaScript高级程序设计》（第3版），该书也断续的看过一遍，为便于进一步理解与基础知识的掌握，会增加一些个人的理解。
       由于该书出版时间为2012年，在2011年底ECMAScript第三版是大部分浏览器实现的一个版本，该书内容主要基于第三版定义的 ECMAScript 介绍这门语言的基本概念，并就第 5 版的变化给出说明。

2.函数

函数实际上是对象，每个函数都是 Function类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。

2.1.函数的定义

函数的定义（创建）可以使用函数声明语法与函数表达式创建。一定要理解以下两种方式创建几乎是等价的，不同见第三点。

1 函数声明

function sum (num1, num2) {
  return num1 + num2;
}

2 函数表达式

var sum = function(num1, num2){
   return num1 + num2;
};

3 函数声明与函数表达式的区别-执行环境的提升
解析器在向执行环境中加载数据时，对函数声明和函数表达式并非一视同仁。解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问）；至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。

//可以调用函数
alert(sum(10,10));
function sum(num1, num2){
  return num1 + num2;
}

//报错 标识错误
alert(sum(10,10));
var sum = function(num1, num2){
   return num1 + num2;
};

2.2.没有重载

第一种方式理解没有重载：重载的前提是函数名是和函数对象绑定在一起的，可以实现重载。想象ECMAScript函数名为指针，只是指向了函数对象，指针只能指向一个对象。
第二种方式理解没有重载(函数声明与函数表达式)，如下:

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

在创建第二个函数时，实际上覆盖了引用第一个函数的变量 addSomeNumber。

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

2.3.内部属性

在函数内部，有两个特殊的对象： arguments （ arguments 是一个类数组对象，包含着传入函数中的所有参数、 callee属性）和 this；还包含着一个特殊的属性caller（与arguments callee 属性结合说明 ）。

1. arguments

//arguments以数组形式保存了所有传入的参数
function sayHi() {
   alert("Hello " + arguments[0] + "," + arguments[1]);
}
 sayHi('nihao','world');

2. arguments.callee与函数属性caller
arguments.callee：该属性是一个指针，指向拥有这个 arguments 对象的函数。

//普通方式定义阶乘
function factorial(num){
  if (num <=1) {
     return 1;
  } else {
     return num * factorial(num-1)
  }
}

//这么写的一个好处就是当函数名变化的时候，可以避免重复修改函数名
function factorial(num){
  if (num <=1) {
    return 1;
  } else {
    return num * arguments.callee(num-1)
  }
}

caller:这个属性中保存着调用当前函数的函数的引用，如果是在全局作用域中调用当前函数，它的值为 null。

//第一种写法
function outer(){
  inner();
}
function inner(){
  alert(inner.caller);
}
  outer();   //显示outer源码

//推荐的写法
function outer(){
  inner();
}
function inner(){
  alert(arguments.callee.caller);
}
outer();   //显示outer源码

2. this
this引用的是函数据以执行的环境对象——或者也可以说是 this 值（当在网页的全局作用域中调用函数时，this 对象引用的就是 window）。

//this在这里代表window
window.color = "red";
function sayColor(){
   alert(this.color);
}

2.3.函数的属性和方法

1每个函数都包含两个属性： length 和 prototype（上述caller已经说明了）。
2 每个函数都包含这几个方法： apply()、 call()、bind()。

1.属性length
length 属性表示函数希望接收的命名参数的个数：

 function sayName(name){
	alert(name);
}
function sum(num1, num2){
	return num1 + num2;
}
function sayHi(){
	alert("hi");
}
alert(sayName.length); //1
alert(sum.length); //2
alert(sayHi.length); //0

2.属性prototype
1.对于ECMAScript 中的引用类型而言， prototype 是保存它们所有实例方法的真正所在。换句话说，诸如toString()和 valueOf()等方法实际上都保存在 prototype 名下，只不过是通过各自对象的实例访问罢了。
2.简单说函数的prototype 对象存储的是函数实例的公共属性和方法（重要）；
先记住概念，下一节详细说明prototype。
3.apply()和call()
每个函数都包含两个非继承而来的方法： apply()和 call()。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内 this 对象的值。

//apply
function sum(num1, num2){
	return num1 + num2;
}
function callSum1(num1, num2){
	return sum.apply(this, arguments); // 传入 arguments 对象
}
function callSum2(num1, num2){
	return sum.apply(this, [num1, num2]); // 传入数组
}
alert(callSum1(10,10)); //20
alert(callSum2(10,10)); //20

call与apply的主要区别是，call传入参数的时候需要把参数列举出来，而apply可以传入对象和数组。

//call
function sum(num1, num2){
	return num1 + num2;
}
function callSum(num1, num2){
	return sum.call(this, num1, num2);
}
alert(callSum(10,10)); //20

call与apply真正的强大并不是传递参数，而是可以动态的传入特定的作用域，完成动态调用的实现：

window.color = "red";
var o = { color: "blue" };
function sayColor(){
	alert(this.color);
}
sayColor(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue

4.bind()
这个方法会创建一个函数的实例，其 this 值会被绑定到传给 bind()函数的值：

window.color = "red";
var o = { color: "blue" };
function sayColor(){
	alert(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor(); //blue

以上这些知识很重要，是做前端一定要掌握的基础知识。