call,apply,bind方法的区别和相同点

直接贴代码实例

 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不同的地方还有该方法返回的是一个新的方法，需要执行才可以。