JavaScript apply方法和call方法

1. apply方法：接受2个参数，第一个参数指定了函数体内this对象的指向，第二个参数为一个类似数组的集合

var yunxi = function(a,b){

   console.log([a,b]); // [1,2]

   console.log(this === window); // true

};

yunxi.apply(null,[1,2]);

如上代码，我们第一个参数传入null，函数体内默认会指向与宿主对象，即window对象。

 

2. call方法：第二个参数是以逗号隔开的参数

var yunxi = function(a,b){

   console.log([a,b]); // [1,2]

   console.log(this === window); // true

};

yunxi.call(null,1,2);

 

3. call 和 apply 最常见的用途：改变函数体内的this指向

var longen = {
    name:'yunxi'
};
var longen2 = {
    name: '我叫涂根华'
};
var name = "我是来测试的";
var getName = function(){
    return this.name;
};
console.log(getName()); // 打印 "我是来测试的";
console.log(getName.call(longen)); // 打印 yunxi
console.log(getName.call(longen2)); // 打印 "我叫涂根华"

第一次调用 getName()方法，因为它是普通函数调用，所以它的this指向与window；

第二次调用getName.call(longen)，执行这句代码后，getName这个方法的内部指针 this 指向 longen 这个对象了，因此打印 this.name 实际上是 longen.name，因此返回的是 name=”yunxi”。

 

但是 this 指针也有列外的情况，比如一个点击事件，当我们点击一个元素的时候，this指针就指向那个点击元素，但是当我们在内部再包含一个函数后，在函数内再继续调用 this 的话，此时的 this 指针就指向了 window 了，如下代码：

document.getElementById("longen").onclick = function(){
    console.log(this); // this 就指向于div元素对象了
    var func = function(){
        console.log(this); // 打印出window对象
    }
    func();
}

 

以上代码可以看到外部 this 指向被点击的那个元素，内部普通函数调用，this 指针都是指向于 window 对象。但是我们可以使用 call 或者 apply 方法来改变 this 指针的指向，如下代码：

document.getElementById("longen").onclick = function(){
    console.log(this); // this 就指向于div元素对象了
    var func = function(){
        console.log(this); // 就指向于div元素对象了
    }
    func.call(this);
}

 

以上代码使用 call 方法调用 func 函数，使 this 指向与 func 这个对象了。我们还可以不使用 call 或者 apply 方法来改变 this 的指针，我们可以在外部先使用一个变量来保存 this 的指针，在内部调用的时候我们可以使用此变量即可，如下代码：

document.getElementById("longen").onclick = function(){
    console.log(this); // this 就指向于div元素对象了
    var self = this;
    var func = function(){
        console.log(self); // 就指向于div元素对象了
    }
    func();
}  

 

学习资源：涂根华的博客 http://www.cnblogs.com/tugenhua0707/p/5046854.html