js中apply(),bind(),call()方法区别

关于js中apply(),bind(),call()方法区别

先给大家看一段代码吧

var name = 'global scope';
function fn (a,b) {
	console.log(a);
	console.log(b);
	console.log(this.name);
}
fn(1,2)

在这里定义了一个函数,通过函数执行,我们可以知道当前函数this指向为window,因此这里打印为1,2 ,window.name => global scope

现在我们对上面代码做出一些改造,增加一个对象obj,我们想要输出obj中属性,就可以用到call,apply()方法

var obj = {
	name: 'hello world',
	age: 99
}
function fn (a,b) {
	console.log(a);
	console.log(b);
	console.log(this.name);
}
fn()
fn.call(obj); 
fn.apply(obj);

当我们将fn通过call()/apply()方法后,那么久改变了this原来的指向window,将原来指向更改为自己传入的第一个对象,因此我们这里fn.call(o)打印为
o.name => hello world

call()方法与apply()方法注意事项:
1.本身都包含两个参数,第一个参数必须传入,可以为null,undefined,this,如果使用call(),apply()默认都指向winow对象
2.第二个参数是函数调用后的值,也就是实参。call()方法与apply()方法不同点在于call()直接传数字,apply()方法传输组

bind()方法介绍
bind方法用于指定函数内部的this指向（执行时所在的作用域），然后返回一个新函数。bind方法并非立即执行一个函数

 var keith = {
2         a: 1,
3         count: function() {
4             console.log(this.a++);
5         }
6     };
 7 
 8     keith.count(); //1
 9     keith.count(); //2
10     keith.count(); //3

上面的代码我相信大家都看得懂,this指向keith对象，因此打印结果也正常进行,不过我们稍微做出一些调整。

 var keith = {
2         a: 1,
3         count: function() {
4             console.log(this.a++);
5         }
6     };
7 
8     var f = keith.count;
9     f(); //NaN

这里因为我们重新创建了一个f变量等于keith.count方法,而让这个方法执行,这里this指向的是window,因此打印结果应该是undefined++,而如果我们想要将this指向更改为原来的keith对象,那么就需要使用bind()方法
keith.count.bind(keith)
这样就可以了,与我们上面介绍的call(),bind()方法很类似,不过大家需要注意bind()方法返回的是一个函数对象,我们需要自己执行函数。

	 var f = keith.count.bind(keith);
2     f(); //1
3     f(); //2
4     f(); //3
1     keith.count.bind(keith)() //1
2     keith.count.bind(keith)() //2
3     keith.count.bind(keith)() //3

好了最后总结一下区别吧！
a：第一个参数都是指定函数内部中this的指向（函数执行时所在的作用域），然后根据指定的作用域，调用该函数。

b：都可以在函数调用时传递参数。call，bind方法需要直接传入，而apply方法需要以数组的形式传入。

c：call，apply方法是在调用之后立即执行函数，而bind方法没有立即执行，需要将函数再执行一遍。有点闭包的味道。

d：改变this对象的指向问题不仅有call，apply，bind方法，也可以使用that变量来固定this的指向。