直接贴代码实例
var name="Mary";
var age="17";
var person={
name:this.name,
getAge:function(){
console.log(this.name+" is "+this.age)
}
}
console.log(person.name)
person.getAge()
function getAge(){
console.log(this.age)
}
getAge()
结果
观察上面的代码,同样都是getAge方法,一个在person对象中,一个是声明的一个全局方法,在person对象中的getAge没有找到age,但是全局的getAge找到了age。由此说明,在person中的方法this指向的是person对象,但全局的this指向的对象是window
正因如此,引出call(),apply(),bind()方法的作用,改变this的指向,这是三者的共同意义
举例说下三者使用的方式和区别
var person={
name:'Mary',
age:'17',
getAge:function(){
console.log(this.name+" is "+this.age)
}
}
var person1={
name:'Tom',
age:'18'
}
person.getAge.call(person1)
结果
根据上面的例子我们知道,person对象里的getAge方法中的this指向的是person对象,输出结果应该是“Mary is 17”,但现在的结果却不是,很明显说明了person.getAge.call(person1),使得该方法中的this指向了person1,所以输出结果是“Tom is 18”
现在我们修改下代码如下
var person={
name:'Mary',
age:'17',
getAge:function(){
console.log(this.name+" is "+this.age)
}
}
var person1={
name:'Tom',
age:'18'
}
person.getAge.call(person1)
person.getAge.apply(person1)
person.getAge.bind(person1)
console.log(person.getAge.bind(person1))
person.getAge.bind(person1)()
结果如下
发现call()和apply()输出结果一致,但直接person.getAge.bind(person1)没输出任何东西,打印该语句得到的结果证明bind()返回的是一个函数,在下面执行则得到与call()和apply()同样的结果
该实例证明,bind()和call()和apply()的区别之一就是bind()返回的是一个新的方法,需执行才能得到结果
再次调整代码如下
var person={
name:'Mary',
age:'17',
getAge:function(fruit1,fruit2){
console.log(this.name+" is "+this.age+"喜欢吃"+fruit1+"讨厌吃"+fruit2)
}
}
var person1={
name:'Tom',
age:'18'
}
person.getAge.call(person1,'香蕉','苹果')
person.getAge.call(person1,['香蕉','苹果'])
person.getAge.apply(person1,['香蕉','苹果'])
person.getAge.bind(person1,['香蕉','苹果'])()
person.getAge.bind(person1,'香蕉','苹果')()
person.getAge.apply(person1,'香蕉','苹果')
结果如下
对比代码和结果图,我们可以得出总结如下
三个方法使用的时候,第一个参数都是要指向的对象,第二个参数使用是有区别的
1:call方法应该将要传的参数一一写出,写成数组则会认为是只传递了一个参数
2:apply方法要传递的参数要写成数组形式,如果一一列出用逗号隔开,则会报错
3:bind的参数与call方法一样,一一列出,写成数组被认为只传递了一个参数
bind与call和apply不同的地方还有该方法返回的是一个新的方法,需要执行才可以。