JavaScript 中 call()、apply()、bind() 的用法

作用

重新定义this对象的内容

区别

1
2
3
obj.myFun.call(db);    // 把this对象设置为db 触发函数
obj.myFun.apply(db);    // 把this对象设置为db 触发函数
obj.myFun.bind(db)();   // 把this对象设置为db 返回新函数 不自动执行

传参

都可以接受任意类型的参数,但是传参方式有所不同

1
2
3
obj.myFun.call(context,param1,param2,...); // 逗号分隔,逐个往后加
obj.myFun.apply(db,[param1,param2,...]); // 包裹在一个Array中 逗号分隔,逐个往后加
obj.myFun.bind(db,param1,param2,...); // 逗号分隔,逐个往后加

吐槽

最开始在别人blog看到这么一段代码,当时我以为Student类中apply()的第二个参数随便填就能把当前方法中的参数映射过去。
类似php中的func_get_args(),能获取到传入当前方法的参数集合。然后发现这arguments是 js中数组对象 的名词。。。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*定义一个人类*/  
function Person(name,age)
{
this.name=name;
this.age=age;
}
/*定义一个学生类*/
function Student(name,age,grade)
{
Person.apply(this,arguments);
this.grade=grade;
}
//创建一个学生类
var student=new Student("zhangsan",21,"一年级");
//测试
alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);
//大家可以看到测试结果name:zhangsan age:21 grade:一年级
//学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.

评论区