call和apply可以看作是某个对象的方法,通过调用这个方法,达到通过另外一个对象间接的调用这个方法的目的。概念性的东西比较难得懂,还是直接代码示例比较好。
<script type="text/javascript">
var Person = function(sex){
this.sex = sex;
this.getSex = function(){
return this.sex;
}
}
var man = new Person("男");
var woman = new Person("女");
console.info(man.getSex());
console.info(woman.getSex());
console.info(man.getSex.call(woman));
console.info(woman.getSex.call(man));
</script>
执行的结果如下:
可以看到man.getSex.cala(woman)返回的是女,woman.getSex.cala(man)返回的是男,有点难难以理解是吧?那么我们对这个代码进行一下改动:
<script type="text/javascript">
var Person = function(sex){
this.sex = sex;
this.getSex = function(){
return this.sex;
}
}
var man = new Person("男");
var woman = new Person("女");
//man.getSex.call(woman)等价于如下的代码
woman.o = man.getSex;//临时变量存储man的getSex方法
woman.o();//调用这个方法,此时的this就是woman,那么woman.sex就是女
delete woman.o;//删除这个临时变量
</script>
这样解释是不是就很好的理解了call的用法和基本原理,apply和call差不多,只不过用法有一点小区别,他们的第一个参数都是调用的对象,接下来的参数是这个被调用的方法的参数,call传参的方式man.getSex.call(woman,a,b,c),而apply则是
man.getSex.call(woman,[a,b,c]),假如getSex有三个参数,本示例中没有参数,各位可以亲自试一试。
接下来介绍一些bind的用法,顾名思义,bind就是将函数绑定到一个对象上,具体用法如下:
<script type="text/javascript">
function sum(y){
return this.x+y;
}
var a = {x:1};
var b = sum.bind(a);
console.info(b(2));
</script>
执行的结果为3,sum.bind(a)即将sum函数绑定到a对象上了,并赋值给了b,然后b在调用传入参数2,得到了3.