1. 程式人生 > >js中call,apply和bind方法的區別和使用場景

js中call,apply和bind方法的區別和使用場景

在js中,所有的函式再被呼叫的時候都會預設傳入兩個引數,一個是this,還有一個是arguments。在預設情況下this都是指當前的呼叫函式的物件。但是有時候我們需要改變this的指向,也就是說使函式可以被其他物件來呼叫,那麼我們應該怎樣做呢?這時候我們就可以使用call,apply和bind方法了。

1.首先搞清楚call,apply和bind方法的來歷

在js中所有的函式都是Function的例項,而且對於Function來說,它的原型即Function.prototype中含有很多東西,其中call,apply和bind方法就是Function原型中的方法,所以根據原型的規則,所有的函式都可以使用原型中屬性和方法,所以來說,對於所有的函式都可以使用call,apply和bind方法。

簡單一句話:call,apply和bind都是Function原型中的方法,而所有的函式都是Function的例項。

2.丟擲一個概念,就是call,apply和bind方法到底有什麼作用?

我認為它們的作用可以用一句話來描述:就是改變this的指向。對於這句話的解釋,我們可以結合程式碼來理解

3.結合程式碼理解改變this的指向的含義

  1. <script type="text/javascript">

  2. function show(sex){

  3. console.log("普通函式"+sex);

  4. }

  5. var person={

  6. name:"aa",

  7. age:14

  8. };

  9. show.call(person,"男");

  10. </script>

在上面的程式碼塊中,我們可以看到person物件並沒有show方法,但是我們可以通過call方法來實現person物件來呼叫show方法。所以這種情況我認為就是改變了this的指向。

同樣的,apply和bind方法也可以實現上述的功能,那麼它們三個有什麼區別呢?

4.call,apply和bind的區別

它們在功能上是沒有區別的,都是改變this的指向,它們的區別主要是在於方法的實現形式和引數傳遞上的不同

①:函式.call(物件,arg1,arg2....)

②:函式.apply(物件,[arg1,arg2,...])

③:var ss=函式.bind(物件,arg1,arg2,....)

我們通過程式碼來更加明顯的區別一下:

  1. <script type="text/javascript">

  2. function show(sex){

  3. console.log("普通函式"+sex);

  4. }

  5. var person={

  6. name:"aa",

  7. age:14

  8. };

  9. show.call(person,"男");

  10. show.apply(person,["女"]);

  11. //對於bind來說,用法更加的靈活

  12. var ss=show.bind(person,"不明");

  13. ss();

  14. </script>

通過觀察上面的程式碼,很明顯的就可以得出它們三者的區別,僅僅是函式傳遞的不同以及bind方法可以更加的方便的使用

--------------------- 本文來自 考拉的墨爾本 的CSDN 部落格 ,全文地址請點選:https://blog.csdn.net/yaojxing/article/details/71942496?utm_source=copy