1

apply、call

JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法,
它们的语法分别为:

/*apply()方法 第一个参数是this指向的对象 第二个参数必须是数组 */
function.apply( thisObj , [argArray] );
/*call()方法  第一个参数是this指向的对象 第二个参数是列举所有的参数 */
function.call(thisObj,arg1 , arg2, ...argN);

个人理解:A.call(B,...N) 执行A方法但this指向B,并且调用后面的N参数
(将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象,换句话说,就是为了改变函数体内部 this 的指向
作用:借用另外一个对象的方法,而不用拷贝。

基本用法:

    window.firstName = "Cynthia"; 
    window.lastName = "_xie";

    var myObject = {firstName:'my', lastName:'Object'};

    function getName(){
        console.log(this.firstName + this.lastName);
    }

    function getMessage(sex,age){
        console.log(this.firstName + this.lastName + " 性别: " + sex + " age: " + age );
    }

    getName.call(window); // Cynthia_xie
    getName.call(myObject); // myObject

    getName.apply(window); // Cynthia_xie
    getName.apply(myObject);// myObject

    getMessage.call(window,"女",21); //Cynthia_xie 性别: 女 age: 21
    getMessage.apply(window,["女",21]); // Cynthia_xie 性别: 女 age: 21

    getMessage.call(myObject,"未知",22); //myObject 性别: 未知 age: 22
    getMessage.apply(myObject,["未知",22]); // myObject 性别: 未知 age: 22
    

实现继承:

function Animal(name){
  this.name = name;
  this.showName = function(){
        alert(this.name);    
    }    
}

function Cat(name){
  //执行animal方法且指向当前的this对象
  Animal.apply(this,[name]);    
}

var cat = new Cat("咕咕");
cat.showName();

/*call的用法*/
Animal.call(this,name);

多重继承

    function Class10(){
      this.showSub = function(a,b){
            alert(a - b);
        }   
    }
    
    function Class11(){
      this.showAdd = function(a,b){
            alert(a + b);
        }  
    }
    
    function Class12(){
      Class10.apply(this);
      Class11.apply(this);   
      // Class10.call(this);
      //Class11.call(this);  
    }
    
    var c2 = new Class12();
    c2.showSub(3,1);    //2
    c2.showAdd(3,1);    //4
    

apply和call的一些其他巧妙用法

(1)Math.max 可以实现得到数组中最大的一项:

因为Math.max不支持Math.max([param1,param2])也就是数组,但是它支持Math.max(param1,param2...),所以可以根据apply的特点来解决
var max=Math.max.apply(null,array),
这样就轻易的可以得到一个数组中的最大项(apply会将一个数组转换为一个参数接一个参数的方式传递给方法)。
这块在调用的时候第一个参数给了null,这是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,所以直接传递了一个null过去。用这种方法也可以实现得到数组中的最小项:Math.min.apply(null,array)

(2)Array.prototype.push可以实现两个数组的合并

同样push方法没有提供push一个数组,
但是它提供了push(param1,param2...paramN),
同样也可以用apply来转换一下这个数组,即:

    
    var arr1=new Array("1","2","3");
    var arr2=new Array("4","5","6");
    Array.prototype.push.apply(arr1,arr2);  
      

//得到合并后数组的长度,因为push就是返回一个数组的长度
也可以这样理解,arr1调用了push方法,参数是通过apply将数组转换为参数列表的集合
通常在什么情况下,可以使用apply类似Math.max等之类的特殊用法:
一般在目标函数只需要n个参数列表,而不接收一个数组的形式,
可以通过apply的方式巧妙地解决这个问题。


前端callback
119 声望3 粉丝