浅谈call() apply() bind()的区别

浅谈JavaScript里面call() apply()和bind()的区别

    在JavaScript中,this的指向是动态变化的,很可能在写代码的过程中,无意中改变了this的指向,故我们需要一种可以将this的指向固定的方法,于是就有了call() ,apply()和bind()这三个方法。

举个例子：

我们是想打印a里面的name,但是结果却输出了undefined,这是怎么回事呢?

 

如果我们直接执行a.fn()的话,是可以输出name值的,如:

         

直接执行a.fn()为什么可以输出想要的值？ 因为这里this的指向是指向a，那么为什么b的指向不指向a呢？因为this的指向在函数定义的时候确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。

 

以上的这种直接调用a的方法虽然也可以达到我们的目的,但是有的时候我们不得不将这个对象保存到另一个变量中,因为JavaScript的函数存在[定义时上下文]和[运行时上下文]以及[上下文是可以改变的]这样的概念,而call和apply以及bind可以用来重新定义函数的执行环境,也就是this的指向,它们都是为了改变某个函数运行时的上下文而存在的.

 

如果想要变量b输出name的值,可通过以下三种方法:

1. call()

         

通过在call方法,给的第一个参数要把b添加到哪个环境中,也就是this会指向那个对象

 

Call方法除了第一个参数以外还可以添加多个参数,如下:

 

    

 

2. apply()

apply方法和call方法有些相似，它也可以改变this的指向

 

    同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组，如下：

 

注:如果call和apply的第一个参数写的是null，那么this指向的是window对象

3. bind()

bind方法和call、apply方法有些不同，但是它们都可以用来改变this的指向。

先说说他们的不同之处吧,如下:

我们发现代码没有被打印，没毛病，这就是bind和call、apply方法的不同，实际上bind方法返回的是一个修改过后的函数。如果想要打印出来name值,需要在后面加()，如下：

同样，bind也可以传递多个参数，它要传递的参数和call()一样，如下：

或者可以这样：

 

总结：

Call()和apply()以及bind()的相似点：

1. 都是用来改变函数的this的指向
2. 第一个参数都是this要指向的对象
3. 都可以继续传递参数

Call()和apply()以及bind()的区别：

1. Call()在第一个参数之后，后续所有的参数都是传入该函数的值。
2. apply()只有两个参数，第一个参数是this要指向对象，第二个是数组，这个数组就是该函数的参数。
3. bind()方法会返回执行上下文被改变的函数，而不会立即执行，前两者是立即执行函数，它的参数和call()相同。