深入理解函数--arguments和this关键字

写在前面：

上一章讲解了深入函数，但是遗漏了一个很重要的arguments，我觉得有必要讲解一下，因为在很多时候我们在项目中很多地方都用到arguments，所以我们来深入了解一下。

---

arguments属性:

在函数对象中有一个属性叫arguments属性，通过这个属性可以获取到相应的参数值，这个属性是以数组形式保存参数(伪数组)，其实就是传递的参数。

function sum (num){
    alert(arguments.length);    //3
    alert(num);                 //16
}
sum(1,2,3);

我们虽然传递了三个参数，上一章我们讲过了虽然它只会返回 “1”，但是传递的参数确实还是存在的。我们可以通过arguments.length可以看到它其实有三个参数，但是接受到的只有一个参数而已。
我们想得到这三个参数也很简单，写一个for循环就可以了：

for(var i=0;i<arguments.length;i++){
     console.log(arguments[i]);   
}

一个简单的递归：arguments.callee()方法

在arguments中有一个方法：callee(参数),我们可以利用这个方法去反向的调用。

一个简单的递归(阶层):

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

alert(sum(4));    //返回结果:24

以上调用递归的函数名称和原有的函数名称耦合在一起了，也就是说以后如果我们改了函数名称，函数体内的的递归就失效了，我们能想到的办法就是更改函数体内的调用函数，但是这往往不是我们想要的，我们想要的就是可以动态的调用，因为往往我们写出来的函数，是不希望更改封装好在函数体内的参数或者值的。

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

alert(sum(4));    //返回结果:24

我们再来看一个使用arguments.callee()的好处:

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

var sum1 = sum;    //将sum赋值给sum1变量存储
alert(sum1(4));    //返回结果:24
sum = null;        //让sum 指向为null
alert(sum1(4));    //sum1 is not a function !

我们发现，当sum指向null的时候，下面的alert就报错了，而我们不希望这种情况的发生，我们可以使用这个方法来去反向调用。

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

var sum1 = sum;    
alert(sum1(4));    //返回结果:24
sum = null;        //让sum 指向为null
alert(sum1(4));    //返回结果:24

老生常谈 : this关键字

当我们需要创建一个类的时候，设置类的属性和方法需要通过this关键字来引用，this关键字在调用时候会根据不同的调用对象指向的也是不同的。

var color = 'red';

function showColor() {
    alert(this.color);
}

//创建类
function Circle (color) {
    this.color = color;
    this.showColor = showColor;
}

var box = new Circle('yellow');
box.showColor();    //返回结果:yellow

我们使用box来实例化Circle，此时this指向的是box，所以color就是yellow.

box.showColor();    //yellow

showColor();        //red

此时调用的函数指向的是window,所以会返回red.

后记：调试上面代码发现的问题

(此处属于个人理解，如有错误请见谅并指出！)

我在写这篇文章的时候发现的问题就是：

window.onload = function () {
    var color = 'red';
    function showColor () {
        alert(this.color);        //undefined
    }
    showColor();
};

如果我们写了window.onload 它会返回undefined，window.onload的意思是页面加载完成之后所发生的事件。有些在页面未加载完成时执行的函数可能会找不到对象（对象未加载完成），会出现错误。
一个小例子来体现JavaScript预处理：

function f (a,b) {
     alert(a);
     alert(b);
     var b = 100;
     function a () {}
   }
  f(1,2);

我们来看看这个函数从解析到执行都发生了什么：

通过上面的例子，我们来理解一下刚刚的例子：

预处理阶段，JavaScript会扫描用var声明的变量和用声明方式创建的函数(并非函数表达式)，其他之外都会忽略。

以上文章中，如有错误，请及时指正！谢谢！

    *Brian.Lee著*