apply 与 call 介绍

function f1(x, y) {console.log("结果是：" + (x + y) + this);
}
f1(10, 20); // 函数的调用
// 结果是：30[object Window]

// 此时的 f1 实际上是当作对象来使用的，对象可以调用方法
f1.apply();  // 结果是：NaN[object Window]
f1.call();   // 结果是：NaN[object Window]

f1.apply(null);  // 结果是：NaN[object Window]
f1.call(null);  // 结果是：NaN[object Window]

• apply 和 call 方法中如果没有传入参数，或者传入的是null，那么调用该方法的函数对象中的 this 就是默认的 window
• apply 和 call 都可以让函数或者方法来调用，传入参数和函数自己调用的写法不一样，但是效果是一样的。

f1.call(null,10,20);  // 结果是：30[object Window]
f1.apply(null,[10,20]);  // 结果是：30[object Window]

• 基本使用

function f2(x, y){console.log("结果："+(x+y)+" "+ this.age );
}
window.f2(10, 20);  // 结果：30  undefined
// obj 是一个对象
var obj = {
    age: 10,
    sex: "男"
};
window.f2.apply(obj,[10, 20]);  // 结果：30  10
window.f2.call(obj,10,20);  // 结果：30  10
console.dir(obj);  // age: 10 sex: "男"

apply与 call 的作用：改变 this 的指向

apply 和 call可以改变 this 的指向

例子 1：用于方法

function Person(age, sex){
    this.age = age;
    this.sex = sex;
}
// 通过原型添加方法
Person.prototype.sayHi=function(){console.log("您好呀："+this.sex);
}
var per = new Person(10,"男");
per.sayHi(); // 您好呀：男

function Student(name, sex){
    this.name = name;
    this.sex = sex;
}
var stu=new Student("小明", "女");
per.sayHi.apply(stu); // 您好呀：女
per.sayHi.call(stu);  // 您好呀：女
// stu 没有 sayHi()，但是通过 apply 或 call 可以让它调用 per 的 sayHi().

例子 2：用于函数

function f(x, y){console.log("结果是："+(x+y)+" "+this);
    return "此时的 this 是"+this;
}
// apply 和 call 调用
var r1=f.apply(null,[1,2]); // 此时 f 中的 this 是 window
console.log(r1);
// 结果是：3  [object Window]
// 此时的 this 是[object Window]
var r2=f.call(null,1,2); // 此时 f 中的 this 是 window
console.log(r2);
 // 结果是：3  [object Window]
// 此时的 this 是[object Window]

// 改变 this 的指向
var obj={sex: "男"}
// 本来 f 函数是 window 对象的，但是传入 obj 之后，f 函数就是 obj 对象的
var r3=f.apply(obj,[1,2]); // 此时 f 中的 this 是 obj
console.log(r3);
// 结果是：3  [object Object]
// 此时的 this 是[object Object]
var r4=f.call(obj,1,2); // 此时 f 中的 this 是 obj
console.log(r4);
// 结果是：3  [object Object]
// 此时的 this 是[object Object]

apply和 call 的使用方法总结

apply的使用方法：

函数名字.apply(对象，[参数 1，参数 2，...]);
方法名字.apply(对象，[参数 1，参数 2，...]);

call的使用方法：

函数名字.call(对象，参数 1，参数 2，...);
方法名字.call(对象，参数 1，参数 2，...);

apply与 call 的不同：

• 参数传递的方式是不一样的

使用场景

只要是想使用别的对象的方法，并且希望这个方法是当前对象的，那么就可以使用 apply 或者是 call 的方法改变 this 的指向。

• apply和 call 方法实际上并不在函数这个实例对象中，而是在 Function 的prototye中。