call /apply

apply() / call() 概念

在特定的作用域中调用函数，实际上等于设置函数体内this对象的值   ---《js高级程序设计》

直白来讲，就是

调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments)；即A对象应用B对象的方法。

这两个方法的作用相同，区别在于传入的第二个参数不同

apply() 接收两个参数：一个是在其中运行函数的作用域（this指向），另一个是参数数组（Array实例 / arguments对象）

call() 第一个参数与apply相同（this指向），其余传递给函数的参数逐个列举出来

B.apply(A, arguments);
B.call(A, args1,args2);

 

理解和应用

理解和运用这个方法主要是知道函数中this指向。

我们通常使用的函数有两种，一种是作为某个对象的方法，一种是作为独立的函数

当作为对象的方法时，函数中的this指向的是调用它的对象；而如果是一个独立函数，我们通常不会在其中使用this。

这也是有时找不到是哪个对象调用函数，不知该如何使用apply的问题所在，因此，不要太执着于找this指向。那怎么使用apply呢

第一种就是函数作为某个对象的方法，但是却不被这个对象调用。

 Array.prototype.slice.call(arguments)

var arr1=new Array("1","2","3");
var arr2=new Array("4","5","6");
Array.prototype.push.apply(arr1,arr2); // 6  实现两个数组的合并并返回数组长度

var array=[1,2,4,2,5]
Math.max.apply(null,array)    //5

这时this并不是指向Array，只是需要借用Array类的方法，所以使用了call

第二种就是声明了一个带有this的函数，根据传入不同的对象做出操作（扩充函数的作用域）

window.number = 'one';
document.number = 'two';
var s1 = {number: 'three' };

function changeColor(){
  console.log(this.number);
}

changeColor.apply();         //one (默认传参)
changeColor.apply(window);   //one
changeColor.apply(document); //two
changeColor.apply(this);     //one
changeColor.apply(s1);       //three

扩充函数的作用域是这两个方法最大的优势，好处是对象和方法不需要有耦合关系（在对象中先声明函数，再用对象调用函数）

 

这两个方法最常见的应用是构造函数属性的继承

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

function Cat(name){
  Animal.apply(this,[name]);    
}

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

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

 

 

总结：

• apply，call方法实现相同的功能：在特定的作用域中调用函数
• 区别：是第二个参数不同，apply传入数组参数(Array实例 / argements伪数组），call第二个之后的参数要一一列举
• 应用：使用Array或Math原生方法、继承