apply 與 call 詳細

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中。