在JavaScript学习中，this的重要性不明而寓，有必要对其深入学习，而与this息息相关的有两个特别需要注意的就是call，apply，本篇就着手从this开始阐述，而后介绍call、apply之用法。

调用一个函数时代码执行控制权就转移到此函数，同时将参数传入此函数，除了声明函数时定义的形式参数，每个函数都会接受两个附加参数：this和arguments。

this

JavaScript中this总是指向一个对象，这个对象基于函数运行时的执行环境动态绑定，而非函数声明时所处环境。

关于执行环境可查看我的博客系列篇JavaScript之作用域与作用域链

this指向

关于this指向问题，与函数调用息息相关，其可大致分为四类情况：

• (1). 方法调用； 即作为某对象的方法调用。
• (2). 函数调用；即作为普通函数调用。
• (3). 构造器函数调用；即以new方式调用。
• (4). call与apply调用；即以Function.prototype.call或Function.prototype.apply调用。

• 1.方法调用

    var obj = {
        name: 'Job',
        getName: function() {
            console.log(this === obj); //输出true
            console.log(this.name);  //输出Job
            return this.name;
        }
    };
    obj.getName();

当函数作为对象的方法被调用时，this总是指向该对象。

• 2.函数调用

    var name = 'Job';
    var getName = function() {
        console.log(this === window);  //输出true
        console.log(this.name);  //输出Job
        return this.name;
    };
    getName(); //普通函数调用

非严格模式下，当函数作为普通函数方式调用时，不论该函数调用时所处执行环境为何，this总是指向全局对象，JavaScript中即是window对象。

再看如下实例，加深理解：

    <script>
        var id = 'windowId';
        document.getElementById('myDiv').onclick = function() {
            console.log(this.id); //输出myDiv
            var fn = function() {
                console.log(this.id); //输出windowId
            };
            fn(); //普通函数调用
        };
    </script>

• 3.构造器函数调用

    var Animal = function(name) {
        this.name = name;
    };
    var animal = new Animal('Dog');
    console.log(animal.name); //输出Dog

当用new调用构造器函数时，总会返回一个对象，该对象可以看成是构造器函数一个实例，一般，此时构造器里的this就指向返回的这个对象。
但还需要注意的是当构造器显式地返回一个对象时：

    var Animal = function(name) {
        this.name = name;
        return {
            name: 'Job'
        };
    };
    var animal = new Animal('Dog');
    console.log(animal.name); //输出Job   

此时，this指向的是构造器显式返回的对象。

• 4.call与apply调用

    var obj = {
        name: 'Job',
        getName: function() {
            console.log(this === obj); 
            console.log(this.name);  
            return this.name;
        }
    };
    var obj2 = {
        name: 'Web'
    };
    console.log(obj.getName());  //输出Job
    console.log(obj.getName.call(obj2)); //输出Web
    console.log(obj.getName.apply(obj2)); //输出Web

当以Function.prototype.call或Function.prototype.apply方式调用函数时，动态传入参数改变执行环境，此时this指向传入的对象。

call与apply

call与apply是Function原型上定义的两个方法，其应用广泛。

• 1.call与apply的区别

两者作用完全一样，不同之处在于传入参数的形式。

call传入参数数量不固定，第一个参数代表所调用函数体内this的指向，而后依次为所调用函数所需参数。

apply接受最多两个参数，第一个参数指定被调用函数内this的指向，第二个参数为一个带下标的集合，可以是数组或者类数组，作为参数传给被调用函数。

    var fn = function(a, b, b) {
        console.log([a, b, c]);
    };
    fn.call(null, 1,2,3);
    fn.apply(null, [1,2,3]);

需要注意的是，非严格模式下，使用call或apply时，第一个参数是必须的，当第一个参数传入null时，函数体内this就会指向被调用函数的宿主对象(其包含对象)；而严格模式下，this指向则为null

• 2.call与apply的应用

(1). 改变this指向
使用call或apply调用函数可改变函数体内this的指向。实例如前文中this指向相关实例。

(2). Function.prototype.bind
Function.prototype.bind可以用来绑定函数体内this指向，其参数为this的指向对象。IE8及以下不支持，这里我们可以自己实现一个。

    Function.prototype.bind = function(context) {
        var self = this;  //保存原函数的引用
        return function() { //返回一个新函数
            return self.apply(context, arguments); //将传入的参数指定为新函数体内this的指向对象
        };
    };  
    var obj = {
        name: 'Job'
    };
    var fn = function() {
        console.log(this.name);
    };
    fn.bind(obj)();

(3) 借用其他对象的方法
最熟悉的就是借用构造函数实现类似继承的效果：

    var Animal = function(name) {
        this.name = name;
    };
    var Dog = function() {
        Animal.apply(this, arguments);
    };
    Dog.prototype.getName = function() {
        return this.name;
    };
    
    var dog = new Dog('Dog');
    console.log(dog.getName());  //输出Dog

另一很常见的情况就是借用Array.prototype对象上的方法处理函数参数类数组arguments:

    (function() {
        Array.prototype.shift.call(arguments); //arguments为类数组[1,2,3]
        var args = Array.prototype.slice.apply(arguments); //将arguments类数组剩余参数转换为数组赋给args变量
        console.log(arguments); //输出[2, 3]
        console.log(args); //输出[2, 3]
    })(1,2,3);

上面借用Array.prototype上的shift方法移除参数列表的首位，当然也可以借用其他方法达到其他目的，如push, slice等。

JavaScript中，call与apply的应用是非常广泛的，在各类Js框架库中，都不难发现其身影。