JS中的call()和apply()方法总结

摘要：在中每个函数都包含两个非继承而来的方法和和的作用都是在特定的作用域中将函数绑定到另外一个对象上去运行，即可以用来重新定义函数的执行环境，两者仅在定义参数方式上有所区别它们接收参数方面不同和的第一个参数都是需要调用的函数对象，在函数体内这个参

在js中每个函数都包含两个非继承而来的方法：call()和apply()

call和apply的作用都是在特定的作用域中将函数绑定到另外一个对象上去运行，即可以用来重新定义函数的执行环境，两者仅在定义参数方式上有所区别

它们接收参数方面不同：call和apply的第一个参数都是需要调用的函数对象，在函数体内这个参数就是this的值，剩余的参数是需要传递给函数的值，call与apply的不同就是call传的值可以是任意的，而apply传的剩余值必须为数组

call方法
语法：
Function.call(obj,param1,param2...)
obj:这个对象将替代Function类里的this对象

params:这是一个参数列表

注意: 调用call的对象必须是一个函数对象,因为 call这个方法是在Function的prototype里的

定义：
调用一个对象的一个方法，以另一个对象替换当前对象

关于call的定义很拗口。我的理解：a.call(b,arg1,arg2..)就是a对象的方法应用到b对象上

function add(a,b){

alert(a+b);

}
function reduce(a,b){

alert(a-b);

}
add.call(reduce,1,3) //将add方法运用到reduce,结果为4
这个例子中的意思就是用 add 来替换 reduce，add.call(reduce,3,1) == add(3,1) ，所以运行结果为：alert(4); // 注意：js中的函数其实是对象，函数名是对 Function 对象的引用

window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {

console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!"); 

}
HelloName.call(window); //Hello diz song glad to meet you!
HelloName.apply(myObject); //Hello my Object glad to meet you!
在例子中，我们发现apply()和call()的真正用法是能够扩充函数赖以运行的作用域，如果我们想用传统的方法实现，请见下面的代码：

window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {

console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!"); 

}
HelloName(); //Hello diz song glad to meet you!
myObject.HelloName = HelloName;
myObject.HelloName(); //Hello my Object glad to meet you!
我们发现，要想让HelloName()函数的作用域在对象myObject上，我们需要动态创建myObject的HelloName属性，此属性作为指针指向HelloName()函数，这样，当我们调用myObject.HelloName()时，函数内部的this变量就指向myObject，也就可以调用该对象的内部其他公共属性了

call可以改变this指向
function Animal(){

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

}
function Cat(){

this.name=”cat”;

}
var animal = new Animal();
var cat = new Cat();
animal.showName(); //结果为animal
animal.showName.call(cat); //通过call方法将原本属于Animal对象的showName()方法交给对象cat来使用，输入结果为"Cat"
call 的意思是把 animal 的方法放到cat上执行，原来cat是没有showName() 方法，现在是把animal 的showName()方法放到 cat上来执行，所以this.name 应该是 Cat

bind()方法
支持此方法的浏览器有IE9+、Firefox4+、Safari5.1+、Opera12+、Chrome。它属于ECMAScript5的方法：

window.color = "red";
var o = { color: "blue" };
function sayColor(){

console.log(this.color); 

}
var OSayColor = sayColor.bind(o);
OSayColor(); //blue
这里，sayColor()调用bind()方法，并传入o对象，返回了OSayColor()函数，在OSayColor()中，this的值就为o对象

实现继承
function Animal(name){

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

}
function Cat(name){

Animal.call(this,name);  

}
var cat = new Cat(“Black Cat”);
cat.showName(); //浏览器弹出Black Cat
Animal.call(this) 的意思就是使用 Animal对象代替this对象，那么 Cat中不就有Animal的所有属性和方法了吗，Cat对象就能够直接调用Animal的方法以及属性了

多重继承
function s1(name){

this.name = name;

}
var s2 = function(sex){

this.sex = sex;

}
var s3 = function(age){

  this.age = age;

}
var Student = function(name,sex,age,score){

s1.call(this,name);
  s2.call(this,sex);
  s3.call(this,age);
  this.score = score;

}
Student.prototype.construction = Student;
var s = new Student("jack","male","12","100");
console.log(s.name); //输出:jack
console.log(s.sex); //输出:male
console.log(s.age); //输出:12
console.log(s.score);//输出:100
很简单，使用两个 call 就实现多重继承了。当然，js的继承还有其他方法，例如使用原型链

当然还有 apply，这两个方法基本上是一个意思，区别在于 call 的第二个参数可以是任意类型，而apply的第二个参数必须是数组，也可以是arguments
还有 callee，caller..

apply方法：
语法：
Function.apply(obj,args)
obj：这个对象将代替Function类里this对象(就是定义函数代码块里面的this)

args：这个是数组，它将作为参数传给Function（args-->arguments）,这个可以是数组也可以是 arguments

定义：
应用某一对象的一个方法，用另一个对象替换当前对象。

什么情况下用apply,什么情况下用call
在给对象参数的情况下,如果参数的形式是数组,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Animal的时候参数的列表是对应一致的(也就是Animal和Cat的参数列表前两位是一致的) 就可以采用 apply , 如果我的Animal的参数列表是这样的(age,name),而Cat的参数列表是(name,age,kind),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,kind));

apply的一些其他巧妙用法：

apply可以将一个数组默默的解析成一个一个的参数，可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3) ，利用aplly这个特点我们就可以用在一些针对字符串操作的方法了：例如

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

因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组,但是它支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决
var max=Math.max.apply(null,array),这样轻易的可以得到一个数组中最大的一项 (apply会将一个数组装换为一个参数接一个参数的传递给方法) 这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去（利用Math方法但是不改变this的指向）

2.Math.max 可以实现得到数组中最小的一项

和 max是一个原理 var min=Math.min.apply(null,array)

3.Array.prototype.push 可以实现两个数组合并

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