- 在开始介绍这三个函数之前我们首先来举一个例子来理解this的指向问题。总结为一句话:this是一个指向,默认指向window,this指向调用函数的主体对象。
console.log(this)
var obj = {
name: this
}
console.log(obj.name)
输出的结果为:
window
window
在这段代码中并没有给this指定具体的指向,所以输出的结果均为默认情况下的window。
再举一个栗子
var obj = {
name: '李华',
abc:function () {
console.log("我的名字是"+this.name)
}
}
obj.abc()
console.log(obj.name)
输出的结果为
我的名字是李华
李华
在这段代码中,this指向的是对象obj,因此this.name的值为李华。
理解了this的指向问题后我们来看call(),apply()和bind()。
call 与 apply 的相同点:
- 方法的含义是一样的,即方法功能是一样的;
- 第一个参数的作用是一样的;
call 与 apply 的不同点:
- 两者传入的列表形式不一样
- call可以传入多个参数;
- apply只能传入两个参数,所以其第二个参数往往是作为数组形式传入
多说无用,来看代码
var name="小可爱",
age=18
var obj={
name:'彭昱畅',
age:25,
abc:function() {
console.log(this.name+"的年龄是"+this.age)
}
}
var obj_a={
name:"高欢欢",
age:20
}
obj.abc() //此时this指向她挂载的对象obj
obj.abc.call() //此时,没有传入参数,this指向的是Windows
obj.abc.call(obj_a) //传入参数obj_a后,this指向的是obj_a
obj.abc.apply() //不传参数,this指向的是Window
obj.abc.apply(obj_a) //this指向obj_a
obj.abc.bind()()//不传参数,this指向的是Window
obj.abc.bind(obj_a)()//this指向obj_a
打印的结果如下图所示:
通过call(),apply()和bind()可以改变this的指向,this指向传入的第一个参数。
对三种方法传入参数的理解:
function baz(a,b) {
console.log(this,a,b)
}
baz.call(obj_a,2,3) //调用call()方法后this指向传入的第一个参数,后面的参数直接传入,第二个第三个之间用逗号分开
baz.apply(obj_a,[1,2]) //apply方法和call的作用完全一样,但除第一个参数外其余参数要以数组的形式传入
baz.bind(obj_a,1,2)() //返回的是一个函数,必须调用才能执行
baz.bind(obj_a,[1,2])()
执行的结果如下:
从上面的结果来看:
call、 bind、 apply 这三个函数的第一个参数都是this的指向对象,第二个参数差别就来了:
call 的参数是直接放进去的,第二第三第n个参数全都用逗号分隔。
apply的所有参数都必须放在一个数组里面传进去。
bind除了返回函数以外,它的参数和call 一样。