JS中的this，call，apply

一.this

JS中的this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。

this的指向：

1.作为对象的方法调用

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

var obj = {
            a: 1,
            getA: function () {
                alert(this === obj);  // true
                alert(this.a);   // 1
            }
        };

        obj.getA();

2.作为普通函数调用

当函数不作为对象的属性被调用时，也就是我们常说的普通函数方式，此时的this总是指向全局对象。在浏览器的js里，这个全局对象是window对象。

window.name = 'globalName';

        var getName = function () {
            return this.name;
        };

        console.log(getName()); //globalName

或者：

window.name = 'globalName';

        var myObject = {
            name: 'aaa',
            getName: function () {
                return this.name;
            }
        };

        console.log(myObject.getName());  // aaa

        var getName = myObject.getName;
        console.log(getName());   //globalName

有时我们会遇到一些困扰，比如在div节点的事件函数内部，有一个局部的callback方法，callback被作为普通函数调用时，内部的this指向了window，但我们往往想让它指向该div节点，代码如下：

<div id="div1">我是一个div</div>

<script>
    window.id = 'window';

    document.getElementById('div1').onclick = function () {
        alert(this.id);   // div1
        var callback = function () {
            alert(this.id);   // window
        };
        callback();
    };
</script>

此时有一种简单的解决办法，可以用一个变量保存div节点的引用：

document.getElementById('div1').onclick = function () {
        var that = this;   // 保存div的引用
        alert(this.id);   // div1
        var callback = function () {
            alert(that.id);   // window
        };
        callback();
    };

3.构造器调用

js中没有类，但是可以从构造器中创建对象，同时也提供了new运算符，使得构造器看起来更像一个类。

当用new运算符调用函数时，该函数总会返回一个对象，通常情况下，构造器里的this就指向返回的这个对象，如下：

var MyClass = function () {
            this.name = 'aaa';
        };
        var obj = new MyClass();
        alert(obj.name);

但用new调用构造器时，还要注意一个问题，如果构造器显示的返回了一个object类型的对象，那么此次运算结果最终会返回这个对象，而不是我们之前期待的this：

var MyClass = function () {
            this.name = 'aaa';
            return {
                name: 'bbb'
            }
        };
        var obj = new MyClass();
        alert(obj.name);   // bbb

如果构造器不显式的返回任何数据，或者是返回一个非对象类型的数据，就不会造成上述问题。

4.Function.prototype.call或Function.prototype.apply调用

跟普通的函数调用相比，用Function.prototype.call或Function.prototype.apply可以动态的改变传入函数的this：

var obj1 = {
            name: 'aaa',
            getName: function () {
                return this.name;
            }
        };

        var obj2 = {
            name: 'bbb'
        };

        console.log(obj1.getName());   // aaa
        console.log(obj1.getName.call(obj2));   // bbb （obj1.getName内的this指向obj2）

二.call和apply

1.区别

它们的作用一模一样，区别只在于传入参数的形式不同。

apply接受两个参数，第一个参数指定了函数体内this对象的指向，第二个参数为一个带下标的集合，apply方法把这个集合中的元素作为参数传递给被调用的函数。

var func = function (a, b, c) {
            alert( [a, b, c] );
        };

        func.apply(null, [1,2,3]);

call传入的参数数量不固定，跟apply相同的是，第一个参数也是代表函数体内的this指向。

var func = function (a, b, c) {
            alert( [a, b, c] );
        };

        func.call(null,1,2,3);

当使用call或者apply时，若我们传入的第一个参数为null，函数体内的this会指向默认的宿主对象，在浏览器中则是window。

有时候我们使用call或者app的目的不在于指定this的指向，而是另有用途，比如借用其他对象的方法。那么我们可以传入null来代替某个具体的对象：

Math.max.apply(null, [1,2,3,4,6,5]);

2.用途

2.1改变this的指向

var obj1 = {
            name: 'aaa'
        };

        var obj2 = {
            name: 'bbb'
        };

        window.name = 'window';

        var getName = function () {
            alert(this.name);
        };

        getName();   // window
        getName.call(obj1);   // aaa
        getName.call(obj2);   // bbb

在实际开发中，经常会遇到this指向被不经意改变的场景，比如有一个div节点，div节点的onclick事件中的this本来是指向这个div的：

document.getElementById('div1').onclick = function () {
        alert(this.id);   // div1
    }

假设该事件中有一个内部函数func，在事件内部调用func时，func函数体内的this就指向了window，而不是我们预期的div，如下：

document.getElementById('div1').onclick = function () {
        alert(this.id);   // div1
        var func = function () {
            alert(this.id);
        };
        func();   // undefined
    }

这时候我们用call来修正func函数内的this，使其依然指向div：

document.getElementById('div1').onclick = function () {
        alert(this.id);   // div1
        var func = function () {
            alert(this.id);   // div1
        };
        func.call(this);
    }