apply()和call()

每个函数都包含俩个非继承而来的方法:apply()call(),这俩个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。一般来讲,this总是指向调用某个方法的对象。

比如:

var color="skyblue";
function myColor(){
      console.log(this.color);   //skyblue
      console.log(this);   //window
}
window.myColor();

window对象调用的 myColor 函数,内部 this 自然指向了windowthis.color也是window.color

一、apply()

这个方法接收2个参数,第一个是在其中运行函数的作用域,第二个是参数数组,其中,第二个参数可以是 Array 构造函数的实例,也可以是 arguments 对象。

例子1:

var fruit="橘子";
var fruitObj={
    fruit:"香蕉"
}
function changeFruit(){
    console.log(this.fruit);
}
changeFruit.apply(window);   //橘子
changeFruit.apply(fruitObj);   //香蕉

例子2:

function sum(a,b){
    return a+b;
}
function callSum1(a,b){
    console.log(sum.apply(this,[a,b]));   //传入Array的实例
}
function callSum2(a,b){
    console.log(sum.apply(this,arguments));   //传入arguments对象
}
callSum1(10,20);   //30
callSum2(10,20);   //30

例子3:

function SuperType(fruit){
    this.fruit=fruit;
    this.getSuperValue=function(){
        console.log(this.fruit);
    }
}
function SubType(fruit){
    SuperType.apply(this,arguments);  //橘子   
}
var instance=new SubType("橘子");
instance.getSuperValue();

二、call()

call() 方法的用法和作用与 apply() 一样,只是再填入第二参数时,必须一一列举出来。

例子1:

function sum(a,b){
    return a+b;
}
function callSum(a,b){
    console.log(sum.call(this,a,b));
}
callSum(10,20);   //30

例子2:

function SuperType(fruit){
    this.fruit=fruit;
    this.getSuperValue=function(){
        console.log(this.fruit);
    }
}
function SubType(fruit){
    SuperType.call(this,fruit);  //橘子
}
var instance=new SubType("橘子");
instance.getSuperValue();

总结:使用apply()还是call(),完全取决于你采用哪种给函数传递参数的方式最方便。如果你打算直接传入arguments对象,或者包含函数中先接收到的也是一个数组,那么使用apply() 肯定最方便,否则,使用call()可能更方便。(在不给函数传递参数的情况下,使用哪个方法都无所谓。)

原文地址:https://www.cnblogs.com/xlj-code/p/9009186.html