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

阅读原文请点击:[url]http://click.aliyun.com/m/23764/[/url]
摘要： 在js中每个函数都包含两个非继承而来的方法：call()和apply() call和apply的作用都是在特定的作用域中将函数绑定到另外一个对象上去运行，即可以用来重新定义函数的执行环境，两者仅在定义参数方式上有所区别 它们接收参数方面不同：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，也就可以调用该对象的内部其他公共属性了

<input type="text" id="myText" value="input text">
<script>
function Obj(){this.value="对象！";}
var value="global 变量";
function Fun1(){alert(this.value);}
window.Fun1(); //global 变量
Fun1.call(window); //global 变量
Fun1.call(document.getElementById('myText')); //input text
Fun1.call(new Obj()); //对象！
window.Fun1(); //global 变量
</script>
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的方法以及属性了
阅读原文请点击:[url]http://click.aliyun.com/m/23764/[/url]